@use "sass:math";

@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: map-merge($status_color_text, map-merge($data_colors, $product_colors));


[class^=pb_form_pill_kit] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 math.div($space-md, 2);
  height: $pb_form_pill_height;
  border-radius: math.div($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;
        }
      }
      @if ($color_name == "warning") {
        background-color: mix($yellow, $card_light, 10%);
        .pb_form_pill_icon {
          color: $yellow;
        }
      }
      @if ($color_name == "accessories") {
        background-color: mix($product_8_background, $card_light, 10%);
        .pb_form_pill_icon {
          color: $product_8_background;
        }
      }
      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;
          }
          @if ($color_name == "warning") {
            background-color: mix($yellow, $card_light, 20%);
          }
          @if ($color_name == "accessories") {
            background-color: mix($product_8_background, $card_light, 20%);
          }
        }
        &:active {
          background-color: mix($color_value, $card_light, 30%);
          @if ($color_name == "neutral") {
            background-color: mix($neutral, $card_light, 30%);
          }
          @if ($color_name == "warning") {
            background-color: mix($yellow, $card_light, 30%);
          }
          @if ($color_name == "accessories") {
            background-color: mix($product_8_background, $card_light, 30%);
          }
        }
      }
      #{$selector}_text {
        color: $color_value;
        @if ($color_name == "neutral") {
          color: $text_lt_default;
        }
        @if ($color_name == "warning") {
          color: $yellow;
        }
        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%);
          }
        }
        @if ($color_name == "warning") {
          color: $yellow;
        }
        &:hover {
          background-color: mix($color_value, $card_light, 40%);
          @if ($color_name == "warning") {
            background-color: mix($yellow, $card_light, 40%);
          }
        }
        @if ($color_name == "accessories") {
          color: $product_8_background;
        }
        &:hover {
          @if ($color_name == "accessories") {
            background-color: mix($product_8_background, $card_light, 40%);
          }
        }
      }
      #{$selector}_tag {
        color: $color_value;
        padding: 0 $space-xs;
        @if ($color_name == "neutral") {
          color: $text_lt_default;
        }
        @if ($color_name == "warning") {
          color: $yellow;
        }
      }
    }
  }
  &: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,
    + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
    + div .pb_form_pill_text, + div .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,
      + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
      + div .pb_form_pill_text, + div .pb_form_pill_tag {
        padding-left: 0;
      }
    }
  }
  &.dark {
    @each $color_name, $color_value in $form_pill_colors {
      &[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, 20%);
          }
          &:active {
            background-color: mix($active_dark, $card_dark, 30%);
          }
        }
        @if ($color_name == "data_1") {
          background-color: mix($active_dark, $card_dark, 10%);
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: mix($active_dark, $card_light, 90%);
          }
          .pb_form_pill_close {
            color: mix($active_dark, $card_light, 90%);
            &:hover {
              background-color: mix($active_dark, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($active_dark, $card_dark, 20%);
          }
          &:active {
            background-color: mix($data_1, $card_dark, 30%);
          }
        }
        @if ($color_name == "data_6") {
          background-color: mix($data_6, $card_dark, 10%);
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: $text_dk_light;
          }
          .pb_form_pill_close {
            color: $text_dk_light;
            &:hover {
              background-color: mix($text_dk_light, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($data_6, $card_dark, 20%);
          }
          &:active {
            background-color: mix($data_6, $card_dark, 30%);
          }
        }
        @if ($color_name == "windows") {
          background-color: mix($product_1_highlight, $card_dark, 10%);
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: $product_1_highlight;
          }
          .pb_form_pill_close {
            color: $product_1_highlight;
            &:hover {
              background-color: mix($product_1_highlight, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($product_1_highlight, $card_dark, 20%);
          }
          &:active {
            background-color: mix($product_1_highlight, $card_dark, 30%);
          }
        }
        @if ($color_name == "siding") {
          background-color: mix($product_2_highlight, $card_dark, 10%);
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: $product_2_highlight;
          }
          .pb_form_pill_close {
            color: $product_2_highlight;
            &:hover {
              background-color: mix($product_2_highlight, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($product_2_highlight, $card_dark, 20%);
          }
          &:active {
            background-color: mix($product_2_highlight, $card_dark, 30%);
          }
        }
        @if ($color_name == "roofing") {
          background-color: mix($product_5_highlight, $card_dark, 10%);
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: $product_5_highlight;
          }
          .pb_form_pill_close {
            color: $product_5_highlight;
            &:hover {
              background-color: mix($product_5_highlight, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($product_5_highlight, $card_dark, 20%);
          }
          &:active {
            background-color: mix($product_5_highlight, $card_dark, 30%);
          }
        }
        @if ($color_name == "doors") {
          background-color: mix($product_3_highlight, $card_dark, 10%);
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: $product_3_highlight;
          }
          .pb_form_pill_close {
            color: $product_3_highlight;
            &:hover {
              background-color: mix($product_3_highlight, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($product_3_highlight, $card_dark, 20%);
          }
          &:active {
            background-color: mix($product_3_highlight, $card_dark, 30%);
          }
        }
        @if ($color_name == "gutters") {
          background-color: mix($product_6_highlight, $card_dark, 10%);
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: $product_6_highlight;
          }
          .pb_form_pill_close {
            color: $product_6_highlight;
            &:hover {
              background-color: mix($product_6_highlight, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($product_6_highlight, $card_dark, 20%);
          }
          &:active {
            background-color: mix($product_6_highlight, $card_dark, 30%);
          }
        }
        @if ($color_name == "solar") {
          background-color: mix($product_4_highlight, $card_dark, 10%);
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: $product_4_highlight;
          }
          .pb_form_pill_close {
            color: $product_4_highlight;
            &:hover {
              background-color: mix($product_4_highlight, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($product_4_highlight, $card_dark, 20%);
          }
          &:active {
            background-color: mix($product_4_highlight, $card_dark, 30%);
          }
        }
        @if ($color_name == "insulation") {
          background-color: mix($product_7_highlight, $card_dark, 10%);
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: $product_7_highlight;
          }
          .pb_form_pill_close {
            color: $product_7_highlight;
            &:hover {
              background-color: mix($product_7_highlight, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($product_7_highlight, $card_dark, 20%);
          }
          &:active {
            background-color: mix($product_7_highlight, $card_dark, 30%);
          }
        }
        @if ($color_name == "accessories") {
          background-color: mix($product_8_highlight, $card_dark, 10%);
          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
            color: $text_dk_light;
          }
          .pb_form_pill_close {
            color: $text_dk_light;
            &:hover {
              background-color: mix($product_8_highlight, $card_dark, 40%);
            }
          }
          &:hover {
            background-color: mix($product_8_highlight, $card_dark, 20%);
          }
          &:active {
            background-color: mix($product_8_highlight, $card_dark, 30%);
          }
        }
      }
    }
  }

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

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