input[type='checkbox'] {
	& + label {
		display: flex;
		align-items: center;
		position: relative;

		&:before {
			content: '';
			width: 1rem;
			height: 1rem;
			border: 2px solid;
			display: inline-block;
			margin-right: 0.5rem;
		}
	}

	&:checked + label {
		&:after {
			content: '';
			width: 0.4rem;
			height: 0.7rem;
			border-bottom: 0.2rem solid var(--yellow);
			border-right: 0.2rem solid var(--yellow);
			position: absolute;
			left: 0.3rem;
			bottom: 0.45rem;
			z-index: 2;
			display: block;
			transform: rotate(45deg);
		}
	}
}

label {
	display: block;
}

input,
textarea {
	display: block;
	width: 100%;
	background: transparent;
	border: 1px solid var(--ink);
	padding: 0.5rem;
	color: inherit;
	font-size: 1rem;
	font-style: italic;
}

input {
	&[type=radio],
	&[type=checkbox] {
		display: initial;
		width: initial;
		margin: initial;
	}

	&[type=search] {
		color: inherit;
		font-style: inherit;
	}
}

select {
	font-size: 1rem;
	font-family: var(--heading-font);
	border: 1px solid var(--ink);
	padding: var(--sixteenth-note) var(--eighth-note);
	width: max-content;
}

button,
input[type=submit] {
	border: 1px solid;
	padding: 0.5rem 1rem;
	background: var(--blue-lighter);
	font-size: 1rem;
	font-family: var(--heading-font);
	color: var(--ink);
	margin: 0;
	transition: background 0.15s;
	border-right-width: 2px;
	border-bottom-width: 2px;

	.dark & {
		background: var(--blue-dark);
	}

	&:hover {
		background: var(--blue-100);
	}

	.dark & {
		&:hover {
			background: var(--blue-800);
		}
	}
}

::placeholder {
	color: var(--neutral-500);
}

.dark ::placeholder {
	color: var(--neutral-400);
}

.settings-toggle {
	--itemTransition: 0.25s cubic-bezier(1, 0, 0, 1);

	cursor: pointer;
	height: var(--button-size);
	width: var(--button-size);
	flex: 0 0 var(--button-size);
	overflow: hidden;
	padding: 0;
	position: relative;
	border-radius: 2rem;
	border: 2px solid var(--ink);
	background: var(--button-background);
	z-index: 11;

	&:hover {
		background: var(--button-background);
	}

	.dark & {
		border-width: 2px; //Prevents overrides from above button styles
	}
}