@import "../tokens/colors";
@import "../tokens/transition";
@import "../tokens/positioning";
$transition: $transition_cubic;

[class^=pb_checkbox_kit] {
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;
  .pb_checkbox_label {
    cursor: pointer;
    font-size: $text_lt_default;
    padding-left: $space_xs;
    user-select: none;
  }

  .pb_checkbox_checkmark,
  .pb_checkbox_indeterminate {
    align-items: center;
    border: solid $border_light 2px;
    border-radius: $border_rad_light;
    height: 22px;
    transition: background $transition_default ease, box-shadow $transition_default ease;
    width: 22px;
    .check_icon,
    .indeterminate_icon {
      color: $white;
      height: 16px;
      left: 1px;
      display: flex;
      margin: auto;
      opacity: 0;
      width: 16px;
      &.hidden {
        display: none;
      }
    }
  }

  @media (hover:hover) {
    &:hover input ~ .pb_checkbox_checkmark {
      background-color: $bg_light;
    }
  }

  input {
    cursor: pointer;
    display: flex;
    height: 0;
    opacity: 0;
    position: relative;
    width: 0;
    left: $offscreen;

    &:focus ~ .pb_checkbox_checkmark {
        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
    }
    &:checked ~ .pb_checkbox_checkmark,
    & ~ .pb_checkbox_indeterminate {
      background-color: $primary_action;
      border-color: $primary_action;

      &:hover {
        background-color: $primary_action;
        border-color: $primary_action;
      }
    }
    &:checked ~ .pb_checkbox_checkmark,
    & ~ .pb_checkbox_indeterminate {
      display: inline-block;
      .check_icon,
      .indeterminate_icon {
        opacity: $opacity_10;
      }
    }

    &:disabled ~ .pb_checkbox_checkmark {
      cursor: not-allowed;
      background-color: mix($charcoal, $white, 5%);
      border-color: $border_light;

      & ~ .pb_checkbox_label {
        cursor: not-allowed;
        color: $text_lt_light;
      }
      & ~ .pb_checkbox_label .pb_body_kit {
        cursor: not-allowed;
        color: $text_lt_light;
      }
    }

    &:disabled:checked ~ .pb_checkbox_checkmark {
      background-color: $neutral;
      border-color: $neutral;
    }

    &:disabled:checked:hover ~ .pb_checkbox_checkmark {
      background-color: $neutral;
      border-color: $neutral;
    }
  }

  &.dark {
    input {
      &:focus ~ .pb_checkbox_checkmark {
        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;      
      }

      &:disabled ~ .pb_checkbox_checkmark {
        cursor: not-allowed;
        background-color: mix($charcoal, $white, 80%);
        border: 2px solid $border_dark;

        & ~ .pb_checkbox_label {
          cursor: not-allowed;
          color: $text_dk_light;
        }
        & ~ .pb_checkbox_label .pb_body_kit {
          cursor: not-allowed;
          color: $text_dk_light;
        }
      }

      &:disabled:checked ~ .pb_checkbox_checkmark {
        background-color: $border_dark;
      }

      &:disabled:checked:hover ~ .pb_checkbox_checkmark {
        background-color: $border_dark;
        border-color: $border_dark;
      }
    }
    
    @media (hover:hover) {
      &:hover .pb_checkbox_checkmark {
        background-color: rgba($white,.05);
      }
    }

    &.pb_checkbox_kit_error {
      > .pb_checkbox_checkmark {
        border-color: $error_dark;
       }

       input {
        &:checked ~ .pb_checkbox_checkmark,
        & ~ .pb_checkbox_indeterminate {
          border-color: $primary;
          &:hover {
            border-color: $primary;
          }
        }
      }
    }
  }

  &.pb_checkbox_kit_error {
    > .pb_checkbox_checkmark {
      border-color: $error;
    }
  }
}