@import "../lib.less";

.@{veui-prefix}-filter-panel {
  overflow: hidden;
  border: 1px solid @dls-transfer-border-color;
  border-radius: @dls-transfer-border-radius-m;
  width: @dls-transfer-panel-width-m;

  &-title {
    display: flex;
    align-items: center;
    background: @dls-transfer-header-background-color;
    padding: 0 @dls-transfer-padding-x;
    color: @dls-transfer-header-font-color;
    font-weight: @dls-transfer-header-font-weight;
    font-size: @dls-transfer-font-size-m;
    margin: 0;
    height: @dls-transfer-header-height-m;

    .@{veui-prefix}-button {
      font-weight: @dls-transfer-header-button-font-weight;
    }
  }

  .@{veui-prefix}-search-box {
    margin: 0;
    width: 100%;
    flex: none;

    .@{veui-prefix}-input {
      .padding(_, @dls-transfer-padding-x);
    }
  }

  &-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    color: @dls-foreground-color-neutral-weak;
    height: @dls-transfer-item-height-m;
    padding-top: @dls-transfer-content-padding-y;
  }

  &-single-level {
    .@{veui-prefix}-tree.@{veui-prefix}-tree .@{veui-prefix}-tree-item-label {
      margin-left: 0;
    }
  }

  &-content {
    display: flex;
    flex-direction: column;
    border-top: 1px solid @dls-transfer-border-color;
    height: @dls-transfer-content-min-height-m;

    &-main {
      overflow-y: auto;
      position: relative;
      padding: @dls-transfer-content-padding-y 0;
    }
  }

  &[ui~="s"] {
    font-size: @dls-transfer-font-size-s;
    border-radius: @dls-transfer-border-radius-s;
    width: @dls-transfer-panel-width-s;

    .@{veui-prefix}-filter-panel {
      &-title {
        height: @dls-transfer-header-height-s;
        font-size: @dls-transfer-font-size-s;
      }

      &-no-data {
        height: @dls-transfer-item-height-s;
      }

      &-content {
        height: @dls-transfer-content-min-height-s;
      }
    }
  }
}