select {
  &:active,
  &:focus {
    @include transition(border-color, $transition-duration--fast);
    border: 2px solid $color-brand--one;
    outline: none;
    padding-left: 18px;
  }

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

  &.untouched {
    @include color-dark-shade-main;
  }
  // add specificity to overwrite default padding applied to form inputs
  .form-group__input & {
    &,
    &:active,
    &:focus {
      padding-right: 50px;
    }
  }
  //IE fix
  &[disabled] {
    @include color-dark-shade-alternative;
    background: $color--grey-10;
    pointer-events: none;
  }
}

.select-arrow.icon {
  color: $color-brand--one;
  pointer-events: none;
  right: 20px;
  top: $baseline * 2.2;

  select:disabled + & {
    @include color-dark-shade-alternative;
  }
}

// prevent Internet Explorer 10/11 to display double arrows
@include internet-explorer-10-11 {
  .form-group__input select {
    padding-right: 25px;
  }

  .select-arrow {
    display: none;
  }
}