@import "../tokens/spacing";
@import "../tokens/colors";
@import "../tokens/opacity";
@import "../tokens/shadows";
@import "../pb_avatar/avatar";
@import "../tokens/typography";

$selector: ".pb_form_pill";
$pb_form_pill_height: 27px;
$form_pill_colors: (
  primary: map-get($status_color_text, "primary"),
  neutral: map-get($status_color_text, "neutral"),
);


[class^=pb_form_pill_kit] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 $space-md/2;
  height: $pb_form_pill_height;
  border-radius: $pb_form_pill_height/2;
  margin-bottom: 2px;
  margin-top: 2px;
  cursor: pointer;
  .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
    font-size: $font_small !important;
  }
  @each $color_name, $color_value in $form_pill_colors {
    &[class*=_#{$color_name}]  {
      background-color: mix($color_value, $card_light, 10%);
      @if ($color_name == "neutral") {
        background-color: $white;
        border: 1px solid $border_light;
        .pb_form_pill_icon {
          color: $text_lt_default;
        }
      }
      transition: background-color 0.2s ease;
      box-shadow: none;
      @media (hover:hover) {
        &:hover {
          background-color: mix($color_value, $card_light, 20%);
          @if ($color_name == "neutral") {
            background-color: mix($neutral, $card_light, 20%);
            border: 1px solid $border_light;
          }
        }
        &:active {
          background-color: mix($color_value, $card_light, 30%);
          @if ($color_name == "neutral") {
            background-color: mix($neutral, $card_light, 30%);
          }
        }
      }
      #{$selector}_text {
        color: $color_value;
        @if ($color_name == "neutral") {
          color: $text_lt_default;
        }
        padding: 0 $space-xs;
      }
      #{$selector}_close {
        color: $color_value;
        display: flex;
        align-items: center;
        height: 17px;
        border-radius: calc(50%);
        cursor: pointer;
        @if ($color_name == "neutral") {
          color: $text_lt_default;
        }
        &:hover {
          background-color: mix($color_value, $card_light, 40%);
          @if ($color_name == "neutral") {
            background-color: mix($neutral, $card_light, 60%);
          }
        }
      }
      #{$selector}_tag {
        color: $color_value;
        padding: 0 $space-xs;
        @if ($color_name == "neutral") {
          color: $text_lt_default;
        }
      }
    }
  }
  &:focus {
    outline: $primary solid 2px;
    outline-offset: -1px;
  }
  &:focus-visible {
    outline: $primary solid 2px;
    outline-offset: -1px;
  }
  .pb_form_pill_icon {
    height: 12px !important;
    width: 12px !important;
    padding-right: $space_xs;
    + .pb_form_pill_text, + .pb_form_pill_tag {
      padding-left: 0;
    }
  }
  &.small {
    height: 17px;
    padding: 0 $space-xs;
    .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
      font-size: $font_smallest !important;
    }
    .pb_form_pill_text, .pb_form_pill_tag {
      line-height: 1.7;
      padding: 0 $space_xxs;
    }
    .pb_form_pill_close {
      height: 10px;
      border-radius: calc(50%);
    }
    [class^=pb_avatar_kit] .avatar_wrapper {
      flex-basis: 16px;
      height: 16px;
      margin-top: 2px;
      width: 16px;
      &::before { line-height: 16.5px; }
    }
    .pb_form_pill_icon {
      padding-right: $space_xxs;
      + .pb_form_pill_text, + .pb_form_pill_tag {
        padding-left: 0;
      }
    }
  }
  &.dark {
    @each $color_name, $color_value in $form_pill_colors {
      // In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info. 
      // Primary and Neutral are exceptions to the general rule in the handoff 
      &[class*=_#{$color_name}]  {
      //   background-color: mix($color_value, $card_dark, 10%);
        // .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
        //   color: $color_name;
        // }
        // .pb_form_pill_close {
        //   color: $color_name;
        //   &:hover {
        //     background-color: mix($color_value, $card_dark, 40%);
        //   }
        // }
        // &:hover {
        //   background-color: mix($color_value, $card_dark, 20%);
        // }
        // &:active {
        //   background-color: mix($color_value, $card_dark, 30%);
        // }
        @if ($color_name == "neutral") {
          background-color: transparent;
          border: 1px solid $border_dark;
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: $text_dk_default;
          }
          .pb_form_pill_close {
            color: $text_dk_default;
            &:hover {
              background-color: mix($neutral, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($white, $card_dark, 10%);
          }
          &:active {
            background-color: mix($white, $card_dark, 20%);
          }
          &:focus {
            border: 1px solid $primary;
          }
        }
        @if ($color_name == "primary") {
          background-color: mix($active_dark, $card_dark, 10%);
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: $active_dark;
          }
          .pb_form_pill_close {
            color: $active_dark;
            &:hover {
              background-color: mix($active_dark, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($active_dark, $card_dark, 20px);
          }
          &:active {
            background-color: mix($active_dark, $card_dark, 30%);
          }
        }
      }
    }
  }

  &[class*=lowercase] {
    text-transform: lowercase;
  }

  &[class*=none] {
    text-transform: none;
  }
}