@import '../../../../lib/style/themes/default';

@modal-prefix-cls: ~'@{c7n-pro-prefix}-modal';
@table-prefix-cls: ~'@{c7n-pro-prefix}-table';
@select-prefix-cls: ~'@{c7n-pro-prefix}-select';
@progress-prefix-cls: ~'@{c7n-prefix}-progress';
@lov-prefix-cls: ~'@{select-prefix-cls}-lov';
@lov-select-prefix-cls: ~'@{modal-prefix-cls}-selection-list-below';
@drawer-prefix-cls: ~'@{modal-prefix-cls}-selection-list';
@spin-prefix-cls: ~'@{c7n-prefix}-spin-nested-loading';
@drawer-list-padding: 0.2rem;


.@{lov-prefix-cls}-custom-drawer {
  transition: width @animation-duration-slow @ease-in-out;

  .@{modal-prefix-cls}-header-buttons {
    z-index: 10;
  }

  .@{modal-prefix-cls}-footer {
    position: relative;
    z-index: 10;
  }
}

.@{modal-prefix-cls} {
  &-body {
    .@{table-prefix-cls} {
      &-professional-query-bar {
        &-button {
          padding: 0.1rem 0 0.1rem 0.4rem;

          span {
            vertical-align: middle;
          }
        }
      }
    }
  }

  .@{lov-prefix-cls}-selection-wrapper &-body {
    max-height: calc(100vh - 1.2rem - 1.1rem);
  }

  .@{drawer-prefix-cls}-container {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 3rem;
    height: 100%;
    padding-top: @drawer-list-padding;
    padding-bottom: @drawer-list-padding;
    background: @lov-selection-list-bg;
    border-left: @border-width-base @border-style-base @border-color-base;

    .@{drawer-prefix-cls}-intro {
      height: 0.18rem;
      margin-bottom: 0.1rem;
      padding-right: @drawer-list-padding;
      padding-left: @drawer-list-padding;
      color: @text-color-secondary;
      font-size: @font-size-sm;
      line-height: 0.18rem;

      >b {
        margin: 0 0.02rem;
        color: @primary-color;
      }
    }

    .@{drawer-prefix-cls}-list {
      height: calc(100% - 0.1rem);
      padding: 0;
      overflow-y: auto;

      .@{drawer-prefix-cls}-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 0.38rem;
        padding-right: @drawer-list-padding;
        padding-left: @drawer-list-padding;
        font-size: 0.14rem;
        transition: background-color @animation-duration-slow;

        &:hover {
          background-color: rgba(0, 0, 0, 0.05);
        }

        &:first-child {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        &>.icon-cancel {
          width: 0.16rem;
          color: rgba(0, 0, 0, 0.25);
          cursor: pointer;
        }
      }
    }

    &+div {
      width: calc(100% - 2.8rem);

      &>.@{table-prefix-cls}-wrapper {
        width: calc(100% - 0.15rem);
      }
    }
  }

  .@{lov-select-prefix-cls} {
    &-intro {
      margin: 0.1rem 0;
      padding-left: 0.08rem;
      font-size: 0.14rem;
      border-left: 0.03rem solid @primary-color;

      & b {
        font-weight: 500;
      }
    }

    &-list {
      display: flex;
      flex-wrap: wrap;
      max-height: 0.8rem;
      padding-left: unset;
      overflow: auto;
      list-style: none;
    }

    &-item {
      margin-bottom: 0.04rem;
    }
  }
}

.@{lov-prefix-cls} {
  &-spin .@{progress-prefix-cls}-inner {
    width: 0.2rem;
    height: 0.2rem;
    margin-right: 0.03rem;
  }

  &-popup {
    max-width: 5rem;

    .@{table-prefix-cls} {
      border-top: none;

      &-wrapper {
        min-width: 3.5rem;
        max-width: 100%;
      }

      &-pagination {
        margin: 0;
        padding: .02rem .16rem;

        .@{c7n-pro-prefix}-pagination-page-info {
          float: left;
          margin: 0;
          letter-spacing: 0;
        }
      }
    }

    .@{table-prefix-cls}-thead .@{table-prefix-cls}-cell {
      background-color: transparent;
    }

    .@{c7n-pro-prefix}-btn+.@{c7n-pro-prefix}-btn:not(.@{c7n-pro-prefix}-btn-block) {
      margin-left: 0;
    }
  }

  &-search-option {
    &-divide {
      width: 0.01rem;
      height: 0.12rem;
      margin-right: .03rem;
      background-color: @border-color-base;
    }

    .@{c7n-pro-prefix}-select {
      max-width: .66rem;
      text-overflow: ellipsis;
    }
  }
}