// @import '../_utils.scss';
// @import './checkbox.scss';
// @import './button.scss';
// @import './input.scss';
// @import './icon.scss';

.#{$transfer-prefix-cls} {
  position: relative;
  line-height: $line-height-base;
  display: flex;
  align-items: center;
  @if $--size-switch ==  yes {
    @include computed-line-height();
  }

  &-list {
    display: inline-block;
    width: $transfer-list-width;
    // height: $max-height;
    font-size: $transfer-list-font-size;
    vertical-align: middle;
    position: relative;
    padding-top: $transfer-list-padding-top;
    @include theme-background-color($__transfer_background-color);
    @if $--size-switch ==  yes {
      padding-top: $--size-height-base + 4;
      font-size: $--size-font-size-base;
    }

    &-with-footer {
      // padding-bottom: 35px;
    }

    &-header {
      padding: $transfer-list-header-padding;
      background: $transfer-header-bg;
      color: $text-color;
      border: 1px solid $border-color-base;
      border-bottom: 1px solid $border-color-split;
      border-radius: $transfer-border-radius $transfer-border-radius 0 0;
      overflow: hidden;
      position: absolute;
      top: $transfer-list-header-top;
      left: $transfer-list-header-left;
      width: 100%;
      z-index: 1;
      @include theme-background-color($__transfer-header_background-color);
      @include theme-font-color($__transfer-header_font-color);
      @include theme-border-color($__transfer-header_border-color);
      @include theme-border-bottom-color($__transfer-header_border-bottom-color);
      @if $--size-switch ==  yes {
        @include computed-height($--size-height-base + 4)
      }

      &-title {
        cursor: pointer;
      }

      & > span {
        padding-left: $transfer-list-header-span-padding-left;
      }

      &-count {
        margin: 0 !important;
        float: right;
        @include theme-font-color($__transfer-header-count_font-color);
      }

      .head-clear {
        cursor: pointer;
        @include theme-font-color($__transfer-header-clear_font-color);
        &:hover {
          @include theme-font-color($__transfer-header-clear_hover_font-color);
        }
      }
    }

    &-body {
      // height: 100%;
      height: $max-height;
      border: 1px solid $border-color-base;
      border-top: none;
      border-radius: 0 0 $transfer-border-radius $transfer-border-radius;
      position: relative;
      overflow: hidden;
      z-index: 0;
      @include theme-border-color($__transfer-body_border-color);

      &-with-search {
        padding-top: $transfer-list-body-with-search-padding-top;
        @if $--size-switch == yes {
          padding-top: $--size-offset-base * 2 + $--size-height-base - 4;
        }
      }

      &-with-footer {
        border-radius: 0;
      }
    }

    &-content {
      height: 100%;
      padding: $transfer-list-content-padding;
      overflow: auto;
      @include scrollbar;
      @if $--size-switch == yes {
        padding: $--size-offset-base 0;
      }

      &-item {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        & > span {
          //padding-left: 4px;
        }

        & > .delete-icon {
          display: none;
          float: right;
          @include theme-font-color($__transfer-item-delete_font-color);
        }
      }

      &-item:hover {
        background: $transfer-list-content-item-hover-color;
        @include theme-background-color($__transfer-item_hover_background-color);

        & > .delete-icon {
          display: block;
        }
      }

      &-not-found {
        display: none;
        text-align: center;
        color: $btn-disable-color;
        @include theme-font-color($__transfer-content-not-found_font-color);
      }

      &-not-found:only-child {
        display: block;
      }

      .sortable-parent li:hover {
        @include theme-background-color($__transfer-sortable-parent_hover_background-color);
      }
      .sortable-chosen {
        @include theme-background-color($__transfer-sortable-chosen_background-color, $--important);
      }
      .sortable-ghost {
        @include theme-background-color($__transfer-sortable-ghost_background-color, $--important);
      }
    }

    &-data-not-found {
      text-align: center;
      color: $btn-disable-color;
      @include theme-font-color($__transfer-data-not-found_font-color);
    }

    &-body-with-search &-content {
      padding: $transfer-body-with-search-padding;
      @if $--size-switch == yes {
        padding: 0 0 $--size-offset-base;
      }
    }

    &-body-search-wrapper {
      padding: $transfer-body-search-wrapper-padding;
      position: absolute;
      top: $transfer-body-search-wrapper-top;
      left: $transfer-body-search-wrapper-left;
      right: $transfer-body-search-wrapper-right;
      @if $--size-switch == yes {
        padding: $--size-offset-base;
      }
    }

    &-search {
      position: relative;
    }

    &-footer {
      border: 1px solid $border-color-base;
      padding: $transfer-footer-padding;
      border-top: none;
      border-radius: 0 0 $border-radius-base $border-radius-base;
      bottom: $transfer-footer-bottom;
      left: $transfer-footer-left;
      right: $transfer-footer-right;
      // min-height: 35px;
      @include clearfix();
      @include theme-border-color($__transfer-footer_border-color);
      @include theme-font-color($__transfer-footer_font-color);
    }
  }

  &-operation {
    display: inline-block;
    overflow: hidden;
    margin: $transfer-operation-margin;
    vertical-align: middle;

    .#{$btn-prefix-cls} {
      display: block;
      min-width: $btn-circle-size-small;
      margin-bottom: $transfer-operation-btn-margin-bottom;

      &:last-child {
        margin-bottom: $transfer-operation-btn-last-child-margin-bottom;
      }
    }
  }

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

@include select-item($transfer-prefix-cls, $transfer-item-prefix-cls);
.#{$transfer-item-prefix-cls} {
  @if $--size-switch == yes {
    @include computed-height($--size-height-base, 0);
    font-size: $--size-font-size-base;
  }
  &-disabled {
    color: $transfer-list-content-item-disabled-color;
    cursor: $cursor-disabled;
    @include theme-font-color($__transfer-item_disabled_font-color);

    &:hover {
      color: $transfer-list-content-item-disabled-hover-color;
      background-color: $transfer-item-hover-background-color;
      cursor: $cursor-disabled;
      @include theme-font-color($__transfer-item_disabled-hover_font-color);
      @include theme-background-color($__transfer-item_disabled-hover_background-color);
    }
  }
}
.#{$transfer-item-prefix-cls}:hover {
  background: $transfer-list-content-item-hover-color;
  @include theme-background-color($__transfer-item_hover_background-color);
}
.#{$transfer-item-prefix-cls}-disabled:hover {
  @include theme-background-color($__transfer-item_disabled-hover_background-color);
}