select:not(.default) {
  @extend %form-element;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 15em;
  max-width: 100%;
  padding-inline-end: 2.5em;
  background-image: var(--#{$CSS_VAR_PFX}select-icon);
  background-repeat: no-repeat;
  background-position: inline-end 0.64em center;

  &[multiple] {
    // hide default scroll when there is no overflow
    overflow-y: auto;
    padding: 1em !important;
    background-image: none !important;
  }
}

select option {
  padding: 0.32em;
  color: var(--#{$CSS_VAR_PFX}form-element-txt-color);
  background: var(--#{$CSS_VAR_PFX}form-element-bg-color);
}