@mixin sassy-select {
  position: relative;
  color: inherit;

  &::after {
    content: '\25BE';
    position: absolute;
    top: rem(10);
    right: rem(15);
    color: $sassy-base-color;
    pointer-events: none;
  }

  /* Target IE9 and IE10 */
  select::-ms-expand{
    display: none;
  }

  select {
    @include appearance-none;

    height: rem(39);
    width: 100%;
    padding-left: rem(10);
    margin-bottom: rem(10);
    font-family: inherit;
    font-size: rem(14);

    border: rem(1) solid lighten($sassy-base-color, 10%);
    border-radius: rem(3);
    outline: none;

    background-color: white;

    &:focus {
      border-color: $sassy-accent-color;
    }

    &:disabled {
      background-color: $sassy-disabled-color;
      cursor: not-allowed;
    }
  }
}

@mixin sassy-select-multiple {
  @include appearance-none;

  width: 100%;
  padding: 0 rem(10);
  margin-bottom: rem(10);
  font-family: inherit;
  font-size: rem(14);

  border: rem(1) solid lighten($sassy-base-color, 10%);
  border-radius: rem(3);
  outline: none;

  background-color: white;

  &:focus {
    border-color: $sassy-accent-color;
  }

  &:disabled {
    background-color: $sassy-disabled-color;
    cursor: not-allowed;
  }
}