@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/typography';

#{$object-prefix}select {
  @include typography.body-medium;
  padding-left: 1rem;
  padding-right: 3rem;
  line-height: 3rem;
  height: 3rem;
  line-height: 3rem;
  border: 1px solid $sodra-black-25;
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: $light-grey;
  background-image: url(../images/select.svg);
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right 1rem top 50%;
  /* icon size, then gradient */
  background-size: 10px 12px;
  color: $sodra-black-80;

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

  &--light-grey {
    background-color: $light-grey !important;
  }

  &--white {
    background-color: $white !important;
  }

  &--small {
    line-height: 2rem;
    height: 2rem;
  }

  &:focus {
    outline: 1px auto $sodra-black;
  }
}