@use '../variables' as *;

.#{$prefix}checkbox {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--#{$prefix}checkbox-gap);
	-webkit-tap-highlight-color: transparent;

	input {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
	}

	&--disabled {
		opacity: 0.6;
		pointer-events: none;
	}

	&--read-only {
		pointer-events: none;
	}

	&__control {
		position: relative;
		width: var(--#{$prefix}checkbox-control-width);
		height: var(--#{$prefix}checkbox-control-height);
		border-width: var(--#{$prefix}checkbox-control-border-width);
		border-style: var(--#{$prefix}checkbox-control-border-style);
		border-color: var(--#{$prefix}checkbox-control-border-color);
		border-radius: var(--#{$prefix}checkbox-control-border-radius);
		color: var(--#{$prefix}checkbox-control-color);
		display: flex;
		justify-content: center;
		align-items: center;
		transition:
			color 0.05s ease-in-out 0.025s,
			border-color 0.05s ease-in-out 0.025s;
		overflow: hidden;
	}

	&--before &__control {
		order: 2;
	}

	&--before &__label {
		order: 1;
	}

	&--checked &__control {
		border-color: var(
			--#{$prefix}_checked-checkbox-control-border-color,
			var(--#{$prefix}checkbox-control-border-color)
		);
		color: var(--#{$prefix}_checked-checkbox-control-color, var(--#{$prefix}checkbox-control-color));
	}

	&--focus &__control {
		box-shadow: var(--#{$prefix}_focus-checkbox-control-box-shadow);
	}

	&__tap {
		position: absolute;
		inset: 0px;
		opacity: 0;
		border-radius: inherit;
		background-color: var(--#{$prefix}checkbox-tap-background);
		transform: scale(0);
		transition:
			opacity 0.05s ease-in-out 0.025s,
			transform 0.05s ease-in-out 0.025s;
	}

	&--checked &__tap {
		opacity: 1;
		transform: scale(1.5);
	}

	.#{$prefix}icon {
		opacity: 1;
		transform: scale(0);
		transition:
			opacity 0.05s ease-in-out 0.025s,
			transform 0.05s ease-in-out 0.025s;
	}

	&--checked .#{$prefix}icon {
		opacity: 1;
		transform: scale(1);
	}

	&-group {
		display: flex;
		flex-wrap: wrap;
		gap: var(--#{$prefix}checkbox-group-gap);

		&--row {
			flex-direction: row;
			align-items: center;
		}

		&--col {
			flex-direction: column;
		}

		&--start {
			justify-content: flex-start;
		}

		&--center {
			justify-content: center;
		}

		&--end {
			justify-content: flex-end;
		}

		&--stretch .#{$prefix}checkbox {
			flex-grow: 1;
		}
	}

	&__label {
		font-size: var(--#{$prefix}checkbox-label-font-size);
		color: var(--#{$prefix}checkbox-label-color);
	}
}