@import '../../../styles/_partials/index';
@import '../../../common/styles/themeUtils';

$checkboxSize: 18px;

.Checkbox {
	/**
	 * Default state.
	 */
	.Checkbox_Label {
		display: flex;
		position: relative;
		align-items: center;
	}

	.Checkbox_Label,
	.Checkbox_Label * {
		cursor: pointer;
	}

	.Checkbox_LabelContents {
		color: var(--Checkbox_TextColor);
		font-weight: 500;
		margin-left: 8px;
	}

	.Checkbox_CheckmarkContainer {
		@include setupThemeVars (
			'--Checkbox_BorderColor',
			'--Checkbox_FillColor',
			'--Checkbox_OutlineColor',
			'--Checkbox_TextColor'
		);
		@include setThemeVar('--Checkbox_TextColor', $gray-dark, $white);
		@include setThemeVar('--Checkbox_BorderColor', $gray75);
		@include setThemeVar('--Checkbox_FillColor', transparent);
		@include setThemeVar('--Checkbox_OutlineColor', transparent);

		border: 2px solid var(--Checkbox_BorderColor);
		align-items: center;
		background: transparent;
		border-radius: 4px;
		display: flex;
		flex-shrink: 0;
		height: $checkboxSize;
		width: $checkboxSize;
		position: relative;
		justify-content: center;

		&:before {
			content: '';
			position: absolute;
			background: var(--Checkbox_FillColor);
			width: 14px;
			height: 14px;
		}
	}

	.Checkbox_InputHidden {
		opacity: 0;
		position: absolute;
	}

	.Checkbox_Checkmark,
	.Checkbox_CheckmarkMixed {
		position: absolute;
		path {
			@include __theme-fill($white, $gray-dark);
		}
	}

	.Checkbox_CheckmarkMixed {
		margin: 5px 3px;
	}

	/**
	 * Checked state.
	 */
	&.Checkbox__Checked,
	&.Checkbox__CheckMixed {
		.Checkbox_CheckmarkContainer {
			@include setThemeVar('--Checkbox_BorderColor', $green-dark, $green);
			@include setThemeVar('--Checkbox_FillColor', $green-dark, $green);
		}

		input:focus-visible + .Checkbox_CheckmarkContainer {
			@include setThemeVar('--Checkbox_BorderColor', $green-dark, $green);
		}
	}

	/**
	 * Disabled state.
	 */
	&.Checkbox__Disabled,
	&.Checkbox__Disabled:hover {
		.Checkbox_LabelContents {
			@include setThemeVar('--Checkbox_TextColor', $gray, $gray15);
			opacity: 0.7;
		}

		&.Checkbox__Checked,
		&.Checkbox__CheckMixed {
			.Checkbox_LabelContents {
				@include setThemeVar('--Checkbox_TextColor', $gray-dark, $white);
				opacity: 0.7;
			}
		}

		.Checkbox_Label,
		.Checkbox_Label * {
			cursor: not-allowed;
		}

		.Checkbox_CheckmarkContainer {
			@include setThemeVar('--Checkbox_BorderColor', $gray-dark50, $gray25);
			opacity: 0.5;
		}

		&.Checkbox__Checked,
		&.Checkbox__CheckMixed {
			.Checkbox_CheckmarkContainer {
				@include setThemeVar('--Checkbox_BorderColor', $green-dark, $green);
				@include setThemeVar('--Checkbox_FillColor', $green-dark, $green);
				opacity: 0.5;
			}
		}
	}

	/**
	 * Hover state.
	 */
	&:hover {
		.Checkbox_CheckmarkContainer {
			@include setThemeVar('--Checkbox_BorderColor', $gray, $gray25);
		}

		&.Checkbox__Checked,
		&.Checkbox__CheckMixed {
			.Checkbox_CheckmarkContainer {
				@include setThemeVar('--Checkbox_FillColor', $green-dark50, $green-dark50);
				@include setThemeVar('--Checkbox_BorderColor', $green-dark50, $green-dark50);
			}

			input:focus-visible + .Checkbox_CheckmarkContainer {
				@include setThemeVar('--Checkbox_BorderColor', $green-dark50, $green-dark50);
			}
		}
	}

	/**
	 * Focus state.
	 */
	input:focus-visible + .Checkbox_CheckmarkContainer {
		@include setThemeVar('--Checkbox_OutlineColor', $green-dark, $green);
		outline: 2px solid var(--Checkbox_OutlineColor);

		@include setThemeVar('--Checkbox_BorderColor', $green-dark, $white);
		outline-offset: 2px;
	}
}