/// Добавляет к select кастомный шеврон и задает фон пунктам 
/// @group Forms.Control
///
/// @example scss - Миксин стилизует select в сочетании с миксином form-control
///   .form-select {
///     @include form-control-medium($height: true);
///     @include form-select;
///   }
///

@mixin form-select {
  min-width: 125px;
  text-overflow: ellipsis;
  white-space: nowrap;

  // Кастомный шеврон
  @supports (-webkit-appearance: none) or (appearance: none) {
      padding-right: $spacer-5;
      background: $form-control-background calc(100% - #{$size-2}) calc(50% + 1px) url("data:image/svg+xml,%0A%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3.85714L2.14286 0C0.857143 0 0.857143 1.28571 0.857143 1.28571L6 6.42857L11.1429 1.28571C11.1429 1.28571 11.1429 0 9.85714 0L6 3.85714Z' fill='black'/%3E%3C/svg%3E%0A") no-repeat !important;
      appearance: none;
      -webkit-appearance: none;

      &:disabled {
        opacity: 1;
        background: $form-control-background-disabled calc(100% - #{$size-2}) calc(50% + 1px) url("data:image/svg+xml,%0A%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3.85714L2.14286 0C0.857143 0 0.857143 1.28571 0.857143 1.28571L6 6.42857L11.1429 1.28571C11.1429 1.28571 11.1429 0 9.85714 0L6 3.85714Z' fill='rgba(0, 0, 0, 0.32)'/%3E%3C/svg%3E%0A") no-repeat !important;
        color: rgba(0, 0, 0, 0.32);
      }
  }

  option,
  optgroup {
      background-color: $form-control-background;
  }
}