// Select list
//
// The `<select>` element represents a form field for selecting amongst a set of
// options.
//
// ### Styling
// The border should light up simply and clearly indicating the user is selecting this form item.
//
// ### Requirements
// You should have put a `<div>` with the class `.select-wrapper` around the
// `<select>` element for cross-browser styling
//
// markup: form-select.twig
//
// Weight: 3
//
// Style guide: atoms.form-controls.select

// Browsers do not recognize pseudo :after selectors, we must create a wrapper
// around the select element to style it properly.

.select-wrapper {
  position: relative;
  width: 100%;
  max-width: $form-control-max-width;

  select {
    line-height: 1;
    padding-right: 30px;
  }

  select:disabled {
    color: $input-disabled-color;
  }

  &:after {
    content: '▾';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin-top: -.5em;
    padding-right: 12px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 2;
  }

}

.form-inline {
  .select-wrapper {
    width: auto;
  }
}

.input-group {
  .select-wrapper {
    display: table-cell;
  }
}

// Reset custom styles of the arrow for the select widget on the IE11.
@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, .select-wrapper:after { display: none }
  *::-ms-backdrop, .select-wrapper select { padding-right: 12px }
}

.form-disabled .select-wrapper::after {
  color: $btn-link-disabled-color;
}
