// @import "../_utils.scss";
// @import "./button.scss";
// @import "./tag.scss";
// @import "./checkbox.scss";
// @import "./select-dropdown.scss";

@mixin placeholder-align($align: left) {
  // Firefox
  &::-moz-placeholder {
    text-align: $align;
  }
  // Safari and Chrome
  &::-webkit-input-placeholder {
    text-align: $align;
  }
  // Internet Explorer 10+
  &:-ms-input-placeholder {
    text-align: $align;
  }
}

.#{$select-prefix-cls} {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: $select-vertical-align;
  color: $text-color;
  font-size: $font-size-base;
  // line-height: normal;
  position: relative;

  @include theme-font-color($__select_font-color);
  @include structure-font-size($__select-default_font-size, 0);
  @if $--size-switch == yes {
    font-size: $--size-font-size-base;
  } @else {
    height: $input-height-base;
  }
  &-selection {
    display: block;
    box-sizing: border-box;
    outline: none;
    user-select: none;
    cursor: pointer;
    background-color: $select-selection-background-color;
    border-radius: $btn-border-radius;
    border: 1px solid $border-color-base;
    transition: all $transition-time $ease-in-out;

    @include theme-background-color($__select_background-color);
    @include theme-border-color($__select_border-color);

    // .#{$select-prefix-cls}-arrow.#{$icon-prefix-cls}-close {
    //     display:none;
    //     cursor: pointer;
    // }

    &:hover {
      @include hover();
      .#{$select-prefix-cls}-arrow:nth-of-type(1) {
        display: inline-block;
      }
      // .#{$select-prefix-cls}-arrow:nth-of-type(2) {
      //     display: none;
      // }
    }

    .#{$css-prefix}tag {
      position: relative;
      white-space: nowrap;
      max-width: 45%;
      text-overflow: ellipsis;
      height: $select-tag-height;
      line-height: $select-tag-line-height;
      // margin: 0;
      padding: $select-tag-padding;
      padding-right: $select-tag-padding-right;
      padding-left: $select-tag-padding-left;
      background: $select-tag-background !important;
      border: 1px solid $border-color-split !important;

      @include theme-background-color($__select-tag_background-color, $--important);
      @include theme-border-color($__select-tag_border-color, $--important);
      @if $--size-switch == yes {
        @include computed-select-tag-margin-vertical(normal, $--size-height-base - 2);
        @include computed-select-tag-height(normal);
      } @else {
        margin-left: $select-tag-margin-left;
      }
      &>.#{$css-prefix}icon {
        position: absolute;
        right: 0;
      }

      span {
        display: inline-block;
        width: 100%;
      }
      &.#{$select-prefix-cls}-tag-disabled-option {
        i {
          cursor: not-allowed;
        }
      }
    }
  }
  // &-show-clear &-selection:hover .#{$select-prefix-cls}-arrow:nth-of-type(2) {
  //     display: none;
  // }

  &-arrow {
    @include inner-arrow();
  }

  &-visible {
    .#{$select-prefix-cls}-selection {
      @include active();
    }

    .#{$select-prefix-cls}-arrow.#{$icon-prefix-cls}-unfold {
      transform: rotate(180deg);
    }
  }

  &-readonly {
    .#{$select-prefix-cls}-selection {
      .#{$select-prefix-cls}-arrow:nth-of-type(1) {
        display: none;
      }

      &:hover {
        border-color: $border-color-base;
        box-shadow: none;

        @include theme-border-color($__select_readonly-hover_border-color);
        .#{$select-prefix-cls}-arrow:nth-of-type(2) {
          display: inline-block;
        }
      }

      @include readonly();
      opacity: $select-selection-readonly-opacity;
      color: $text-color;

      .#{$css-prefix}tag {
        &>.#{$css-prefix}icon {
          @include theme-font-color($__select-tag-icon_readonly_font-color);
        }
      }
    }
  }

  &-disabled {
    .#{$select-prefix-cls}-selection {
      .#{$select-prefix-cls}-arrow:nth-of-type(1) {
        display: none;
      }
      .#{$select-prefix-cls}-input {
        cursor: not-allowed;
      }

      &:hover {
        border-color: $border-color-base;
        box-shadow: none;

        @include theme-border-color($__select_disabled-hover_border-color);
        .#{$select-prefix-cls}-arrow:nth-of-type(2) {
          display: inline-block;
        }
      }

      @include disabled();

      .#{$css-prefix}tag {
        &-text {
          color: $select-selection-disabled-font-color;
          @include theme-font-color($__select-tag_disabled_font-color);
        }
        &>.#{$css-prefix}icon {
          color: $select-selection-disabled-font-color;
          @include theme-font-color($__select-tag_disabled_font-color);
        }
      }
    }
    .#{$select-prefix-cls}-arrow {
      @include theme-font-color($__select-arrow_disabled_font-color);
    }
  }

  &-single &-selection {
    height: $input-height-base;
    position: relative;
    @if $--size-switch == yes {
      height: $--size-height-base;
    }

    .#{$select-prefix-cls}-placeholder {
      color: $input-placeholder-color;

      @include theme-font-color($__select-placeholder_font-color);
    }

    .#{$select-prefix-cls}-placeholder, .#{$select-prefix-cls}-selected-value {
      display: block;
      line-height: $input-height-base - 2px;
      font-size: $select-single-selection-font-size;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: $select-single-selection-selected-value-padding-left;
      padding-right: $select-single-selection-selected-value-padding-right-close;//select无选中项时也提前预留close图标的空间

      @include structure-font-size($__select-default_font-size, 0);
      @if $--size-switch == yes {
        font-size: $--size-font-size-base;
        @include computed-height($--size-height-base - 2, 0);
        @include custom-line-height($--size-height-base - 2);
        padding-right: $--size-offset-base + $font-size-base;
      } @else {
        height: $input-height-base - 2px;
      }
    }
    .#{$select-prefix-cls}-selected-value-close {
      padding-right: $select-single-selection-selected-value-padding-right-close;
      @if $--size-switch == yes {
        padding-right: $--size-offset-base + $font-size-base;
      }
    }

    //合并
    .#{$select-prefix-cls}-arrow {
      right: $select-single-selection-arrow-right;
      @if $--size-switch == yes {
        right: $--size-offset-base;
      }
    }
    // #177543  客户经常会出现点下拉图标查看所有选项时，误将当前选项清除的情况 (期望和下拉标志显示一行)
    .#{$select-prefix-cls}-arrow.#{$icon-prefix-cls}-close {
      right: $select-single-selection-arrow-right-close;
      @if $--size-switch == yes {
        right: $--size-offset-base*2 + $--size-font-size-base;
      }
    }
  }

  .#{$select-prefix-cls}-large.#{$select-prefix-cls}-single &-selection {
    height: $input-height-large;
    @if $--size-switch == yes {
      height: $--size-height-base + 4;
    }

    .#{$select-prefix-cls}-placeholder, .#{$select-prefix-cls}-selected-value {
      line-height: $input-height-large - 2px;
      font-size: $font-size-base;

      @include structure-font-size($__select-default_font-size, 2);
      @if $--size-switch == yes {
        @include custom-line-height();
        font-size: $--size-font-size-base;
        $padding-vertical: computed-padding-vertical($--size-height-base + 2, $--size-font-size-base, 0);
        padding-top: $padding-vertical;
        padding-bottom: $padding-vertical;
      } @else {
        height: $input-height-large - 2px;
      }
    }
    .#{$select-prefix-cls}-input {
      @if $--size-switch == yes {
        $padding-vertical: computed-padding-vertical($--size-height-base + 2, $--size-font-size-base, 0);
        padding-top: $padding-vertical;
        padding-bottom: $padding-vertical;
      }
    }
  }

  .#{$select-prefix-cls}-small.#{$select-prefix-cls}-single &-selection {
    height: $input-height-small;
    border-radius: $btn-border-radius-small;
    @if $--size-switch == yes {
      height: $--size-height-base - 4;
    }
    .#{$select-prefix-cls}-placeholder, .#{$select-prefix-cls}-selected-value {
      line-height: $input-height-small - 2px;
      @if $--size-switch == yes {
        @include custom-line-height($--size-height-base - 6);
        $padding-vertical: computed-padding-vertical($--size-height-base - 6, $--size-font-size-base, 0);
        padding-top: $padding-vertical;
        padding-bottom: $padding-vertical;
      } @else {
        height: $input-height-small - 2px;
      }
    }
    .#{$select-prefix-cls}-input {
      @if $--size-switch == yes {
        $padding-vertical: computed-padding-vertical($--size-height-base - 6, $--size-font-size-base, 0);
        padding-top: $padding-vertical;
        padding-bottom: $padding-vertical;
      }
    }
  }

  &-multiple &-selection {
    overflow-y: auto;
    height: $input-height-base;
    padding-right: $select-multiple-selection-padding-right;
    padding-left: $select-multiple-selection-padding-left;
    display: flex;
    flex-flow: wrap;
    @if $--size-switch == yes {
      height: $--size-height-base;
      padding-left: 0;
      padding-right: $--size-offset-base + $font-size-base;
    }

    @include scrollbar;
    .#{$select-prefix-cls}-placeholder {
      display: block;
      line-height: $input-height-base - 2px;
      color: $input-placeholder-color;
      font-size: $select-multiple-selection-font-size;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: $select-multiple-selection-placeholder-padding-left;
      padding-right: $select-multiple-selection-placeholder-padding-right;
      flex-grow: 1;

      @include theme-font-color($__select-multiple-placeholder_font-color);
      @include structure-font-size($__select-default_font-size, 0);
      @if $--size-switch == yes {
        font-size: $--size-font-size-base;
        @include computed-height($--size-height-base - 2, 0);
        @include custom-line-height($--size-height-base - 2);
        padding-right: 0;
      } @else {
        height: $input-height-base - 2px;
      }
    }
  }

  .#{$select-prefix-cls}-large.#{$select-prefix-cls}-multiple &-selection {
    height: $input-height-large;
    @if $--size-switch == yes {
      height: $--size-height-base + 4;
    }

    .#{$select-prefix-cls}-placeholder{
      line-height: $input-height-large - 2px;
      font-size: $font-size-base;

      @include structure-font-size($__select-default_font-size, 2);
      @if $--size-switch == yes {
        @include custom-line-height();
        font-size: $--size-font-size-base;
        $padding-vertical: computed-padding-vertical($--size-height-base + 2, $--size-font-size-base, 0);
        padding-top: $padding-vertical;
        padding-bottom: $padding-vertical;
      } @else {
        line-height: $input-height-large - 2px;
        height: $input-height-large - 2px;
      }
    }

    .#{$css-prefix}tag {
      @if $--size-switch == yes {
        @include computed-select-tag-margin-vertical(large, $--size-height-base + 2);
        @include computed-select-tag-height(large);
      } @else {
        height: 30px;
        line-height: 30px;
        margin-top: 2px;
        margin-bottom: 1px;
      }
    }

    .#{$select-prefix-cls}-arrow {
      @if $--size-switch == no {
        margin-top: -5px;
      }
    }
  }

  .#{$select-prefix-cls}-small.#{$select-prefix-cls}-multiple &-selection {
    height: $input-height-small;
    border-radius: $btn-border-radius-small;
    @if $--size-switch == yes {
      height: $--size-height-base - 4;
    }

    .#{$select-prefix-cls}-placeholder{
      @if $--size-switch == yes {
        font-size: computed-font-size($--size-height-base - 6, $--size-font-size-base, 0);
        line-height: computed-line-height($--size-height-base - 6, $--size-font-size-base, 0);
        @include computed-select-padding-vertical($--size-height-base - 6, $--size-font-size-base, 0);
      } @else {
        line-height: $input-height-small - 2px;
        height: $input-height-small - 2px;
      }
    }

    .#{$css-prefix}tag {
      @include computed-select-tag-margin-vertical(small, $--size-height-base - 6);
      @if $--size-switch == yes {
        @include computed-select-tag-height(small)
      }
    }

    .#{$select-prefix-cls}-arrow {
      @if $--size-switch == no {
        margin-top: -11px;  
      }
    }
}

  &-multiple &-selection &-input {
    flex-grow: 1;
    width: 100%;
  }

  @if $--size-switch == yes {
    &-show-clear.#{$select-prefix-cls}-single .#{$select-prefix-cls}-selection {
      .#{$select-prefix-cls}-placeholder, .#{$select-prefix-cls}-selected-value, .#{$select-prefix-cls}-selected-value-close {
        padding-right: $--size-offset-base*2 + $font-size-base*2;
      }
    }
    &-show-clear.#{$select-prefix-cls}-multiple &-selection{
      padding-right: $--size-offset-base*2 + $font-size-base*2;
    }
    &-show-clear {
      .#{$select-prefix-cls}-input, .#{$select-prefix-cls}-content-input {
        padding-right: $--size-offset-base*2 + $font-size-base*2;
      }
    }
  }

  // input
  &-input,
  &-content-input {
    vertical-align: top;
    display: inline-block;
    line-height: $input-height-base;
    padding: $select-input-padding;
    font-size: $select-content-input-font-size;
    outline: none;
    border: none;
    box-sizing: border-box;
    color: $input-color;
    background-color: transparent;
    position: relative;
    cursor: pointer;

    @include theme-font-color($__select-input_font-color);
    @include structure-font-size($__select-default_font-size, 0);
    @include placeholder();
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      @include computed-height($--size-height-base - 2, 0);
      @include custom-line-height($--size-height-base - 2);
      padding-right: $--size-offset-base + $font-size-base;
    } @else {
      height: $input-height-base;
    }
  }

  &-content-input {
    width: 100%;
  }

  &-checkHead {
    .#{$checkbox-prefix-cls}-wrapper {
      margin-left: $select-checkHead-margin-left;
      margin-right: $select-checkHead-margin-right;
    }
    .#{$select-prefix-cls}-content-input {
      width: calc(100% - 36px);
      height: $select-checkHead-content-input-height;
      line-height: $select-checkHead-content-input-line-height;
    }
  }

  &-single &-input {
    width: 100%;
  }

  &-large &-input {
    font-size: $font-size-base;

    @include structure-font-size($__select-default_font-size, 2);
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      @include custom-line-height($--size-height-base + 2);
    } @else {
      height: $input-height-large - 2px;
    }
  }

  &-small &-input {
    @if $--size-switch == yes {
      @include custom-line-height($--size-height-base - 6);
    } @else {
      height: $input-height-small - 2px;
    }
  }

  &-multiple &-input {
    line-height: $input-height-base;
    padding: $select-multiple-input-padding;
    @if $--size-switch == yes {
      @include computed-height($--size-height-base - 4, 0);
      @include custom-line-height($--size-height-base - 4);
      padding-right: 0;
    } @else {
      height: $input-height-base - 3px;
    }
  }

  &-multiple.#{$select-prefix-cls}-small &-input {
    @if $--size-switch == yes {
      font-size: computed-font-size($--size-height-base - 6, $--size-font-size-base, 0);
      @include computed-height($--size-height-base - 6, 0);
      padding-right: 0;
    } @else {
      height: $input-height-small - 2px;
    }
  }

  &-multiple.#{$select-prefix-cls}-large &-input {
    font-size: $font-size-base;
    @if $--size-switch == yes {
      font-size: computed-font-size($--size-height-base + 2, $--size-font-size-base, 0);
      @include computed-height($--size-height-base + 2, 0);
      padding-right: 0;
    } @else {
      height: $input-height-large - 2px;
    }
  }

  &-not-found {
    text-align: center;
    color: $btn-disable-color;

    @include theme-font-color($__select-not-found_font-color);
  }

  &-loading {
    text-align: center;
    color: $btn-disable-color;

    @include theme-font-color($__select-loading_font-color);
  }

  &-not-data {
    text-align: center;
    color: $btn-disable-color;

    @include theme-font-color($__select-not-data_font-color);
  }
  &-multiple .#{css-prefix}tag {
    margin: $select-multiple-tag-margin;
  }

  &-hideMultHead {
    position: relative;
    display: block;
    font-size: $select-hideMultHead-font-size;
    padding: $select-hideMultHead-padding;

    @include structure-font-size($__select-default_font-size, 0);
    @include theme-font-color($__select_font-color);
  }

  &-hideMultHead:hover {
    cursor: pointer;
  }

  &-hideMultHead::after {
    @include h-icon();
    font-size: $select-hideMultHead-after-font-size;
    content: "\E734";
    color: $no-select-color;
    position: absolute;
    top: $select-hideMultHead-after-top;
    right: $select-hideMultHead-after-right;

    @include theme-font-color($__select-hideMult-after_font-color);
  }

  &-hideMultHead-select,
  &-hideMultHead-select::after {
    color: $selected-color;

    @include theme-font-color($__select-hideMult-after_selected_font-color);
  }

  // select-dropdown-list checkbox
  &-dropdown &-dropdown-list {
    display: inline-block;
    min-width: 100%;
    .#{$select-prefix-cls}-item {
      position: relative;
      height: $select-dropdown-item-height;
      line-height: $select-dropdown-item-line-height;
      display: flex;
      align-items: baseline;

      & label {
        // position: absolute;
        // left: 8px;
      }
    }
  }

  &-dropdown-content {
    max-height: $max-height;
    padding: $select-dropdown-content-padding;
    overflow: auto;

    @include scrollbar;
    // bug 151239 开启showbuttom和filterable输入框与选项之间没有分割线
    input {
      border-bottom: 1px solid $border-color-base;

      @include theme-border-color($__select-dropdown_border-bottom-color);
    }
  }

  &-left {
    text-align: left;
    .#{$select-prefix-cls}-input {
      @include placeholder-align(left);
    }
  }

  &-center {
    text-align: center;
    .#{$select-prefix-cls}-input {
      @include placeholder-align(center);
    }
  }

  &-right {
    text-align: right;
    .#{$select-prefix-cls}-input {
      @include placeholder-align(right);
    }
  }

  &-btnToTop {
    padding: 7px 12px;

    &-invert {
      float: right;
      margin-right: 12px;
    }
  }

  //合并
  &-checkall {
    border-top: $select-checkall-border-top;
    text-align: right;
    padding: $select-checkall-padding;
    clear: both;

    @include theme-border-color($__select_checkall_border-color);
  }

  &-check-no-padding {
    padding: 0;
  }

  & .h-checkbox-wrapper {
    @if $--size-switch == yes { //需要去除checkbox的上下padding，否则在最小模式下的单元格会被撑开
      padding: 0;
      line-height: 0;
      vertical-align: middle;
    } 
  }
}

@include select-item($select-prefix-cls, $select-item-prefix-cls);

.#{$select-prefix-cls}-multiple .#{$select-item-prefix-cls} {
  &-selected {
    color: $selected-color;
    background: $select-multiple-selected-item-background;

    @include theme-font-color($__select-item_multiple-selected_font-color);
    @include theme-background-color($__select-item_multiple-selected_background-color);
  }

  &-focus,
  &-selected:hover {
    color: $selected-color;
    background: $background-color-select-hover;

    @include theme-font-color($__select-item_multiple_selected-hover_font-color);
    @include theme-background-color($__select-item_multiple_selected-hover_background-color);
  }

  .#{$select-item-prefix-cls}-selected.#{$select-item-prefix-cls}-focus {
    color: shade($selected-color, 10%);
    background: $select-multiple-selected-item-focus-background;

    @include theme-font-color($__select-item_multiple_selected-focus_font-color);
    @include theme-background-color($__select-item_multiple_selected-focus_background-color);
  }
}
.#{$select-prefix-cls}-hideMult .#{$select-item-prefix-cls} {
  padding-right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;

  &::after {
    @include h-icon();
    font-size: $select-hideMultHead-after-font-size;
    content: "\E734";
    color: $select-hideMultHead-after-color;
    position: absolute;
    top: $select-hideMult-top;
    right: $select-hideMult-right;

    @include theme-font-color($__select-item-after_hideMult_font-color);
  }

  &:hover::after {
    color: $no-select-color;

    @include theme-font-color($__select-item-after_hideMult_hover_font-color);
  }

  &-selected {
    @include theme-background-color($__select-hideMult_selected_background-color);
  }

  &-selected::after {
    color: $selected-color !important;

    @include theme-font-color($__select-item-after_hideMult_selected_font-color, $--important);
  }
}
.#{$select-group-prefix-cls} {
  list-style: none;
  margin: 0;
  padding: 0;

  &-title {
    padding-left: $select-group-title-padding-left;
    font-size: $select-group-title-font-size;
    color: $legend-color;
    height: $select-group-title-height;
    line-height: $select-group-title-line-height;

    @include theme-font-color($__select-group-title_font-color);
    @include structure-font-size($__select-default_font-size, 0);
  }
}

.#{$form-item-prefix-cls}-error {
  .#{$select-prefix-cls} {
    &-selection {
      border: 1px solid $error-color;

      @include theme-border-color($__select-form-item_error_border-color);

      &:hover {
        border: 1px solid $error-color;

        @include theme-border-color($__select-form-item_error_hover_border-color);
      }
    }

    &-arrow {
      color: $error-color;

      @include theme-font-color($__select-form-item-arrow_error_font-color);
    }
    &-visible .#{$select-prefix-cls}-selection {
      @include active-error;
    }
  }
}

.#{$form-item-prefix-cls}-changed {
  .#{$select-prefix-cls} {
    &-selection {
      color: $changed-color;

      @include theme-font-color($__select-form-item_changed_font-color);
    }

    .#{$tag-prefix-cls} {
      color: $changed-color !important;

      @include theme-font-color($__select-form-item-tag_changed_font-color,$--important);
    }

    .#{$select-prefix-cls}-input {
      color: $changed-color;

      @include theme-font-color($__select-form-item-input_changed_font-color);
    }
  }
}

.#{$editgird-prefix-cls}-cell-error {
  .#{$select-prefix-cls} {
    &-selection {
      border: 1px solid $error-color;

      @include theme-border-color($__select-editgrid-cell_error_border-color);
    }

    &-arrow {
      color: $error-color;

      @include theme-font-color($__select-editgrid-cell-arrow_error_font-color);
    }
    &-visible .#{$select-prefix-cls}-selection {
      @include active-error;
    }
  }
}
.#{$editgird-prefix-cls}-cell {
  .#{$select-prefix-cls} {
    &-dropdown {
      ul {
        user-select: none;
      }
    }
  }
}
// .#{$select-prefix-cls}-multiple{

.#{$input-prefix-cls}-group,.#{$typefield-prefix-cls}-group {
  &-append,
  &-prepend {
    .#{$select-prefix-cls}-selection {
      border-color: transparent;

      &:hover {
        border-color: transparent;
      }
    }
  }
}