@import "../pb_body/body_mixins";
@import "../pb_textarea/textarea_mixin";
@import "../tokens/titles";
@import "../tokens/colors";
@import "../tokens/spacing";

[class^=pb_select] {
  select {
    @include pb_textarea_light;
    @include pb_body_light;
    background: none;
    background-color: $white;
    appearance: none;
    cursor: pointer;
    box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
    padding-right: $space_xl;
    color: transparent !important;
    text-shadow: 0 0 0 $text_lt_default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 45px;
    @media (hover:hover) {
      &:hover, &:active, &:focus {
        background-color: $focus_input_light;
      }
    }
    &:focus{
      border-color: $primary;
      @include transition_default;
    }
    &:disabled ~ .pb_select_kit_caret {
      opacity: 0.5;
    }
  }
  select[multiple] {
    @include pb_textarea_light;
    @include pb_body_light;
    background: none;
    background-color: $white;
    appearance: none;
    cursor: pointer;
    box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
    padding-right: 0px !important;
    color: transparent !important;
    text-shadow: 0 0 0 $text_lt_default;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: $space_xs 0px !important;
    max-height: unset !important;
    @media (hover:hover) {
      &:hover, &:active, &:focus {
        background-color: rgba($focus_input_light, $opacity_5);
      }
    }
    &:focus{
      border-color: $primary;
      @include transition_default;
    }
    option {
      padding-left: $space_sm;
      padding-top: $space_xxs;
      padding-bottom: $space_xxs;
    }
    option:checked {
      background-color: $hover_light;
    }
    option:hover {
      background-color: $hover_light;
    }
  }
  option {
    color: $text_lt_default;
  }
  .pb_select_kit_label {
    margin-bottom: $space_xs;
    display: block;
  }
  .pb_select_kit_wrapper {
    position: relative;
    display: block;
    &.error {
      [class*=pb_body_kit] {
        margin-top: calc($space_xs / 2);
      }
      > select:first-child {
        border-color: $error;
      }
      .pb_select_kit_caret {
        top: 25px;
      }
    }
  }
  .pb_select_kit_caret {
    position: absolute;
    right: $space_sm;
    top: 50%;
    display: block;
    color: $text_lt_default;
    font-size: ($font_large + 3);
    transform: translateY(-50%);
    pointer-events: none;
  }
  &.inline {
    svg {
      right: 6px;
    }
    @mixin active_arrow_style {
      svg {
        color: $primary !important;
        font-size: 16px;
      }
    }
    &:not(:hover) {
      svg {
        display: none;
      }
    }
    &.show_arrow:not(:hover) {
      svg {
        display: block;
      }
      @include active_arrow_style();
    }
    &:hover {
      @include active_arrow_style();
      select {
        color: $primary !important;
        background: rgba(0,130,255,0.1);
      }
    }
    select {
      box-shadow: none;
      border-color: transparent;
      padding: 4px 8px;
      padding-right: $space_lg; 
      border-radius: 4px;
      option {
        background-color: $white;
      }
    }
    &.compact {
      select {
        font-size: 12px;
      }
    }
  }
}

[class^=pb_select].dark {
  select {
    @include pb_textarea_dark;
    @include pb_body_light_dark;
    background: none;
    background-color: rgba($white,.10);
    box-shadow: inset 0 -11px 20px rgba($white, 0.05);
    text-shadow: 0 0 0 $text_dk_default;
    padding-right: $space_xl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    @media (hover:hover) {
      &:hover, &:active, &:focus {
        background-color: rgba($white,.05);
      }
    }
  }
  select[multiple] {
    @include pb_textarea_dark;
    @include pb_body_light_dark;
    background: none;
    background-color: rgba($white,.10);
    appearance: none;
    cursor: pointer;
    box-shadow: inset 0 -11px 20px rgba($white, 0.05);
    padding-right: 0px !important;
    color: transparent !important;
    text-shadow: 0 0 0 $text_dk_default;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: $space_xs 0px !important;
    max-height: unset !important;
    @media (hover:hover) {
      &:hover, &:active, &:focus {
        background-color: rgba($white,.05);
      }
    }
    &:focus{
      border-color: $primary;
      @include transition_default;
    }
    option {
      padding-left: $space_sm;
      padding-top: $space_xxs;
      padding-bottom: $space_xxs;
    }
    option:checked {
      background-color: $hover_dark;
    }
    option:hover {
      background-color: $hover_dark;
    }
  }
  option {
    color: $text_dk_default;
  }
  .pb_select_kit_caret {
    color: $white;
  }
  .pb_select_kit_wrapper {
    &.error {
      .pb_select_kit_wrapper {
        > select:first-child {
          border-color: $error_dark;
        }
      }
    }
  }
  &.inline {
    svg {
      right: 6px;
    }
    &:not(:hover) {
      svg {
        display: none;
      }
    }
    &:hover {
      select {
        color: $white !important;
        background: rgba(0,130,255,0.1);
      }
      svg {
        color: $primary !important;
        font-size: 16px;
      }
    }
    select {
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      padding: 4px 8px;
      padding-right: $space_lg; 
      border-radius: 4px;
      option {
        background-color: $white;
      }
    }
    &.compact {
      select {
        font-size: 12px;
      }
    }
  }
}