// В этом файле должны быть стили для БЭМ-блока field-select, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

.field-select {
  $block-name: &;

  display: block;
  margin-bottom: $typo-margin-vertical;

  &__name {
    @include field-name;
  }

  &__select-wrap {
  }

  // Оформление штатного селекта
  // &__select {
  //   display: inline-block;
  //   vertical-align: middle;
  //   width: 100%;
  //   line-height: $line-height;
  //   padding: $field-padding-vertical $field-padding-horizontal;
  //   padding-right: 35px;
  //   font-size: inherit;
  //   font-family: inherit;
  //   border: 1px solid $border-color;
  //   border-radius: $border-radius;
  //   appearance: none;
  //   background-color: #fff;

  //   &[multiple] {
  //     background-image: none;
  //     min-height: 6.8em;
  //   }

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

  //   &:active,
  //   &:focus {
  //     @include field-focus;
  //   }

  //   &[disabled],
  //   &[readonly] {
  //     cursor: default;
  //     background-color: $gray-lightest;
  //   }
  // }

  &__help-text {
    @include field-help-text;
  }

  &--error {
    color: $color-danger;

    #{$block-name}__name,
    #{$block-name}__select,
    #{$block-name}__help-text {
      color: $color-danger;
    }

    #{$block-name}__select,
    .choices__inner,
    .choices:after {
      border-color: $color-danger;
      background-color: lighten($color-danger, 35%);
    }
  }
}

/** @define choices */
.choices {
  $block-name: &; // #{$block-name}__element

  position: relative;
  @include field-focus;
  border-radius: 4px;
  transition: outline-color $transition-time;

  &:focus {
    outline-color: $color-cyan;

    &:not(.is-disabled) {
      #{$block-name}__inner {
        @include field-focus;
      }
    }
  }

  &:after {
    content: "";
    position: absolute;
    top: 21px;
    right: 19px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid currentColor;
    pointer-events: none;
    transition: transform 0.3s;
  }

  &.is-open {
    &::after {
      transform: rotate(180deg);
    }

    #{$block-name}__inner {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .is-hidden {
    display: none;
  }

  &__inner,
  &__list--dropdown {
    font-size: 12px;
    line-height: 120%;
    letter-spacing: 0.03em;

    @media (min-width: $screen-xxl) {
    }

    @media (min-width: $screen-xl) {
      font-size: 13px;
    }

    @media (min-width: $screen-lg) {
    }
  }

  &__inner {
    border: 1px solid $border-color;
    border-radius: $border-radius;
    padding: 16px 44px 16px 16px;
    background: #f7f8fb;

    cursor: pointer;

    #{$block-name}__item--selectable {
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &__list--dropdown {
    box-sizing: border-box;
    display: none;
    position: absolute;
    z-index: 1;
    top: 100%;
    width: 100%;
    margin-top: -1px;
    border: 1px solid $border-color;
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
    background-color: #fff;
    word-break: break-all;
    overflow: hidden;
    text-align: center;

    #{$block-name}__item {
      padding: 16px 10px;
      cursor: pointer;

      &.is-highlighted {
        background: #f7f8fb;
      }
    }
  }

  &__heading {
    padding: $field-padding-vertical $field-padding-horizontal;
    font-size: $font-size-sm;
    font-weight: 700;
    opacity: 0.5;
    cursor: default;
  }

  &.is-open {
    #{$block-name}__list--dropdown {
      display: block;
    }
  }

  &.is-disabled {
    #{$block-name}__inner {
      background-color: $gray-lighter;
      cursor: default;
    }
  }
}
