input[type="radio"],
input[type="checkbox"],
input[type="color"] {
	-webkit-appearance: none;
	position: relative;
	appearance: none;
	transition: var(--transition);
	border: 0.15rem solid var(--fg-muted-2);
	background-color: var(--fg-muted-1);
	width: 1rem;
	height: 1rem;

	&::before {
		display: block;
		position: absolute;
		transform: scale(0.5);
		opacity: 0;
		transition: var(--transition);
		background-color: var(--contrast-color);
		content: "";
	}

	&:hover {
		background-color: var(--fg-muted-2);
	}

	&:checked {
		border: 0.15rem solid transparent;
		background-color: var(--primary-color);

		&:disabled {
			cursor: not-allowed;
			border: 0.15rem solid transparent;
			background-color: var(--primary-color-alpha);

			&::before {
				opacity: 0.8;
				background-color: var(--fg-color);
			}
		}

		&::before {
			transform: scale(1);
			opacity: 1;
		}
	}

	&:disabled {
		cursor: not-allowed;
		border: 0.15rem solid var(--fg-muted-1);
		background-color: var(--fg-muted-1);
	}
}

input[type="radio"] {
	vertical-align: -0.1875em;
	border-radius: 50%;

	&::before {
		top: 0.125rem;
		left: 0.125rem;
		border-radius: 50%;
		width: 0.5rem;
		height: 0.5rem;
	}
}

input[type="checkbox"] {
	vertical-align: -0.1875em;
	border-radius: calc(var(--rounded-corner-small) / 2);

	&::before {
		$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M13.754 4.668c.176-.2.262-.461.246-.723a1 1 0 0 0-.34-.687 1 1 0 0 0-.726-.246 1 1 0 0 0-.688.34L5.95 10.547 3.707 8.3A1 1 0 0 0 2 9.01a1 1 0 0 0 .293.708l3 3c.195.195.465.3.742.293.278-.012.535-.133.719-.344zm0 0'/%3E%3C/svg%3E");
		-webkit-mask-image: $icon;
		-webkit-mask-size: cover;
		top: -0.125rem;
		left: -0.125rem;
		transform-origin: bottom left;
		mask-image: $icon;
		mask-size: cover;
		width: 1rem;
		height: 1rem;
		content: "";
	}
}

input[type="color"] {
	vertical-align: -0.375em;
	border: 0.25rem solid var(--fg-muted-2);
	border-radius: var(--rounded-corner-small);
	padding: 0;
	width: 3rem;
	height: 2rem;

	&:hover {
		background-color: var(--fg-muted-2);
	}

	&:disabled {
		border: 0.25rem solid var(--fg-muted-2);
		background-color: var(--fg-muted-1);
	}

	&::-moz-color-swatch {
		border: none;
		border-radius: calc(var(--rounded-corner-small) / 2);
	}

	&::-webkit-color-swatch-wrapper {
		padding: 0;
	}

	&::-webkit-color-swatch {
		border-radius: calc(var(--rounded-corner-small) / 2);
	}
}

input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	transition: var(--transition);
	box-shadow: var(--edge-highlight);
	border-radius: 999px;
	background: var(--primary-color);
	width: 100%;
	height: 0.5rem;

	&::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
		box-shadow: var(--shadow);
		border-radius: 999px;
		background-color: white;
		width: 1.5rem;
		height: 1.5rem;
	}

	&::-moz-range-thumb {
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
		box-shadow: var(--shadow);
		border: none;
		border-radius: 999px;
		background-color: white;
		width: 1.5rem;
		height: 1.5rem;
	}
}
