/**
 * Select
 * --------------------------------------------------
 */

.item-select {
  position: relative;

  select {
    @include appearance(none);
    position: absolute;
    top: 0;
    right: 0;
    padding: ($item-padding - 2) ($item-padding * 3) ($item-padding) $item-padding;
    max-width: 65%;

    border: none;
    background: transparent;
    color: #333;

    // hack to hide default dropdown arrow in FF
    text-indent: .01px;
    text-overflow: '';

    white-space: nowrap;
    font-size: $font-size-base;

    cursor: pointer;
    direction: rtl; // right align the select text
  }

  option {
    direction: ltr;
  }

  &:after {
    position: absolute;
    top: 50%;
    right: $item-padding;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-top: 5px solid;
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid rgba(0, 0, 0, 0);
    color: #999;
    content: "";
    pointer-events: none;
  }
}

select {
  &[multiple],
  &[size] {
    height: auto;
  }
}