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

	&::before {
		display: block;
		position: absolute;
		transform: scale(0);
		opacity: 0;
		transition-duration: var(--transition);
		transition-property: transform, opacity;
		background-color: white;
		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"] {
	border-radius: 50%;

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

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

	&::before {
		$checkmark-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: $checkmark-icon;
		-webkit-mask-size: cover;
		top: -0.125rem;
		left: -0.125rem;
		transform-origin: bottom left;
		mask-image: $checkmark-icon;
		mask-size: cover;
		width: 1rem;
		height: 1rem;
		content: "";
	}
}