@import "../lib.less";

.@{veui-prefix}-transfer {
  .clearfix();
  display: flex;
  font-size: @dls-transfer-font-size-m;

  &-selected-panel {
    margin-left: @dls-transfer-panel-spacing;
  }

  .@{veui-prefix}-tree {
    & &-item-check {
      padding-left: @dls-transfer-item-content-spacing;
    }

    & &-item {
      color: @dls-transfer-item-font-color;

      &::before {
        background-color: @dls-transfer-item-background-color;
      }

      &:hover {
        color: @dls-transfer-item-font-color-hover;

        &::before {
          background-color: @dls-transfer-item-background-color-hover;
        }
      }

      &.focus-visible,
      &[data-focus-visible-added] {
        color: @dls-transfer-item-font-color-focus;

        &::before {
          background-color: @dls-transfer-item-background-color-focus;
        }
      }

      &:active {
        color: @dls-transfer-item-font-color-active;

        &::before {
          background-color: @dls-transfer-item-background-color-active;
        }
      }
    }
  }

  &-select-all,
  &-remove-all {
    margin-left: auto;
  }

  &-selected-flat {
    .@{veui-prefix}-tree-item-label {
      .ellipsis();
      padding-right: @dls-transfer-item-content-spacing;

      &:first-child {
        margin-left: 0;
      }
    }

    &-option-label {
      white-space: nowrap;
    }

    &-separator {
      flex-shrink: 0;
      .dls-icon-size(@dls-icon-size-aux);
      color: @dls-icon-color-aux;
    }

    &-separator,
    &-option-label {
      vertical-align: middle;
    }
  }

  // disabled 之后的样式
  &-disabled .@{veui-prefix}-tree-item {
    color: @dls-transfer-item-font-color-disabled;
    background-color: @dls-transfer-item-background-color-disabled;
  }

  &-disabled &-selected-flat-item {
    cursor: not-allowed;
  }

  &-disabled &-selected-flat-separator {
    color: @dls-icon-color-aux-disabled;
  }

  &[ui~="s"] {
    font-size: @dls-transfer-font-size-s;
  }
}