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

[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;
    }
  }
  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: $space_xs / 2;
      }
      > select:first-child {
        border-color: $error;
      }
      .pb_select_kit_caret {
        top: 35%;
      }
    }
  }
  .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 {
    &:not(:hover) {
      svg {
        display: none;
      }
    }
    &:hover {
      select {
        color: $primary !important;
        background: rgba(0,130,255,0.1);
      }
      svg {
        color: $primary !important;
        font-size: 16px;
      }
    }
    select {
      box-shadow: none;
      border-color: transparent;
      padding: 4px 8px;
      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);
      }
    }
  }
  .pb_select_kit_caret {
    color: $white;
  }
  .pb_select_kit_wrapper {
    &.error {
      .pb_select_kit_wrapper {
        > select:first-child {
          border-color: $error_dark;
        }
      }
    }
  }
  &.inline {
    &: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;
      border-radius: 4px;
      option {
        background-color: $white;
      }
    }
    &.compact {
      select {
        font-size: 12px;
      }
    }
  }
}