// @page Pattern Library/Forms
// @name Selects
//
// @description
//   Select boxes allow users to choose and option or options from a list of options.
//
//   #### Best practices
//   * Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.
//   * It can be tempting to put many things in a select box for users to choose from. Try to keep the list of options to between 4 and 15 so the user doesn't become overwhelmed with choices.
//
// @state .us-form-select--multiple - Removes the drop down arrow and adjusts the padding of <option> elements. Useful when using <select> elements that have the size="" attribute set to anything higher than 1.
// @state .us-form-select--blocked - Fluid style
// @state .us-form-select--error - Visual feedback for when the input has an error
// @state .us-form-select--success - Visual feedback for when success needs to be communicated to the user
// @state .us-form-select--disabled - Inactive state for select boxes. You may also just add the disabled attribute to the <select> element in order to achieve the same effect.
//
// @markup
//   <select class="us-form-select {$modifiers}">
//     <option>A select menu</option>
//     <option>With lots of options</option>
//     <option>And a few more</option>
//   </select>

$select-base-padding: 5px 10px !default;
$select-default-color: $c-form-element-border !default;
$select-hover-color: $c-form-element-border-hover !default;

@function select-arrow($color) {
  @return url("data:image/svg+xml;charset=utf-8;base64," + base64encode("<svg version='1.1' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='40px' height='6px' viewBox='0 0 40 6'><polygon fill='#{$color}' points='25.3,0 20.3,6 15.3,0 '/></svg>"));
}

@mixin select-background($color, $color--active: false) {
  background-image: select-arrow($color);

  &:hover,
  &:focus {
    background-image: select-arrow(if($color--active, $color--active, $color));
  }
}

// [deprecated]
.us-form-select-wrap {
  position: relative;
  display: inline-block;
}

.us-form-select {
  @extend %base-form-element;
  @include select-background($select-default-color, $select-hover-color);
  max-width: 100%;
  padding: $select-base-padding;
  padding-right: 40px;
  cursor: pointer;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  outline: 0;

  // [nodoc] Fix for FF < 35 https://gist.github.com/joaocunha/6273016/
  @-moz-document url-prefix() {
    text-indent: .01px;
    text-overflow: "";
  }

  &:focus {
    &:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 $c-form-element-text;
    }
  }

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

  .ie8 &,
  .ie9 & {
    padding: $select-base-padding;
  }
}

.us-form-select-wrap--multiple, // [deprecated]
.us-form-select--multiple,
.us-form-select[multiple] {
  &,
  .us-form-select {
    height: auto;
    padding: $select-base-padding;
    overflow: auto;
    vertical-align: middle;
    cursor: default;
    background-image: none;
  }

  &:hover,
  &:focus {
    background-image: none;
  }

  option {
    padding: .3em 5px;
    cursor: pointer;
  }
}

.us-form-select-wrap--blocked, // [deprecated]
.us-form-select--blocked {
  width: 100%;
}

.us-form-select-wrap--disabled, // [deprecated]
.us-form-select--disabled,
.us-form-select:disabled {
  &,
  .us-form-select {
    @include form-element-disabled;
    @include select-background($c-form-element-disabled-fg);
  }
}

.us-form-select--error {
  @extend %base-form-element--error;
}

.us-form-select--success {
  @extend %base-form-element--success;
}