@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;
@use '../../_global/styles/svg-vars' as *;

select, select.form-control {
  @include form-field;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  //background-image: url("data:image/svg+xml,%3Csvg width='43' height='30' viewBox='0 0 43 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5001 22L6.27283 10.75L22.7273 10.75L14.5001 22Z' fill='#{encode-color($swatch-primary-500)}'/%3E%3C/svg%3E");
  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;
}