//请再 pandora-ui/src/components/styles/components.less 中引入该文件

.@{ns}-Selection {
  > .@{ns}-Checkbox {
    display: block;
    line-height: @Form-input-lineHeight;
    font-size: @Form-input-fontSize;
    padding: calc((@Form-input-height - @Form-input-lineHeight * @Form-input-fontSize) / 2)
      @gap-base calc((@Form-input-height - @Form-input-lineHeight * @Form-input-fontSize) / 2)
      calc(@gap-base + @Checkbox-size);
  }

  &--inline > .@{ns}-Checkbox {
    display: inline-block;
  }

  &-addBtn {
    display: block;
    cursor: pointer;

    &:hover {
      text-decoration: none;
    }

    > svg {
      width: 14px;
      height: 14px;
      margin-right: @gap-base;
    }
  }
}

.@{ns}-GroupedSelection {
  max-height: 300px;
  overflow: auto;
  user-select: none;
  padding: @spacing-2 0;

  &-group > &-itemLabel {
    padding: @spacing-2 @gap-base;
    color: var(--color-text-3);
  }

  &-item {
    display: flex;
    // height: @Form-input-height);
    line-height: @Form-input-lineHeight;
    font-size: @Form-input-fontSize;
    padding: calc((@Form-input-height - @Form-input-lineHeight * @Form-input-fontSize) / 2) @size-1;
    flex-direction: row;

    > .@{ns}-Checkbox {
      margin-right: 10px;
    }
    cursor: pointer;
    user-select: none;

    &.is-active {
      background: @Form-select-menu-onActive-bg;
    }

    &:hover {
      background: @Tree-item-onHover-bg;

      i {
        // border: 1px solid @menu-active-color;
      }
    }

    &.is-disabled {
      pointer-events: none;
      color: var(--color-text-4);
    }
  }

  &-group > &-items > &-item {
    padding-left: calc(@gap-base * 2);
  }

  &-itemLabel {
    flex-grow: 1;
    overflow: hidden;

    span {
      vertical-align: middle;
      white-space: nowrap; // 避免在条件组合中折行
    }
  }

  &-placeholder {
    .checkboxes-placeholder();
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.@{ns}-TableSelection {
  .@{ns}-Table-content {
    border: none;
    border-top: @Table-borderWidth solid @Table-borderColor;
    .@{ns}-Table-table{
      width: auto;
    }
  }

  .@{ns}-Table-table > thead > tr > th,
  .@{ns}-Table-table > tbody > tr > td {
    font-size: @font-size-sm;
    padding: @spacing-2 @gap-md;
    // padding-top: @spacing-2;
    // padding-bottom: 6px;
    vertical-align: middle;
  }

  .@{ns}-Table-table > thead > tr > th {
    // padding-top: 6px;
    // padding: @select-table-header-paddingTop
    // var(--select-table-header-paddingLeft)
    // var(--select-table-header-paddingBottom)
    // var(--select-table-header-paddingLeft);
  }

  .@{ns}-Table-table > thead > tr > th:first-child,
  .@{ns}-Table-table > tbody > tr > td:first-child {
    padding-left: 10px;
    // padding-right: 0;
  }

  .@{ns}-Table-table > thead > tr > th:last-child,
  .@{ns}-Table-table > tbody > tr > td:last-child {
    padding-right: @gap-md;
  }

  .@{ns}-Table-table > tbody > tr.is-active {
    color: @Form-select-menu-onActive-color;
    background: @Form-select-menu-onActive-bg;
  }
}

.@{ns}-TreeSelection {
  .@{ns}-Table-expandBtn {
    color: @icon-color;
    margin-right: @spacing-2;
  }

  &-sublist {
    position: relative;
    margin: 0 0 0 35px;
    display: none;
  }

  &-item {
    position: relative;
  }
  &-item.is-expanded > &-sublist {
    display: block;
  }

  &-item:not(:last-child) > &-sublist:before {
    bottom: 0;
  }

  &-item.is-disabled {
    color: var(--color-text-4);
  }

  &-itemInner {
    display: flex;
    align-items: center;
    line-height: @Tree-itemHeight;
    position: relative;
    font-size: @Form-input-fontSize;
    padding: 0 @size-1;
    flex-direction: row;

    > .@{ns}-Checkbox {
      margin-right: @size-1;
    }
    cursor: pointer;
    user-select: none;

    &:hover {
      background: @Tree-item-onHover-bg;
    }

    &.is-active {
      color: @Form-select-menu-onActive-color;
    }

    &.is-disabled {
      pointer-events: none;
      color: var(--color-text-4);
    }

    .@{ns}-TreeSelection-itemLabel {
      margin-left: @spacing-2;
    }
  }

  &-itemLabel {
    flex-grow: 1;

    span {
      vertical-align: middle;
    }
  }

  &-placeholder {
    .checkboxes-placeholder();
  }
}

.@{ns}-ChainedSelection {
  display: flex;
  flex-direction: row;
  min-height: 100%;

  &-col {
    flex-grow: 1;
    min-width: 150px;
  }

  &-col:not(:last-child) {
    border-right: 1px solid var(--color-border);
  }

  &-subTitle {
    font-size: @font-size-sm;
    padding: @spacing-2 @spacing-2;
    color: var(--color-text-4);
  }

  &-item {
    display: flex;
    // height: @Form-input-height);
    line-height: @Form-input-lineHeight;
    font-size: @Form-input-fontSize;
    padding: calc((@Form-input-height - @Form-input-lineHeight * @Form-input-fontSize) / 2) @size-1;
    flex-direction: row;

    > .@{ns}-Checkbox {
      margin-right: 0;
    }
    cursor: pointer;
    user-select: none;

    &.is-active {
      color: @Form-select-menu-onActive-color;
      background: @Form-select-menu-onActive-bg;
    }

    &:hover {
      background: @Tree-item-onHover-bg;
    }

    &.is-disabled {
      pointer-events: none;
      color: var(--color-text-4);
    }
  }

  &-itemLabel {
    flex-grow: 1;

    span {
      margin-left: 10px;
      vertical-align: middle;
    }
  }

  &-placeholder {
    .checkboxes-placeholder();
  }
}

.@{ns}-AssociatedSelection {
  display: flex;
  flex-direction: row;

  &-left,
  &-right {
    flex-grow: 1;
    width: 0;
    min-height: 200px;
    max-height: 400px;
    overflow: auto;
  }

  &-left {
    border-right: 1px solid var(--color-border);
  }

  &-reload {
    text-align: center;
    color: var(--primary-5);
    margin: 20px 0 0;

    &.is-clickable {
      cursor: pointer;
    }
  }

  &-box {
    line-height: @Form-input-lineHeight;
    font-size: @font-size-sm;
    color: var(--color-text-4);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    > p {
      text-align: center;
      margin: 10px 0 20px;
      color: var(--color-text-4);
    }
  }
}

.@{ns}-ResultTreeList {
  height: 100%;
  width: 100%;
}

.@{ns}-ResultTableList {
  height: 100%;
  width: 100%;

  &-close-btn {
    float: right;
    cursor: pointer;
  }
}