@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/functions' as *;

$shading: with-opacity(var(--ui-soft), 20);
$tinting: with-opacity(var(--action), 5);

.check {
	cursor: pointer;
	padding-left: 2.25rem;
	position: relative;
	text-align: left;
	user-select: none;

	&.adjust {
		padding-top: 0;
	}

	input[type='checkbox'] {
		height: 100%;
		position: absolute;
		width: 100%;
		z-index: 10;
	}

	.checkmark {
		border: 0.0625rem solid;
		border-radius: 0.25rem;
		height: 1.375rem;
		position: absolute;
		left: 0;
		top: 0;
		transition: border-color var(--transition-fast);
		width: 1.375rem;
		box-sizing: content-box;
		outline-color: transparent;
		background-color: var(--ui-fill);
		border-color: var(--ui-stroke);

		&::after {
			border-width: 0 0.1875rem 0.1875rem 0;
			border-style: solid;
			content: '';
			height: 0.625rem;
			left: 0.5rem;
			opacity: 0;
			position: absolute;
			top: 0.1875rem;
			transform: rotate(0deg);
			transition: border-color var(--transition-fast);
			width: 0.25rem;
			border-color: var(--action);
		}
	}

	.detail {
		display: inline-flex;
		flex-direction: column;
		color: var(--ui-body);

		.disclaimer {
			display: block;
			font-size: 0.875rem;
			margin-top: 0.25rem;
		}
	}

	&:hover {
		input[type='checkbox'] + .checkmark {
			border-width: 0.0625rem;
			border-style: solid;
			box-shadow: 0 0 0.625rem $shading;
			border-color: var(--action);
		}
	}

	&:focus,
	&:focus-visible,
	&:focus-within {
		input[type='checkbox'] + .checkmark {
			outline: var(--action-tertiary) solid 3px;
			box-shadow: 0 0 0.625rem $shading;
		}
	}

	i {
		display: inline-block;
		margin-bottom: -0.1875rem;
		margin-left: 0.1875rem;
		width: 0.875rem;
	}

	input[type='checkbox'] {
		cursor: pointer;
		height: 0;
		opacity: 0;
		position: absolute;
		width: 0;

		&:checked + .checkmark {
			background-color: $tinting;
			border-width: 0.0625rem;
			border-style: solid;
			border-radius: 0.25rem;
			border-color: var(--action);

			&::after {
				opacity: 1;
				transform: rotate(45deg);
			}
		}
	}

	&.inactive,
	&.disabled {
		&:hover,
		&:focus {
			input[type='checkbox'] + .checkmark {
				box-shadow: none;
			}
		}
	}

	&.inactive {
		input[type='checkbox'] + .checkmark {
			border: 0;
		}

		input[type='checkbox'] {
			&:checked + .checkmark {
				border: 0;
			}
		}
	}

	&.disabled {
		opacity: 0.5;
		cursor: not-allowed;
		color: var(--ui-text);

		input[type='checkbox'] + .checkmark {
			border-width: 0.0625rem;
			border-style: solid;
			background-color: var(--ui-fill);
			border-color: var(--ui-stroke);
		}

		input[type='checkbox'] {
			&:checked + .checkmark {
				border-width: 0.0625rem;
				border-style: solid;
				opacity: 0.5;
				background-color: var(--ui-fill);
				border-color: var(--ui-stroke);
			}
		}

		.checkmark {
			&::after {
				border-color: var(--ui-stroke);
			}
		}
	}

	&.danger {
		cursor: pointer;
		color: var(--fail);

		input[type='checkbox'] + .checkmark {
			border-width: 0.0625rem;
			border-style: solid;
			background-color: var(--ui-fill);
			border-color: var(--fail);
		}

		input[type='checkbox'] {
			&:checked + .checkmark {
				border-width: 0.0625rem;
				border-style: solid;
				background-color: var(--ui-fill);
				border-color: var(--fail);
			}
		}

		.checkmark {
			&::after {
				border-color: var(--fail);
			}
		}
	}

	&.hidden {
		height: 0.0625rem;
		margin: 0;
		opacity: 0;
		overflow: hidden;
		padding: 0;
		width: 0.0625rem;
	}
}