.#{$select-prefix-cls} {
  $root: #{&};
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  outline: none;
  overflow: hidden;

  i[data-ani-icon]{
    transition: all $transition-time;
    transform: rotate(0deg);
  }

  &--sm {
    #{$root}__selection {
      .tag {
        height: 18px;
        line-height: 18px;
        display: block;
      }

      #{$root}__placeholder,
      #{$root}__selected-value,
      #{$root}__selection-icon {
        line-height: 22px;
      }
    }
  }

  &__selection{
    @extend .#{$input-prefix-cls};
    position: relative;
    display: block;
    padding: 0 !important;
    cursor: pointer;
    
    .tag {
      margin: 2px;
      color: #0b82ff;
      background-color: rgba(11, 130, 255, 0.1);

      .tag__title {
        max-width: 100%;
        text-overflow: ellipsis;
        word-break: break-all;
        overflow: hidden;
      }
    }

    .tag:not(.select-length) {
      flex: none;
      max-width: 100%;
      position: relative;
      padding-right: 30px;

      .aid-close {
        position: absolute;
        right: 8px;
        top: 0px;
      }
    }

    .not-tag {
      .tag {
        display: inline-block;
      }
    }

    .select-collapse-tags {
      display: flex;
      padding-right: 32px;

      .select-length {
        display: inline-block;
      }

      &.has-length:not(.has-input) {
        padding-right: 70px;
      }

      &.has-input {
        .tag:not(.select-length) {
          max-width: 60%;
        }
      }

      .tag:not(.select-length) {
        display: flex;
      }
    }
  }

  &__placeholder {
    position: absolute;
    color: $input-color-placeholder;
  }

  // 避免覆盖后面的图标按钮
  &__selected-value,
  &__input,
  .list-inline,
  &__placeholder{
    padding-right: $select-selection-icon-font-size + $input-padding-x;
    padding-left: $input-padding-x;
  }

  &__placeholder,
  &__selected-value{
    display: block;
  }

  &__selection-icon {
    position: absolute;
    top: 50%;
    right: $input-padding-x;
    transform: translateY(-50%);
    & .aid-chevron-down,
    & .aid-chevron-up {
      color: $gray;
      font-size:$select-selection-icon-font-size;
    }
    & .aid-close-circle{
      font-size:$select-clear-icon-font-size;
      color: $gray-light;
      &:hover {
        color: $gray;
      }
    }
  }

  .list-inline-item {
    max-width: 100%;
    .#{$tag-prefix-cls} {
      max-width:100%;
      white-space: nowrap;
      background-color: $list-hover-bg;
      &__title {
        color: $brand-primary;
        @include text-truncate;
      }
      &__clear {
        color: $brand-primary;
      }
    }
  }

  &__input {
    @extend .#{$input-prefix-cls};
    border: none;
    height: $input-height - $border-width * 2;
    line-height: $input-height - $border-width * 2;
    cursor: text;
    background: transparent;
    padding-right: 2.4rem;
    &:focus {
      box-shadow: none;
      background: transparent;
    }
  }

  .list-inline {
    margin-left: -6px;
    &:empty{
      padding:0 !important;
    }
    margin-bottom: 0;
    line-height: 1.5;
    padding-top: ($input-height - $border-width*2 - $tag-height - $tag-margin-y*2)/2 !important;
    padding-bottom:($input-height - $border-width*2 - $tag-height - $tag-margin-y*2)/2 !important;
    &-item{
      margin-right:0;//overwrite default 5px
    }
  }

  &__menu{
    @extend .#{$dropdown-prefix-cls}__menu;
    max-height: $pre-scrollable-max-height;
    overflow-y: auto;
    padding: 8px 0;
  }

  // 结构生成在select下
  .#{$select-prefix-cls}__menu {
    display: none;
    min-width:100%;
  }



  &__options {
    padding:0;
    margin:0;

    // 分组
    .#{$select-prefix-cls}__group-title {
      display: block;
      width: 100%; // For `<button>`s
      padding: $dropdown-group-title-padding-y $dropdown-item-padding-x;
      clear: both;
      font-weight: $font-weight-normal;
      color: $dropdown-group-title-color;
      font-size: $dropdown-group-title-font-size;
      white-space: nowrap; // prevent links from randomly breaking onto new lines
    }
    ul {
      list-style: none;
      padding-left: 0;
      margin:0;
      .#{$select-prefix-cls}__item {
        padding-left: $dropdown-item-padding-x*2;
        padding-right: $dropdown-item-padding-x*2;
      }
    }
  }

  &__tips {
    @extend .#{$select-prefix-cls}__item;
    text-align: center;
  }

  &__item {
    @extend .#{$dropdown-prefix-cls}__item;

    //响应‘↑’ ‘↓’ 键
    &--focus {
      color: $dropdown-link-hover-color;
      text-decoration: none;
      background-color: $dropdown-link-hover-bg;
    }

    //disabled
    @include status-disabled {
      color: $dropdown-link-disabled-color;
      background-color: transparent;
      @if $enable-gradients {
        background-image: none;
      }
    }

    //checked
    @include checked-active {
      position: relative;
      background-color: transparent;
      color:$dropdown-link-check-icon-color;
      padding-right:calc(#{$dropdown-item-padding-x} + #{$font-size-sm} * 1.2);
      &:after {
        content: "\F8AE";
        @extend %aid-icon;
        transform: scale(1.2) translate(0, 0);
        position: absolute;
        right: $dropdown-item-padding-x;
        color: $dropdown-link-check-icon-color;
      }
    }
  }

  &--focus {
    .#{$select-prefix-cls}__selection {
      box-shadow: $input-box-shadow-focus;
      border-color: $input-border-focus;
    }
  }

  &--disabled {
    .#{$select-prefix-cls}__selection {
      @extend .#{$input-prefix-cls}--disabled;
    }
  }

  &--multiple {
    .#{$select-prefix-cls}__selection {
      height: auto !important;
      line-height:$input-height - $border-width * 2;
      min-height:$input-height;
      &--lg{
        min-height:$input-height-lg;
      }
      &--sm{
        min-height:$input-height-sm;
      }
    }
    //checked
    .#{$select-prefix-cls}__item{
      @include checked-active {
        background-color: transparent;
        color:$dropdown-link-check-icon-color;
        padding-right:calc(#{$dropdown-item-padding-x} + #{$font-size-sm} * 1.2);
        &:after {
          content: "\F8AE";
          @extend %aid-icon;
          transform: scale(1.2) translate(0, 0);
          position: absolute;
          right: $dropdown-item-padding-x;
          color: $dropdown-link-check-icon-color;
        }
      }
      @include hover-focus{
        background-color: $dropdown-link-hover-bg;
      }
    }
  }

  &--open {
    .#{$select-prefix-cls}__selection {
      box-shadow: $input-box-shadow-focus;
      border-color: $input-border-focus;
    }

    >.#{$select-prefix-cls}__menu{
      display: block;
    }
    // Remove the outline when :focus is triggered
    > a {
      outline: 0;
    }
    i.aid-chevron-down {
      transition: all $transition-time;
      transform: rotate(180deg);
    }
  }


  //
  //size
  //

  &--sm {
    .#{$select-prefix-cls}__selected-value,
    .#{$select-prefix-cls}__input,
    .list-inline,
    .#{$select-prefix-cls}__placeholder{
      padding-right: 2rem;
    }

    .#{$select-prefix-cls}__selection-icon{
      right: $input-padding-x-sm;
      & .aid-chevron-down,
      & .aid-chevron-up {
        font-size:$select-sm-selection-icon-font-size;
      }
      & .aid-close-circle{
        font-size:$select-sm-clear-icon-font-size;
      }
    }

    .#{$select-prefix-cls}__selection,
    .#{$select-prefix-cls}__input{
      @extend .#{$input-prefix-cls}--sm;
    }

    .#{$select-prefix-cls}__selection{
      min-height: $input-height-sm;
    }

    .#{$select-prefix-cls}__input{
      min-height: $input-height-sm - $border-width * 2;
      height: $input-height-sm - $border-width * 2;
      line-height: $input-height-sm - $border-width * 2;
    }
    .list-inline{
      padding-top: ($input-height-sm - $border-width * 2 - $tag-height - $tag-margin-y * 2) / 2 !important;
      padding-bottom: ($input-height-sm - $border-width * 2 - $tag-height - $tag-margin-y * 2) / 2 !important;
    }
  }

  &--lg{
    .#{$select-prefix-cls}__selected-value,
    .#{$select-prefix-cls}__input,
    .list-inline,
    .#{$select-prefix-cls}__placeholder{
      padding-right: $select-lg-selection-icon-font-size + $select-selection-icon-spacer;
    }

    .#{$select-prefix-cls}__selection-icon{
      right: $input-padding-x-lg;
      & .aid-chevron-down,
      & .aid-chevron-up {
        font-size:$select-lg-selection-icon-font-size;
      }
      & .aid-close-circle{
        font-size:$select-lg-clear-icon-font-size;
      }
    }

    .#{$select-prefix-cls}__selection,
    .#{$select-prefix-cls}__input{
      @extend .#{$input-prefix-cls}--lg;
    }

    .#{$select-prefix-cls}__selection{
      min-height: $input-height-lg;
    }

    .#{$select-prefix-cls}__input{
      min-height: $input-height-lg - $border-width * 2;
      height: $input-height-lg - $border-width * 2;
      line-height: $input-height-lg - $border-width * 2;
    }

    .list-inline{
      padding-top:($input-height-lg - $border-width * 2 - $tag-height - $tag-margin-y * 2) / 2 !important;
      padding-bottom:($input-height-lg - $border-width * 2 - $tag-height - $tag-margin-y * 2) / 2 !important;
    }
  }

}

.select__menu .tree__node-content {
  padding-right: 8px;
}