@import './token.less';

.@{ns}-List2 {
  height: 100%;
  min-width: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  &.is-inline{
    .@{ns}-List2-item{
      display: inline-flex;
      margin: 4px;
      vertical-align: middle;
      background-color: @white;
    }
  }
  .@{ns}-Checkbox{
    margin-right: @gap-small;
  }
  &-title {
    height: @Form-input-height;
    background: @Table-thead-bg;
    font-size: @Form-input-fontSize;
    padding: calc((@Form-input-height - @Form-input-lineHeight * @Form-input-fontSize) / 2) @gap-sm;
  }

  &-placeholder {
    color: @Form-input-placeholderColor;
    text-align: center;
    width: 100%;
    flex-basis: @Form-input-height;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: @Form-input-fontSize;
  }

  &-items {
    flex-grow: 1;
  }

  &-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: @Form-input-height;
    line-height: @Form-input-lineHeight;
    font-size: @Form-input-fontSize;
    padding: 0 8px;
    background-color: @white;
    // margin: @gap-sm @gap-sm;
    // background: #fff;
    // padding: 0 @gap-sm;
    > label {
      flex-basis: 50px;
      flex-grow: 1;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      padding: calc((@Form-input-height - @Form-input-lineHeight * @Form-input-fontSize) / 2)
        @gap-sm;
    }
    &:hover {
      background: @Tree-item-onHover-bg;
    }

    > .@{ns}-Icon-dragbar {
      width: @gap-lg;
      position: relative;
      left: calc(@gap-xs * -1);
      color: @icon-color;
      cursor: move;
    }

    &--dragging {
      > * {
        opacity: 0.2;
      }
    }
  }

  &-delBtn {
    color: @icon-color;
    cursor: pointer;

    &:hover {
      color: @icon-onHover-color;
    }

    > svg {
      width: 12px;
      height: 12px;
    }
  }
}