@use '../../tokens/index.scss' as tokens;
@use '../../mixins/index.scss' as mixins;

/* stylelint-disable selector-max-specificity, max-nesting-depth, selector-no-qualifying-type */

$checkbox-border-radius: tokens.$border-radius !default;
$checkbox-border-width: 0.0625em !default;
$checkbox-unchecked-border-color: tokens.$control-border !default;
$checkbox-invalid-border-color: tokens.$danger !default;
$checkbox-color: tokens.$primary !default;
$checkbox-check-color: tokens.$primary-invert !default;
$checkbox-check-hover-color: tokens.$text-subtle !default;
$checkbox-size: 1.25em !default;
$checkbox-check-height: 0.75em !default;
$checkbox-check-top: 0.125em !default;
$checkbox-check-width: 0.3125em !default;
$checkbox-check-thickness: 0.125em !default;
$checkbox-timing-function: tokens.$input-timing-function !default;
$checkbox-duration: tokens.$input-transition-duration !default;
$checkbox-spacing: tokens.$spacer-3 !default;

@mixin checkmark {
	display: block;
	position: absolute;
	inset-block-start: $checkbox-check-top;
	width: $checkbox-check-width;
	height: $checkbox-check-height;
	transform: rotate(45deg);
	border: solid $checkbox-check-hover-color;
	border-width: 0 $checkbox-check-thickness $checkbox-check-thickness 0;
	content: '';
}

.checkbox {
	display: flex;
	position: relative;
	align-items: center;
	line-height: 1.25;
	cursor: pointer;

	&:not(:last-child) {
		margin-block-end: $checkbox-spacing;
	}

	.checkbox-check {
		display: flex;
		position: relative;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: $checkbox-size;
		height: $checkbox-size;
		transition-duration: $checkbox-duration;
		transition-property: background, border, border-color;
		transition-timing-function: $checkbox-timing-function;
		border: $checkbox-border-width solid $checkbox-unchecked-border-color;
		border-radius: $checkbox-border-radius;

		&:not(:last-child) {
			margin-inline-end: $checkbox-spacing;
		}

		&::before {
			content: '\0020';
		}
	}

	&.checkbox-sm {
		@include mixins.control-sm;
	}

	&.checkbox-lg {
		@include mixins.control-lg;
	}

	input[type='checkbox'] {
		@include mixins.visually-hidden();

		&:checked + .checkbox-check {
			border-color: $checkbox-color;
			background-color: $checkbox-color;

			&::before {
				@include checkmark;

				border-color: $checkbox-check-color;
			}
		}

		&[disabled] {
			+ .checkbox-check {
				border-color: $checkbox-unchecked-border-color;
				opacity: 0.6;
			}

			+ .checkbox-check,
			~ .checkbox-text {
				cursor: not-allowed;
			}
		}

		@include mixins.focus-visible {
			+ .checkbox-check {
				@extend %focus;
			}
		}
	}

	&.checkbox-muted {
		input[type='checkbox'] {
			&:checked + .checkbox-check {
				border-color: tokens.$text-subtle;
				background-color: tokens.$text-subtle;

				&::before {
					border-color: tokens.$text-invert;
				}
			}
		}
	}

	.checkbox-check.is-checked {
		border-color: $checkbox-color;
		background-color: $checkbox-color;

		&::before {
			@include checkmark;

			border-color: $checkbox-check-color;
		}
	}

	&.is-invalid {
		input[type='checkbox']:not(:checked) + .checkbox-check {
			border-color: $checkbox-invalid-border-color;
		}
	}

	&:hover {
		input[type='checkbox']:not(:checked):not([disabled]) + .checkbox-check::before {
			@include checkmark;
		}
	}
}