@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use '@components/transfer/style/token.scss' as *;
@use '@style/mixins/index.scss' as *;

$transfer-prefix-cls: string.unquote('#{theme.$prefix}-transfer');

.#{$transfer-prefix-cls} {
  display: flex;
  align-items: center;

  &-view {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: $transfer-width;
    height: $transfer-height;
    border: $transfer-border-width solid $transfer-border-color;
    border-radius: $transfer-border-radius;

    &-search {
      padding: $transfer-search-padding-top $transfer-search-padding-right
        $transfer-search-padding-bottom $transfer-search-padding-left;
    }

    &-list {
      flex: 1;
    }

    &-custom-list {
      flex: 1;
      overflow: auto;
    }

    &-header {
      display: flex;
      align-items: center;
      padding: 0 $transfer-item-padding-horizontal;
    }

    &-header > *:first-child {
      flex: 1;

      @include text-ellipsis();

      &:not(:last-child) {
        margin-right: 8px;
      }
    }

    &-header {
      height: $transfer-height-title;
      color: $transfer-color-text-header;
      font-weight: $transfer-font-weight-header;
      font-size: $transfer-font-size-header;
      line-height: $transfer-height-title;
      background-color: $transfer-color-bg-header;

      &-title {
        display: flex;
        align-items: center;

        .#{theme.$prefix}-checkbox {
          @include text-ellipsis();

          font-size: inherit;

          &-text {
            color: inherit;
          }
          // fix the title in checkbox-label ellipsis not work
          &-label {
            @include text-ellipsis();
          }
        }
        // fix simple mode the title  ellipsis not work
        &-simple {
          @include text-ellipsis();
        }
      }

      &-clear-btn {
        color: $transfer-color-icon;
        font-size: $transfer-font-size-icon;
        cursor: pointer;

        &:hover::before {
          background-color: $transfer-color-bg-icon;
        }
      }

      &-count {
        margin-right: 2px;
        color: $transfer-color-text-header-unit;
        font-weight: normal;
        font-size: $transfer-font-size-header-unit;
      }
    }

    &-body {
      flex: 1 1 auto;
      overflow: hidden;

      .#{$transfer-prefix-cls}-view-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    }

    .#{theme.$prefix}-scrollbar {
      height: 100%;

      &-container {
        height: 100%;
        overflow: auto;
      }
    }

    .#{theme.$prefix}-list {
      border-radius: 0;

      &-footer {
        position: relative;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        height: $transfer-height-footer;
        padding: 0 $transfer-padding-horizontal-footer;
      }

      .#{theme.$prefix}-pagination {
        position: absolute;
        top: 50%;
        right: $transfer-padding-horizontal-footer;
        margin: 0;
        transform: translateY(-50%);

        &-jumper-input {
          width: $transfer-pagination-width-input;
        }

        &-jumper-separator {
          padding: 0 $transfer-pagination-gap-separator;
        }
      }
    }

    .#{theme.$prefix}-checkbox {
      padding-left: 6px;

      &-wrapper {
        display: inline;
      }

      .#{theme.$prefix}-icon-hover:hover::before {
        background-color: $transfer-color-bg-icon;
      }
    }
  }

  &-list-item {
    position: relative;
    display: flex;
    align-items: center;
    height: $transfer-item-height;
    padding: 0 $transfer-item-padding-horizontal;
    color: $transfer-item-color_default;
    line-height: $transfer-item-height;
    list-style: none;
    background-color: $transfer-item-color-bg_default;
    cursor: default;

    &-content {
      font-size: $transfer-item-font-size;

      @include text-ellipsis();
    }

    &-checkbox {
      .#{theme.$prefix}-checkbox-label {
        @include text-ellipsis();
      }
    }

    &-disabled {
      color: $transfer-item-color_disabled;
      background-color: $transfer-item-color-bg_disabled;
      cursor: not-allowed;
    }

    &:not(#{&}-disabled):hover {
      color: $transfer-item-color_hover;
      background-color: $transfer-item-color-bg_hover;
    }

    .#{theme.$prefix}-checkbox {
      width: 100%;

      &-text {
        color: inherit;
      }
    }

    &-remove-btn {
      margin-left: auto;
      color: $transfer-color-icon;
      font-size: $transfer-font-size-icon;
      cursor: pointer;

      &:hover::before {
        background-color: $transfer-color-bg-icon;
      }
    }

    // 拖动样式
    &-draggable::before {
      position: absolute;
      right: 0;
      left: 0;
      display: block;
      height: $transfer-item-draggable-height-gap;
      border-radius: ($transfer-item-draggable-height-gap * 0.5);
      content: '';
    }

    &-gap-bottom::before {
      bottom: -$transfer-item-draggable-height-gap;
      background-color: $transfer-item-draggable-color-bg-gap;
    }

    &-gap-top::before {
      top: -$transfer-item-draggable-height-gap;
      background-color: $transfer-item-draggable-color-bg-gap;
    }

    &-dragging {
      color: $transfer-item-draggable-color_dragging !important;
      background-color: $transfer-item-draggable-color-bg_dragging !important;
    }

    &-dragged {
      animation: #{theme.$prefix}-transfer-drag-item-blink 0.4s;
      animation-timing-function: theme.$transition-timing-function-standard;
    }
  }

  &-operations {
    padding: 0 $transfer-operation-padding-horizontal;

    .#{theme.$prefix}-btn {
      display: block;

      &:last-child {
        margin-top: $transfer-operation-gap-buttons;
      }
    }

    &-words {
      .#{theme.$prefix}-btn {
        width: 100%;
        padding: 0 12px;
        text-align: left;
      }
    }
  }

  &-simple {
    .#{$transfer-prefix-cls}-view-source {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .#{$transfer-prefix-cls}-view-target {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  &-disabled {
    .#{$transfer-prefix-cls}-view-header {
      color: $transfer-item-color_disabled;
    }
  }
}

@keyframes #{theme.$prefix}-transfer-drag-item-blink {
  0% {
    background-color: $transfer-item-draggable-color_blink;
  }

  100% {
    background-color: transparent;
  }
}