@import (reference) "./variables.less";

.@{checkbox-prefix} {
	.appearance();
	.touch-action();
	.outline();

	position: relative;
	display: inline-block;
	width: @checkbox-size;
	height: @checkbox-size;
	padding: 0;
	margin-block: calc(@checkbox-gap + (@checkbox-border-width * 2)) @checkbox-gap;
	margin-inline: @checkbox-gap;
	background-color: var(--input-bg);
	border: @checkbox-border-width @border-style var(--input-border);
	border-radius: @checkbox-border-radius;
	font-size: @font-size-medium;
	vertical-align: middle;
	cursor: pointer;
	transition: @transition-speed-fast @transition-easing;
	transition-property: outline, background-color, border, box-shadow;
	z-index: 1;

	&::before {
		@c: (@checkbox-size + @checkbox-gap * 2);

		content: "";
		position: relative;
		display: block;
		inset-block-start: calc(-@checkbox-gap - (@checkbox-border-width * 2));
		inset-inline-start: calc(-@checkbox-gap - (@checkbox-border-width * 2));
		width: calc(@c + (@checkbox-border-width * 2));
		height: calc(@c + (@checkbox-border-width * 2));
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1;
		background-color: var(--primary-contrast);
		border-radius: inherit;
		transition: transform @transition-speed-medium @transition-bounce;
		clip-path: polygon(76.831% 24.747%, 77.811% 23.946%, 80.056% 23.031%, 82.444% 23.031%, 84.689% 23.946%, 85.669% 24.747%, 86.417% 25.648%, 87.327% 27.701%, 87.457% 29.904%, 86.807% 32.031%, 86.189% 32.997%, 85.669% 33.586%, 44.003% 75.253%, 43.102% 76%, 41.049% 76.91%, 38.846% 77.04%, 36.719% 76.39%, 35.753% 75.773%, 35.164% 75.253%, 14.331% 54.419%, 13.53% 53.439%, 12.614% 51.194%, 12.614% 48.806%, 13.53% 46.561%, 14.331% 45.581%, 15.231% 44.833%, 17.285% 43.923%, 19.487% 43.793%, 21.615% 44.443%, 22.581% 45.061%, 23.169% 45.581%, 39.579% 61.994%, 76.831% 24.747%, 76.831% 24.747%);
		transform: translateZ(0) scale(0);
		transform-origin: center;
		opacity: 0;
	}

	&:hover,
	&:focus {
		&:not([disabled], :disabled, [checked], :checked) {
			border-color: var(--input-border-hover);
		}

		&:not([disabled], :disabled):is([checked], :checked) {
			background-color: var(--primary-hover);
			border-color: var(--primary-hover);
		}
	}

	&:active {
		&:not([disabled], :disabled) {
			border-color: var(--input-border-active);
			box-shadow: inset 0 0 0 @border-width-medium var(--input-border-active);
		}

		&:not([disabled], :disabled):is([checked], :checked) {
			background-color: var(--primary-active);
			border-color: var(--primary-active);
			box-shadow: none;
		}
	}

	&:where([checked], :checked) {
		background-color: var(--primary);
		border-color: var(--primary);

		&::after {
			transform: translateZ(0) scale(1);
			opacity: 1;
		}
	}

	&-wrapper {
		position: relative;
		display: inline-flex;
		align-items: flex-start;
		vertical-align: middle;
		z-index: 1;
	}

	&-label {
		.user-select();
		.touch-action();

		display: inline-block;
		padding-block: @checkbox-label-padding-block;
		padding-inline: @checkbox-label-padding-inline;
		font-size: @font-size-medium;
		color: var(--input-color);
		vertical-align: middle;
		cursor: pointer;
		transition: color @transition-speed-fast @transition-easing;
	}

	&:where([disabled], :disabled) {
		background-color: var(--input-bg-disabled);
		border-color: var(--input-border-disabled);
		cursor: not-allowed;

		&::after {
			background-color: var(--text-disabled);
		}

		&:where([checked], :checked) {
			background-color: var(--input-bg-disabled);
			border-color: var(--input-border-disabled);

			&::after {
				background-color: var(--text-disabled);
			}
		}

		& ~ .@{checkbox-prefix}-label {
			color: var(--text-disabled);
			cursor: not-allowed;
		}
	}
}