@import "../tokens/colors";
@import "../tokens/spacing";
@import "../tokens/typography";
@import "../tokens/border_radius";
@import "../tokens/shadows";
@import "../tokens/positioning";
@import "../pb_body/body_mixins";
@import "../pb_textarea/textarea_mixin";

@import "./scss_partials/dropdown_animation";

.pb_dropdown {
  .dropdown_wrapper {
    [class*="dropdown_trigger_wrapper"] {
      @include pb_body;
      border: 1px solid $border_light;
      background-color: $white;
      height: 45px;
      @media (hover: hover) {
        &:hover,
        &:active,
        &:focus {
          background-color: $focus_input_light;
          input {
            background-color: $focus_input_light;
          }
        }
      }

      .dropdown_input {
        @include pb_body;
        border: unset;
        padding: 0;
        background-color: $white;
        &:focus-visible {
          outline: none;
        }
      }
      &:focus {
        box-shadow: 0px 0px 0 1px $primary !important;
        outline: unset;
        transition: box-shadow 0.15s ease-in-out;
      }

      &[class*="_select_only"] {
        box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
      }

      &[class*="_focus"] {
        box-shadow: 0px 0px 0 1px $primary !important;
        transition: box-shadow 0.1s ease-in-out;
      }
    }

    .pb_dropdown_container {
      background-color: $white;
      overflow: hidden;
      box-shadow: $shadow_deep;
      border-radius: $border_rad_heavier;
      border: 1px solid $border_light;
      margin-top: $space_xs;
      z-index: $z_1;
      width: 100%;

      [class*="pb_dropdown_option"] {
        padding-left: $space_sm;
        padding-right: $space_sm;
        padding-top: $space_xs;
        padding-bottom: $space_xs;
        cursor: pointer;
        &:hover {
          background-color: $bg_light;
        }

        &[class*="_focused"] {
          background-color: $bg_light;
        }

        &[class*="_list"] {
          border-bottom: 1px solid $border_light;

          &:hover, &:focus {
            .pb_body_kit {
              color: $primary;
            }
          }
        }
        &[class*="selected"] {
          background-color: $primary;
          color: $white;
          [class^="pb_body"],
          [class^="pb_title_kit"], a {
            color: $white !important;
          }
          &:hover {
            background-color: $product_1_background !important;
          }
        }
      }

      .dropdown_option_wrapper {
        width: 100%;
      }
    }

    .close {
      display: none;
      animation-name: fadeOut;
      animation-duration: 150ms;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }

    .open {
      display: block;
      animation-name: fadeIn;
      animation-duration: 150ms;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }

    &.error {
      [class*=pb_body_kit] {
        margin-top: $space_xs / 2;
      }

      [class*="dropdown_trigger_wrapper"] {
        border-color: $error;
        box-shadow: none !important;
      }
    }
  }

  &.separators_hidden {
    .dropdown_wrapper {
      .pb_dropdown_container {

        [class*="pb_dropdown_option"] {
          border: none;
        }
      }
    }
  }

  &.subtle {
    .dropdown_wrapper {
      .pb_dropdown_container {
        
        [class*="pb_dropdown_option"]:first-child {
          margin-top: $space_xs;
        }

        [class*="pb_dropdown_option"]:last-child {
          margin-bottom: $space_xs;
        }

        [class*="pb_dropdown_option"] {
          margin: $space_xs;
          padding: $space_xs;
          border-radius: $border_radius_md;
          border-bottom: none;
          position: relative;
        
          &::after {
            content: "";
            position: absolute;
            left: -$space_xs;
            right: -$space_xs;
            bottom: -4.5px;
            height: 1px;
            background: $border_light;
          }
        }
        
        [class*="pb_dropdown_option"]:last-child::after {
          display: none; 
        }
      }
    }
  
    &.separators_hidden {
      .dropdown_wrapper {
        .pb_dropdown_container {
          [class*="pb_dropdown_option"]:first-child {
            margin-top: $space_xs;
          }
  
          [class*="pb_dropdown_option"]:last-child {
            margin-bottom: $space_xs;
          }

          [class*="pb_dropdown_option"] {
            padding: $space_xxs $space_xs;
            margin: $space_xxs $space_xs;
     
            &::after {
              height: 0px;
            }

            &[class*="selected"] {
              border-bottom: none;
            }
          }
        }
      }
    }
  }

  &.dark {
    .dropdown_wrapper {
      [class*="dropdown_trigger_wrapper"] {
        @include pb_body_light_dark;
        background-color: rgba($white, 0.1) !important;
        background: none;
        border-color: rgba($white, 0.15);
        @media (hover: hover) {
          &:hover,
          &:active,
          &:focus {
            background-color: rgba($white, 0.05) !important;
          }
        }
        [class^="pb_body"] {
          color: $white;
        }
        &[class*="_select_only"] {
          box-shadow: inset 0 -11px 20px rgba($white, 0.05);
        }
        .dropdown_input {
          background-color: unset;
          color: $white;
        }
      }

      &.error {
        [class*="dropdown_trigger_wrapper"] {
          border-color: $error_dark;
        }
      }
    }
    .pb_dropdown_container {
      background-color: $bg_dark !important;
      border-color: rgba($white, 0.15);
      color: $white;
      [class^="pb_body"],
      [class^="pb_title_kit"] {
        color: $white !important;
      }

      [class*="pb_dropdown_option"] {
        &:hover {
          background-color: $hover_dark;
        }

        &[class*="_focused"] {
          background-color: $hover_dark;
        }

        &[class*="_list"] {
          border-color: rgba($white, 0.15);
        }
        &[class*="selected"] {
          background-color: $primary;
        }
      }
    }
  }
}