/* Select
   ========================================================================== */
.select {
  position: relative;
  outline: none;
  &__inner {
    @include form-control;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    min-height: $form-control-height;
    padding-top: form-control-padding-y() - 5px;
    .open & {
      @include form-control--active();
      border-radius: $form-control-border-radius $form-control-border-radius 0 0;
    }
    .open.flipped & {
      border-radius: 0 0 $form-control-border-radius $form-control-border-radius;
    }
    .disabled & {
      @include form-control--disabled;
    }
  }
  &__values {
    padding: 0;
    list-style: none;
    display: inline-flex;
    flex-wrap: wrap;
    .single & {
      margin: 5px 2.5px 0;
      width: 100%;
    }
    .multiple & {
      margin-top: 0;
      margin-left: 0;
      margin-right: 0;
    }
  }
  &__value {
    display: flex;
    align-items: center;
    height: $form-control-line-height;
    line-height: $form-control-line-height;
    .single & {
      width: 100%;
      display: flex;
    }
    .multiple & {
      border-radius: $form-control-line-height;
      font-size: 0.9em;
      padding: 0 4px 0 8px;
      margin: 5px 2.5px 0;
      background-color: theme-color(primary);
      border: 1px solid darken(theme-color(primary), 5%);
      color: color-yiq(theme-color(primary));
      word-break: break-all;
      &.highlighted {
        background-color: darken(theme-color(primary), 5%);
        border: 1px solid darken(theme-color(primary), 10%);
      }
    }
  }
  &__remove {
    background: transparent;
    border: 0;
    appearance: none;
    cursor: pointer;
    text-indent: -9999px;
    padding: 0;
    width: $form-control-line-height;
    height: $form-control-line-height;
    color: inherit;
    position: relative;
    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      text-indent: 0;
      content: "\00D7";
    }
    &:focus {
      outline: none;
    }
    .single & {
      margin-left: auto;
    }
    .multiple & {
      border-left: 1px solid darken(theme-color(primary), 5%);
      margin-left: 8px;
    }
    .disabled & {
      cursor: not-allowed;
      user-select: none;
      opacity: 0.65;
    }
  }
  &__input {
    flex-grow: 1;
    display: block;
    border: 0;
    max-width: 100%;
    margin: 5px 2.5px 0;
    padding: 0;
    line-height: $form-control-line-height;
    &:focus {
      outline: 0;
    }
    .disabled & {
      @include form-control--disabled;
    }
  }
  &__dropdown {
    @include dropdown__menu;
    border: $form-control-border-width solid form-control-active-border-color();
    padding: 0;
    width: 100%;
    margin-top: -$form-control-border-width;
    .flipped & {
      @include dropdown__menu--flipped;
      margin-top: 0;
      margin-bottom: -$form-control-border-width;
    }
    .open & {
      @include dropdown__menu--open;
    }
    .select__input {
      @include form-control;
      margin: 0;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-radius: 0;
      &--hide {
        display: none;
      }
    }
  }
  &__choices {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    max-height: 280px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
  }
  &__choice {
    @include dropdown__link;
    cursor: default;
    display: block;
    &.selectable {
      cursor: pointer;
      display: flex;
      &:hover,
      &:focus {
        @include dropdown__link--active;
      }
      @include media-breakpoint-up(md) {
        position: relative;
        padding-right: 100px;
        &::after {
          content: attr(data-select-text);
          font-size: 0.9em;
          opacity: 0;
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          transition: all 0.4s;
        }
      }
      &.highlighted {
        @include dropdown__link--active;
        &::after {
          opacity: 0.65;
        }
      }
      &--heading {
        @include dropdown__heading;
      }
    }
    .disabled &,
    &.disabled {
      cursor: not-allowed;
      user-select: none;
      opacity: 0.65;
    }
  }
}