@import 'style/theming';

.select {
  padding: .35rem .6rem;
  min-width: 5rem;
  // padding: .5rem 3.5rem .5rem 1rem;
  background: white;

  border-radius: 4px;
  line-height: 1.5rem;

  -webkit-appearance: none;
  -moz-appearance: none;

  background-position:
    calc(100% - (2.5rem/2)) 50%,
    calc(100% - (2.5rem/2) + 5px) 50%,
    100% 0;

  background-size:
    5px 5px,
    5px 5px,
    2.5rem 100%;

  background-repeat: no-repeat;

  @include themed() {
    border: 1px solid t(border-color);
    
    background-image:
      linear-gradient(45deg, transparent 50%, #fff 50%),
      linear-gradient(135deg, #fff 50%, transparent 50%),
      linear-gradient(to right, #000, #000);
  }

  &:focus {
    outline: none;
  }
}