@import './token.less';

.checkboxes-placeholder {
  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) @gap-base;
  color: var(--color-text-4);
}


.@{ns}-TabsTransfer {
  .@{ns}-Transfer2-title {
    height: 40px;
    flex-shrink: 0;
  }
  &-tabs {
    .@{ns}-Tabs-linksContainer {
      height: 100%;

      background-color: @TabsTransfer-title-bg;
    }
  }

  &-search {
    margin: @gap-base @gap-base;
    .@{ns}-InputBox {
      border: 1px solid @TabsTransfer-border-color;
    }
  }

  .@{ns}-Transfer2-result {
    .@{ns}-Transfer2-title {
      height: 40px;
      line-height: 40px;
    }
  }

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

  &-tab {
    padding: 0;
    overflow: auto;
  }

  &-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;

    > .@{ns}-Tabs-links {
      border-top: 0 none;
      padding: 5px 0 0 5px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;

      > .@{ns}-Tabs-link > a:first-child {
        font-size: 12px;
        padding: 7px 8px;
      }

      .@{ns}-TabsTransfer-tabsMid {
        flex-grow: 1;
      }

      > .@{ns}-SearchBox {
        margin: -5px 5px 0 10px;

        &.is-active {
          width: 150px;
          margin-right: 10px;
          padding-left: 10px;
        }
      }
    }

    > .@{ns}-Tabs-content {
      flex-grow: 1;
      min-height: 0;
      position: relative;
      padding: 5px 0 0;

      > .@{ns}-Tabs-pane {
        position: relative;
        height: 100%;
        overflow: hidden;

        &.is-active {
          display: flex;
          flex-direction: column;

          > .@{ns}-Transfer2-selection {
            flex-grow: 1;
            max-height: 100%;
            overflow: auto;
          }
        }
      }
    }

    &-select{
      padding: 6px 10px;
      display: flex;
      align-items: center;
      background: @Transfer2-title-bg;

      .@{ns}-Select{
        width: 200px;
      }
    }
  }
}