@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";

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.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;
        border-radius: $border_rad_heavier;
        padding: 0;
        background-color: $white;
        &:focus-visible {
          outline: none;
        }
      }
      &:focus {
        box-shadow: 0px 0px 0 1px $primary;
        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;
        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%;

      .pb_dropdown_option {
        cursor: pointer;
        &:hover {
          background-color: $border_light;
        }
      }

      .dropdown_option_focused {
        background-color: $border_light;
      }

      .dropdown_option {
        width: 100%;
      }

      .dropdown_option_list {
        border-bottom: 1px solid $border_light;
      }
      .dropdown_option_selected {
        background-color: $primary;
        [class^="pb_body"],
        [class^="pb_title_kit"] {
          color: $white !important;
        }
        &:hover {
          background-color: $primary !important;
        }
      }
    }
    .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;
    }
  }

  &.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) !important;
        }

        .dropdown_input {
          background-color: unset;
          color: $white;
        }
      }
    }
    .pb_dropdown_container {
      background-color: $bg_dark !important;
      border-color: rgba($white, 0.15);
      color: $white;
      .dropdown_option_list {
        border-color: rgba($white, 0.15);
      }
      [class^="pb_body"],
      [class^="pb_title_kit"] {
        color: $white !important;
      }

      .pb_dropdown_option {
        &:hover {
          background-color: $hover_dark;
        }
      }
      .dropdown_option_focused {
        background-color: $hover_dark;
      }
      .dropdown_option_selected {
        background-color: $primary;
      }
    }
  }
}