@use '../../../../admin/assets/design/scss/_variables.scss' as *;
.adpresso-checkbox-field {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;

	&:hover .adpresso-checkbox {
		border-color: $color-text;
	}
}

.adpresso-checkbox-label {
	font-size: $font-size;
	color: $color-text;
	cursor: pointer;
	user-select: none;
}

.adpresso-checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	appearance: none;
	background-color: $color-white;
	border: 0.12em solid $color-primary;
	border-radius: 0.25em;
	cursor: pointer;
	flex-shrink: 0;

	&.adpresso-color-accent-invert {
		border-color: $color-accent;
	}

	&.adpresso-color-accent {
		border-color: $color-accent;
		background-color: $color-white;
	}

	// Hover State
	&:hover {
		border-color: $color-teal-dark;
	}

	&:focus{
		box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary;
		outline: none;
		border-width: 0.12em;
	}

	&[data-checked] {
		background-color: $color-primary;

		.adpresso-checkbox-check {
			opacity: 1;
			transform: scale(1);
		}

		&.adpresso-color-accent-invert {
			background-color: $color-white;
			.adpresso-checkbox-check {
				color: $color-accent;
			}
			&:hover {
				border-color: $color-golden-brown-dark;
			}
			&:focus{
				box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-accent;
			}
		}

		&.adpresso-color-accent {
			background-color: $color-accent;
			.adpresso-checkbox-check {
				color: $color-white;
			}
			&:hover {
				border-color: $color-golden-brown-dark;
			}
			&:focus{
				box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-accent;
			}
		}
	}

	// Disabled State
	&[data-disabled] {
		background-color: $color-divider;
		border-color: $color-border;
		cursor: not-allowed;
		opacity: 0.7;
	}
}

.adpresso-checkbox-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: $color-white;
	opacity: 0;
	transform: scale(0.5);
	transition: transform 0.1s ease, opacity 0.1s ease;
}

.adpresso-checkbox-icon {
	width: 2em;
	height: 2em;
}