@use "@gloria/a11y/_mixins.scss" as *;

.c-checkbox {
	display: inline-flex;
	align-items: baseline;
	position: relative;
	cursor: pointer;
	user-select: none;

	&--expanded {
		display: flex;
	}

	&--radio {
		.c-checkbox__box {
			position: relative;
			border-radius: 50%;
		}

		.c-checkbox__input:checked ~ .c-checkbox__label .c-checkbox__box::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: var(--color-common-white);
		}
	}

	&__input {
		position: absolute;
		opacity: 0;
		height: 20px;
		width: 20px;
		margin: 0;
		cursor: pointer;
		z-index: 1;
		left: 0;

		&:focus-visible ~ .c-checkbox__label .c-checkbox__box {
			@include a11y-focus-ring-outline;
		}

		&:checked:disabled ~ .c-checkbox__label .c-checkbox__box {
			background-color: var(--color-secondary-light-disabled);
			border-color: var(--color-secondary-light-disabled);
		}

		&:checked ~ .c-checkbox__label .c-checkbox__box {
			background-color: var(--color-primary-500);
			border-color: var(--color-primary-500);

			.c-checkbox__icon {
				opacity: 1;
			}
		}

		&:disabled ~ .c-checkbox__label {
			cursor: not-allowed;
			color: var(--color-text-disabled);

			.c-checkbox__box {
				background-color: var(--color-secondary-100-disabled);
				border-color: var(--color-secondary-300);
			}
		}
	}

	&__label {
		display: inline-flex;
		align-items: center;
		cursor: pointer;
		font-family: var(--font-family-text);
		font-size: var(--font-size-base);
		color: var(--color-text-primary);
	}

	&__box {
		position: relative;
		top: 1px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		min-width: 20px;
		border: var(--radius-0-5) solid var(--color-gray-400);
		border-radius: var(--radius-1);
		background-color: var(--color-common-white);

		@include a11y-focus-transitions(
			background-color var(--duration-fast) var(--cbuc-quad-out),
			transform var(--duration-fast) var(--cbuc-quad-out)
		);
	}

	&__icon {
		position: relative;
		top: -1px;
		width: 14px;
		height: 14px;
		color: var(--color-common-white);
		opacity: 0;
		transform: scale(0.8);
		transition:
		opacity var(--duration-fast) var(--cbuc-quad-out),
		transform var(--duration-fast) var(--cbuc-quad-out);
	}

	&__text {
		margin-left: var(--spacing-3);
	}
}
