@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

select, select.form-control {
  @include form-field;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('../../assets/img/dropdown-arrow.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 36px;
  padding-right: 42px;

  @media(max-width: 1199px) {
    background-size: 30px;
    padding-right: 34px;
  }
}

select::-ms-expand {
  display: none;
}

select[multiple] {
  background-image: none;
}

select option {
  font: inherit;
}