@use 'exports' as *;

.checkboxField {
	@layer components {
		@include vars;
		@include component;
	}

	@layer mods {
		&.mod-S {
			@include S;
		}

		&.mod-checklist {
			@include checklist;

			.checkboxField-input {
				&:hover {
					@include checklistHover;
				}

				&:active {
					@include checklistActive;
				}

				&:disabled {
					@include checklistDisabled;
				}

				&:checked {
					@include checklistChecked;

					&:hover {
						@include checklistCheckedHover;
					}

					&:active {
						@include checklistCheckedActive;
					}

					&:disabled {
						@include checklistCheckedDisabled;
					}
				}
			}

			&:has(.checkboxField-input:focus-visible) {
				.checkboxField-input {
					@include checklistHover;

					&:checked {
						@include checklistCheckedHover;
					}
				}
			}
		}
	}
}

.checkboxField-input {
	@layer mods {
		&[aria-checked='mixed'] {
			@include checked;
			@include mixed;
		}

		&:focus-visible {
			@include focusVisible;
		}

		&:hover {
			@include hover;

			&[aria-checked='mixed'] {
				@include checkedHover;
			}
		}

		&:active {
			@include active;

			&[aria-checked='mixed'] {
				@include checkedActive;
			}
		}

		&:disabled {
			@include disabled;

			&[aria-checked='mixed'] {
				@include checkedDisabled;
			}
		}

		&[aria-invalid='true'] {
			@include invalid;

			&[aria-checked='mixed'] {
				@include checkedInvalid;
			}

			&:hover {
				@include invalidHover;

				&[aria-checked='mixed'] {
					@include checkedInvalidHover;
				}
			}

			&:active {
				@include invalidActive;

				&[aria-checked='mixed'] {
					@include checkedInvalidActive;
				}
			}
		}

		&:checked {
			@include checked;

			&:hover {
				@include checkedHover;
			}

			&:active {
				@include checkedActive;
			}

			&:disabled {
				@include checkedDisabled;
			}

			&[aria-invalid='true'] {
				@include checkedInvalid;

				&:hover {
					@include checkedInvalidHover;
				}

				&:active {
					@include checkedInvalidActive;
				}
			}
		}
	}
}