@use '../../styles/variables' as *;
@use '../../styles/mixins' as *;

.ui-checkbox {
  $self: &;

  --size: 16px;

  display: flex;

  &__wrapper {
    display: inline-flex;
    position: relative;
  }

  &__input {
    width: 0;
    height: 0;
    opacity: 0;
    cursor: pointer;
    z-index: -1;
    margin: 0;
  }

  &__checkmark {
    --border-color: var(--checkbox-border-color);
    --border-width: 1px;

    width: var(--size);
    height: var(--size);
    border-radius: 4px;
    outline: var(--border-width) solid var(--border-color);
    outline-offset: calc(var(--border-width) * -1);
    color: transparent;
    cursor: pointer;
    transition: .2s ease-out;
    transition-property: outline-color, background-color, color;

    #{$self}.has-label & {
      margin-top: 1px;
    }

    #{$self}__input:focus-visible + &,
    #{$self}:not(.is-disabled):not(.is-checked) &:hover {
      --border-width: 2px;
    }

    #{$self}.is-checked & {
      --border-width: 0px;

      color: var(--checkbox-checked-color);
      background-color: var(--checkbox-checked-background);
    }

    #{$self}.is-checked #{$self}__input:focus-visible + &,
    #{$self}:not(.is-disabled).is-checked &:hover {
      color: var(--checkbox-checked-hover-color);
    }

    #{$self}.is-invalid & {
      --border-color: var(--checkbox-invalid-border-color);
    }

    #{$self}.is-disabled & {
      --border-color: var(--checkbox-disabled-border-color);

      cursor: not-allowed;
    }

    #{$self}.is-disabled.is-checked & {
      color: var(--checkbox-disabled-checked-color);
    }
  }

  &__label {
    @include txt-i-m;

    margin-left: 8px;
    color: var(--checkbox-label-color);

    #{$self}.is-disabled & {
      color: var(--checkbox-label-disabled-color);
      cursor: not-allowed;
    }
  }

  @include element-variant('checkbox', '', (
          'border-color': $clr-grey-400,
          'checked-color': $clr-grey-600,
          'checked-background': $clr-grey-300,
          'checked-hover-color': $clr-grey-500,
          'invalid-border-color': $clr-red-500,
          'disabled-border-color': $clr-grey-300,
          'disabled-checked-color': $clr-grey-400,
          'label-color': $clr-black,
          'label-disabled-color': $clr-grey-400
  ))
}