@use "components/form/input/mixins";
@use "system/colors";
@use "system/typography";
@use "system/icon-map";
@use "system/spacing";
@use "system/breakpoints";

.ods-checkbox {
  @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;

  color: inherit;
  cursor: pointer;

  &:has(input:disabled) {
    cursor: default;
  }

  &__label {
    @include mixins.form-label;
  }

  &__wrapper {
    @extend %ods-margin-top-1;

    display: inline-flex;
  }

  &__required {
    @extend %ods-margin-top-1;
    @extend %ods-padding-0;
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;

    &::before {
      content: "* ";
    }

    &--optional::before {
      content: none;
    }
  }

  & input {
    cursor: pointer;
    opacity: 0;
    position: absolute;

    &:disabled {
      cursor: default;
    }
  }

  &--text-align-top {
    align-items: flex-start;
  }

  &__checkmark {
    @extend %ods-margin-top-1-breakpoint-medium;

    margin-top: 0.12em;
    position: relative;
    border: 0.125rem solid colors.$blue-dark;
    width: 20px;
    height: 20px;
    flex-shrink: 0;

    @include breakpoints.large {
      margin-top: 0.16em;
    }
  }

  &__checkmark::after {
    border: solid white;
    border-width: 0 2px 2px 0;
    content: "";
    display: none;
    height: 10px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%) rotate(45deg);
    top: 45%;
    width: 5px;
  }

  &__text {
    @extend %ods-padding-left-2;
    @extend %ods-text--weight-light;

    border-style: hidden;
    hyphens: auto;
  }

  & input[aria-required="true"] ~ &__text::after {
    content: " *";
  }

  &--error-message {
    @include mixins.error-message;

    background-color: colors.$red-30;
    border-left: 0.25rem solid colors.$red;
    display: flex;
  }

  &__icon {
    @extend %ods-text--size-juliett, %ods-text--size-juliett-breakpoint-large;
    @extend %ods-padding-right-2;

    line-height: 1.5rem;
    align-self: baseline;

    @include breakpoints.large {
      line-height: 1.75rem;
    }
  }


  &--focus &__checkmark,
  &:focus-within &__checkmark,
  & input:focus ~ &__checkmark {
    &:not([disabled]) {
      color: colors.$blue-state;
    }
  }

  &--focus &__text,
  & input:focus ~ &__text {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
  }

  &--hover span,
  &--focus span,
  & input:hover ~ span,
  & input:focus ~ span,
  & input:checked:hover ~ span,
  & input:checked:focus ~ span {
    border-color: colors.$blue-state;
    color: colors.$blue-state;
  }

  &--hover span,
  & input:hover:not([disabled]) ~ span {
    text-decoration: underline;
  }

  &--hover span,
  &:hover span {
    & input:not([disabled]) {
      border-color: colors.$blue-state;
      color: colors.$blue-state;
    }
  }

  & input:checked ~ &__checkmark::after {
    display: block;
  }

  & input:checked ~ &__checkmark {
    background-color: colors.$blue-state;
    outline: none;
  }

  &--focus input ~ &__checkmark,
  &--focus input:checked ~ &__checkmark,
  & input:focus-visible ~ &__checkmark,
  & input:checked:focus-visible ~ &__checkmark {
    outline: 0.25rem solid colors.$purple-light;
  }

  & input:checked ~ &__text {
    color: colors.$blue-state;
  }

  & input:checked ~ span {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
    @extend %ods-text--weight-medium;

    border-color: colors.$blue-state;
    color: colors.$blue-dark;
  }

  & input:disabled:checked ~ &__checkmark {
    background-color: colors.$grayscale-40;
  }

  & input:disabled ~ span,
  & input:disabled:checked ~ span {
    border-color: colors.$grayscale-40;
    color: colors.$grayscale-40;
  }

  & input:disabled:hover ~ span {
    color: colors.$grayscale-40;
    border-color: colors.$grayscale-40;
  }

  &--error {
    @extend %ods-margin-bottom-1;

    & input ~ .ods-checkbox__checkmark {
      border-color: colors.$red;
    }

    & input:checked:hover ~ .ods-checkbox__checkmark,
    & input:checked:focus ~ .ods-checkbox__checkmark {
      background-color: colors.$blue-state;
      border-color: colors.$blue-state;
    }
  }
}