checkbox.scss

@charset "utf-8";

@import "../../../css/partials.meta";
@import "checkbox.variables";

.elm-checkbox {
	@include icon("\00A0", 24, "outline", $partial: $partial);
	align-content: center;

	appearance: none;
	@media (prefers-color-scheme: light) {
		background-color: $checkbox---backgroundColor;
	}
	border: #{to-rem($pxValue: 1)} solid $checkbox---borderColor;
	border-radius: 4px;
	@media (prefers-color-scheme: light) {
		color: $checkbox---color;
	}

	display: inline-flex;
	height: to-rem($pxValue: 24);
	justify-content: center;
	width: to-rem($pxValue: 24);

	&[type="checkbox"] {
		vertical-align: top;
	}

	&::before {
		--icon-font-size: 1.375rem;
		color: inherit;
		margin-right: 0;
	}

	&:checked {
		background-color: $checkbox--checked-backgroundColor;
		color: $checkbox--checked-color;
		@media (prefers-color-scheme: dark) {
			color: $checkbox---color;
			background-color: $db-color-white;
		}

		&::before {
			content: glyph(done);
		}
	}

	&:enabled {
		&:hover {
			background-color: rgba(40, 45, 55, 0.14);
			@media (prefers-color-scheme: dark) {
				background-color: rgba(255, 255, 255, 0.03);
			}

			&:checked {
				background-color: $checkbox-hover-checked-backgroundColor;
			}
		}

		&:active {
			background-color: rgba(40, 45, 55, 0.14);
			@media (prefers-color-scheme: dark) {
				background-color: rgba(255, 255, 255, 0.06);
			}
		}
	}

	&:indeterminate {
		&::before {
			content: glyph(minus);
		}
	}

	&:disabled {
		&,
		& + label {
			opacity: 0.5;
		}
	}

	& + label {
		margin-left: $db-spacing-xs;
	}
}