// @import '../_utils.scss';

// @import './icon.scss';
// @import './tree.scss';
// @import './checkbox.scss';
// @import './select-dropdown.scss';

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

  @include theme-font-color($__selectTree_font-color);
  @if $--size-switch == yes {
    font-size: $--size-font-size-base;
    @include computed-line-height();
  } @else {
    height: $form-component-height;
  }

  &-loading {
    text-align: center;
    color: #c3cbd6;
    font-size: $font-size-base;
    height: $input-height-base;
    line-height: $input-height-base;
  }

  &-selection {
    display: block;
    box-sizing: border-box;
    outline: none;
    user-select: none;
    cursor: pointer;
    background-color: $selectTree-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($__selectTree-selection_background-color);
    @include theme-border-color($__selectTree-selection_border-color);
    @include scrollbar;

    .#{$selecttree-prefix-cls}-arrow:nth-of-type(1) {
      display: none;
      cursor: pointer;
    }

    &:hover {
      @include hover();
      .#{$selecttree-prefix-cls}-arrow:nth-of-type(1) {
        display: inline-block;
      }
    }
    .#{$css-prefix}tag {
      position: relative;
      white-space: nowrap;
      max-width: 80%;
      text-overflow: ellipsis;
      padding-left: $select-tag-padding-left;
      background: $select-tag-background !important;
      border: 1px solid $border-color-split !important;
      height: $select-tag-height;
      line-height:$select-tag-line-height;
      @include theme-background-color($__selectTree-tag_background, $--important);
      @include theme-border-color($__selectTree-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;
      }
    }
  }
  &-show-clear &-selection:hover .#{$selecttree-prefix-cls}-arrow:nth-of-type(2) {
    display: none;
  }
  // &-dropdown-content{
  //     position:relative;
  //     max-height:$max-height;
  //     padding: 5px 0;
  //     overflow:auto;
  // }
  &-dropdown-content {
    padding: 0;

    .#{$selecttree-prefix-cls}-search {
      position: absolute;
      background: $selectTree-dropdown-content-search-background;
      height: $selectTree-dropdown-content-search-height;
      padding: $selectTree-dropdown-content-search-padding;
      left: 0;
      top: 0;
      z-index: 1;

      @include theme-background-color($__selectTree-search_background);

      input {
        width: 100%;
        height: $selectTree-dropdown-content-input-height;
        line-height: $selectTree-dropdown-content-input-height;
        border: 0;
        padding: $selectTree-dropdown-content-input-padding;
        border-radius: 0;
        border-bottom: $selectTree-dropdown-content-input-border-bottom;

        @include theme-border-bottom-color($__selectTree-search-input_border-bottom-color);
      }

      input:focus {
        box-shadow: none;
      }
    }

    .#{$selecttree-prefix-cls}-dropdown-list {
      // max-height:$max-height;
      overflow: auto;
      position: relative;
      // padding:$selectTree-dropdown-list-padding;
      padding: 0;

      &-body {
        padding: $selectTree-dropdown-list-padding;

        @include scrollbar;
      }

      .#{$tree-prefix-cls} {
        padding-top: $selectTree-dropdown-list-h-tree-padding-top;
        padding-bottom: $selectTree-dropdown-list-h-tree-padding-bottom;
      }
    }
  }

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

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

    .#{$selecttree-prefix-cls}-arrow:nth-of-type(2) {
      transform: rotate(180deg);
    }
  }

  &-disabled,
  &-readonly {
    .#{$selecttree-prefix-cls}-selection {
      .#{$selecttree-prefix-cls}-arrow:nth-of-type(2) {
        display: none;
      }

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

        @include theme-border-color($__selectTree-disabled-selection_hover_border-color);

        .#{$selecttree-prefix-cls}-arrow:nth-of-type(1) {
          display: none;
        }
      }
    }
  }

  &-disabled {
    .#{$selecttree-prefix-cls}-selection {
      input {
        cursor: not-allowed;
      }

      @include disabled();
      .#{$css-prefix}tag-text {
        color: $selectTree-selection-disabled-font-color;
        @include theme-font-color($__selectTree-disabled-selection_font-color);
      }
    }
  }

  &-readonly {
    .#{$selecttree-prefix-cls}-selection {
      @include readonly();
      opacity: $selectTree-selection-readonly-opacity;
      color: $text-color;
    }
  }

  &-single &-selection {
    height: $input-height-base;
    position: relative;
    @if $--size-switch == yes {
      height: $--size-height-base;
    }
    .#{$selecttree-prefix-cls}-placeholder {
      color: $input-placeholder-color;

      @include theme-font-color($__selectTree-single-selection-placeholder_font-color);
    }

    .#{$selecttree-prefix-cls}-placeholder, .#{$selecttree-prefix-cls}-selected-value {
      display: block;
      line-height: $input-height-base - 2px;
      font-size: $font-size-small;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: $selectTree-single-selection-selected-value-padding-left;
      padding-right: $selectTree-single-selection-selected-value-padding-right;
      @if $--size-switch == yes {
        font-size: $--size-font-size-base;
        @include computed-height($--size-height-base - 2, 0);
        padding-right: $--size-font-size-base + $--size-offset-base;
      } @else {
        height: $input-height-base - 2px;
      }
    }
    .#{$selecttree-prefix-cls}-arrow {
      right: 8px !important;
      @if $--size-switch == yes {
        right: $--size-offset-base !important;
      }
    }
  }

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

    .#{$selecttree-prefix-cls}-placeholder, .#{$selecttree-prefix-cls}-selected-value {
      line-height: $input-height-large - 2px;
      font-size: $font-size-base;
      @if $--size-switch == yes {
        @include computed-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;
      }
    }
  }

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

    .#{$selecttree-prefix-cls}-placeholder, .#{$selecttree-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;
      }
    }
  }

  &-multiple &-selection {
    overflow-x: hidden;
    overflow-y: auto;
    -moz-overflow-y: auto;
    padding-right: $selectTree-multiple-selection-padding-right;
    height: $input-height-base;
    // scrollbar[orient="vertical"] scrollbarbutton {
    // max-height:10px !important; min-height:10px !important;
    // }
    @if $--size-switch == yes {
      height: $--size-height-base;
      // padding-left: 0;
      // padding-right: $--size-offset-base + $--size-font-size-base;
    }
    .#{$selecttree-prefix-cls}-placeholder {
      display: block;
      line-height: $input-height-base - 2px;
      color: $input-placeholder-color;
      font-size: $font-size-small;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: $selectTree-multiple-selection-placeholder-padding-left;
      padding-right: $selectTree-multiple-selection-placeholder-padding-right;

      @include theme-font-color($__selectTree-multiple-selection-placeholder_font-color);
      @if $--size-switch == yes {
        font-size: $--size-font-size-base;
        @include computed-height($--size-height-base - 2, 0);
        padding-right: $--size-font-size-base + $--size-offset-base;
      } @else {
        height: $input-height-base - 2px;
      }
    }
  }

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

    .#{$selecttree-prefix-cls}-placeholder{
      line-height: $input-height-large - 2px;
      font-size: $font-size-base;
      @if $--size-switch == yes {
        @include computed-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;
      }
    }

    .#{$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;
      }
    }

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

    .#{$selecttree-prefix-cls}-selected-num {
      line-height: $input-height-large - 2;
      @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);
      }
    }
  }

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

    .#{$selecttree-prefix-cls}-placeholder{
      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;
      }
    }

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

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

    .#{$selecttree-prefix-cls}-selected-num {
      line-height: $input-height-small - 2;
      @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);
      }
    }
  }

  // input
  &-input {
    display: inline-block;
    line-height: $input-height-base;
    padding: $selectTree-input-padding;
    font-size: $font-size-small;
    outline: none;
    border: none;
    box-sizing: border-box;
    color: $input-color;
    background-color: transparent;
    position: relative;
    cursor: pointer;

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

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

  &-large &-input {
    font-size: $font-size-base;
    @if $--size-switch == yes {
      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;
    }
  }

  &-small &-input {
    @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;
      vertical-align: top;
    } @else {
      height: $input-height-small;
    }
  }

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

  &-multiple.#{$selecttree-prefix-cls}-small &-input {
    @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);
      vertical-align: top;
    } @else {
      height: $input-height-small - 3px;
    }
  }

  &-multiple.#{$selecttree-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);
      line-height: computed-line-height($--size-height-base + 2, $--size-font-size-base, 0);
      @include computed-select-padding-vertical($--size-height-base + 2, $--size-font-size-base, 0);
    } @else {
      height: $input-height-large - 3px;
    }
  }

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

  &-multiple .#{css-prefix}tag {
    margin: $selectTree-multiple-tag-margin;
  }
  // select-arrow
  // &-single &-selection {
  //   .#{$selecttree-prefix-cls}-arrow {
  //     right: 8px !important;
  //   }
  // }

  &-content {
    padding: $selectTree-content-padding;

    .#{$tree-prefix-cls} {
      margin-left: $selectTree-content-h-tree-margin-left;
    }
  }

  &-selected-num {
    display: block;
    line-height: $input-height-base - 2px;
    padding-left: 8px;
    font-size: $font-size-small;
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      @include computed-height($--size-height-base - 2, 0);
      padding-right: 0;
    } @else {
      height: $input-height-base - 2px;
    }
  }
}

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

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

    @include theme-font-color($__selectTree-multiple-select_selected_font-color);
    @include theme-background-color($__selectTree-multiple-select_selected_background);
  }

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

    @include theme-background-color($__selectTree-multiple-select_focus_background);
  }

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

    @include theme-font-color($__selectTree-multiple-select-selected_primary_font-color);
    @include theme-background-color($__selectTree-multiple-select-selected_primary_background);
  }
  .#{$checkbox-prefix-cls}-wrap {
    float: right;
  }
  // &-selected:after{
  //     @include h-icon();
  //     float: right;
  //     font-size: 20px;
  //     content: "\e734";
  //     color: $selected-color;
  // }
}

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

      @include theme-border-color($__selectTree-formItem-selection_error_border-color);
    }

    &-arrow {
      color: $error-color;

      @include theme-font-color($__selectTree-formItem-arrow_error_font-color);
    }
    &-visible .#{$selecttree-prefix-cls}-selection {
      @include active-error;
    }
  }
}
.#{$form-item-prefix-cls}-changed {
  .#{$selecttree-prefix-cls} {
    &-selection {
      color: $changed-color;

      @include theme-font-color($__selectTree-formItem-selection_changed_font-color);
    }

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

      @include theme-font-color($__selectTree-formItem-tag_changed_font-color,$--important);
    }
  }
}
.#{$editgird-prefix-cls}-cell-error {
  .#{$selecttree-prefix-cls} {
    &-selection {
      border: 1px solid $error-color;

      @include theme-border-color($__selectTree-editgird-cell-selection_error_border-color);
    }

    &-arrow {
      color: $error-color;

      @include theme-font-color($__selectTree-editgird-cell-arrow_error_font-color);
    }
    &-visible .#{$selecttree-prefix-cls}-selection {
      @include active-error;
    }
  }
}