// Custom select
//
// Apply `.select` to any `<select>` element for custom styles.
.form-select,
select {
  appearance: none;
  background-color: @white;
  background-image: data-uri('image/svg+xml;charset=UTF-8', @icon--caret-down),
                    data-uri('image/svg+xml;charset=UTF-8', @image--1px-bfbfbf);
  background-position: right @default--space center, right (@default--space * 3) center;
  background-repeat: no-repeat, repeat-y;
  background-size: @default--space, 1px;
  display: inline-block;
  height: @default--space * 3;
  max-width: 100%;
  padding-left: @default--space;
  padding-right: @default--space * 4;

  &:disabled {
    background-image: data-uri('image/svg+xml;charset=UTF-8', @icon--caret-down),
                      data-uri('image/svg+xml;charset=UTF-8', @image--1px-ededed);
    color: @gray-3;
  }

  // Hides the default caret in IE11
  &::-ms-expand {
    opacity: 0;
  }

  &[multiple] {
    background-image: none;
    height: auto;
    overflow-x: auto;
    padding: 0;

    option {
      padding: (@default--space / 2) @default--space;
    }
  }
}

.select-sm {
  font-size: @font-size-small;
  height: @default--space * 2;
  min-height: @default--space * 2;
  padding-bottom: @default--space / 2;
  padding-top: @default--space / 2;

  &[multiple] {
    height: auto;
    min-height: 0;
  }
}
