.input {
	box-sizing: border-box;
	padding: .5rem;
	border: solid 1px var(--shadow-hint);
	color: var(--shadow-strong);
	background: var(--background);
	font-size: 1rem;
	font-family: inherit;

	&:focus {
		border: solid 1px var(--primary);
	}

	&::-webkit-calendar-picker-indicator {
		opacity: .5;
	}
}

.select {
    color: var(--shadow-strong);
    background: var(--background);
    padding: .5rem;
    font-size: 1rem;
    border: solid 1px var(--shadow-weak);
    cursor: pointer;
}

.button {
	display: inline-flex;
	align-items: center;
	border: none;
	background: none;
	padding: .5rem;
	font-size: .9rem;
	font-weight: bold;

	&:hover {
		cursor: pointer;
	}
}

.button-primary {
	color: var(--text-light);
	background: var(--primary);

	&:hover {
		background: var(--primary-strong);
	}

	&:disabled {
		background: var(--shadow-weak);
		cursor: default;
	}

	.icon {
		fill: var(--text-light);
		margin-right: .5rem;
	}
}

.button-secondary {
	color: var(--primary);

	&:hover:not(:disabled) {
		color: var(--text-light);
		background: var(--primary);

		.icon {
			fill: var(--text-light);
		}
	}

	&:disabled {
		color: var(--shadow-strong);
		cursor: default;
	}

	.icon {
		fill: var(--primary);
		margin-right: .5rem;
	}
}

.album-toggle {
	height: fit-content;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .5rem 1rem;
	border: none;
	border-bottom: solid 1px var(--shadow-hint);
	color: var(--shadow);
	background: var(--background-dim);
	font-size: 1rem;
	font-weight: bold;

	.icon {
		fill: var(--shadow);
		margin: -.1rem .5rem 0 0;
	}

	&:hover {
		background: var(--shadow-hint);
		cursor: pointer;
	}
}