////////////////////////////////////////////////////////////////////////
// Select

@mixin selectMedium() {

  @include fsa-shared-form-properties();

  background-size: ($size-medium + .2rem);
  background-image: url('#{$image-path}/material-design-icons/ic_expand_more_24px.svg');
  background-position: right ($size-small - .2rem) center;
  background-repeat: no-repeat;

  // scss-lint:disable TrailingSemicolon SpaceAfterPropertyColon
  padding:
    ($form-padding - .2rem) // to achieve vertical alignment
    ($form-padding * 4) // to prevent text beneath arrow
    ($form-padding - .1rem) // to achieve vertical alignment
    ($form-padding)
  ;

  text-overflow: ellipsis;

  @supports (-webkit-appearance: none) {
    /* Webkit only */
    // yep, a SINGLE pixel bugged me enough to do this
    padding-top: $form-padding - .1rem;
  }

  @supports (-moz-appearance: none) {
    padding-top: $form-padding - .2rem;
  }

  // IE 10 +
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    // IE doesn't like the extra padding on right.
    // padding-right: $form-padding / 2;

    // IE 10+ doesn't like the SVG for select arrows
    background-image: url('#{$image-path}/arrow-down.png');

    // Equivalent of select { appearance: none; }
    &::-ms-expand {
      display: none;
    }

  }

}

@mixin selectSmall() {

  height: $button-height--sm;
  padding-top: $size-base;
  // padding-bottom: $size-small + .1rem;
  font-size: $form-text-size--sm; // no we're not using mixin cuz we don't want its line-height

  @supports (-webkit-appearance: none) {
    padding-top: $form-padding - .2rem;
  }

  @supports (-moz-appearance: none) {
    padding-top: $form-padding - .5rem;
  }

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    padding-top: $form-padding - .1rem;
  }

}

@mixin selectLarge() {
  padding-left: $form-padding + $size-base;
  height: $button-height--lg;
  font-size: $form-text-size--lg; // no we're not using mixin cuz we don't want its line-height
}

@mixin selectBlock() {
  display: block;
  width: 100%;
}

@mixin selectInline() {
  display: revert;
  width: revert;
}

@mixin selectFlat() {
  border-width: 0;
  background-color: transparent;
}

.fsa-select {

  // --------------------------------------------------------------------------
  // Variants

  &          { @include selectMedium(); }
  &--small   { @include selectSmall();  }
  &--medium  { @include selectMedium(); }
  &--large   { @include selectLarge();  }
  &--fill,
  &--block   { @include selectBlock();  }
  &--inline  { @include selectInline();  }
  &--flat,
  &--clear   { @include selectFlat(); }

  @include breakpoint(S) {
    &--small\@s  { @include selectSmall();  }
    &--medium\@s { @include selectMedium(); }
    &--large\@s  { @include selectLarge();  }
    &--fill\@s,
    &--block\@s  { @include selectBlock();  }
    &--inline\@s { @include selectInline(); }
    &--flat\@s,
    &--clear\@s   { @include selectFlat();   }
  }

  @include breakpoint(M) {
    &--small\@m  { @include selectSmall(); }
    &--medium\@m { @include selectMedium(); }
    &--large\@m  { @include selectLarge(); }
    &--fill\@m,
    &--block\@m  { @include selectBlock(); }
    &--inline\@m { @include selectInline(); }
    &--flat\@m,
    &--clear\@m   { @include selectFlat();   }
  }

  @include breakpoint(L) {
    &--small\@l  { @include selectSmall(); }
    &--medium\@l { @include selectMedium(); }
    &--large\@l  { @include selectLarge(); }
    &--fill\@l,
    &--block\@l  { @include selectBlock(); }
    &--inline\@l { @include selectInline(); }
    &--flat\@l,
    &--clear\@l   { @include selectFlat();   }
  }

  @include breakpoint(XL) {
    &--small\@xl  { @include selectSmall(); }
    &--medium\@xl { @include selectMedium(); }
    &--large\@xl  { @include selectLarge(); }
    &--fill\@xl,
    &--block\@xl  { @include selectBlock(); }
    &--inline\@xl { @include selectInline(); }
    &--flat\@xl,
    &--clear\@xl  { @include selectFlat();   }
  }

  // --------------------------------------------------------------------------
  // States

  &:focus {
    border-color: $form-focus-color;
    box-shadow: 0 0 0 1px $form-focus-color inset;
  }

  &--error {

    border-color: $form-error-color;
    box-shadow: 0 0 0 1px $form-error-color inset;
    background-color: $form-error-color-bg;

    @include placeholder {
      color: shade($form-placeholder-color, 20%);
    }

    &:focus {
      box-shadow: 0 0 0 .2rem $form-error-color-focus inset;
      border-color: transparent;
    }

  }

  &--positive {

    border-color: $form-positive-color;
    box-shadow: 0 0 0 1px $form-positive-color inset;
    background-color: $form-positive-color-bg;

  }

  &[multiple] {

    // we actually don't want this to be used, but this style supports
    // it just in case. designers and developers should be
    // encouraged to use alternate solution, e.g. multiple checkboxes ala .fsa-select-multi
    height: auto;
    background-image: none;
    padding: 0;

    option {
      padding: math.div($form-padding, 2) $form-padding;
      &:hover {
        cursor: pointer;
        background-color: $color-fsa-tertiary-100;
      }
    }

  }

  // --------------------------------------------------------------------------
  // etc

  &__other {
    margin-top: $size-base;
  }

}