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

[class^=pb_select] {
  margin-bottom: $space_sm;
  select {
    @include pb_textarea_light;
    @include pb_title_4;
    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;
    @media (hover:hover) {
      &:hover, &:active, &:focus {
        background-color: $focus_input_light;
      }
    }
    &: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;
  }
  &.dark {
    select {
      @include pb_textarea_dark;
      @include pb_title_4;
      @include pb_title_dark;
      background: $focus_input_dark;
      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: tint($focus_input_dark, 5%);
        }
      }
    }
    .pb_select_kit_caret {
      color: $white;
    }
    .pb_select_kit_wrapper {
      &.error {
        .pb_select_kit_wrapper {
          > select:first-child {
            border-color: $error_dark;
          }
        }
      }
    }
  }
}