/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './token.less';

@filter-prefix-cls: ~'@{kd-prefix}-filter';
@filter-header-prefix-cls: ~'@{kd-prefix}-filter-header';
@filter-body-prefix-cls: ~'@{kd-prefix}-filter-body';

.@{filter-prefix-cls} {
  .@{filter-header-prefix-cls} {
    z-index: 1;
    display: flex;
    position: relative;
    align-items: flex-end;
    padding: 9px 124px 9px 0;

    &-title {
      white-space: nowrap;
      color: @filter-header-title-color;
      font-size: @filter-header-title-font-size;
    }

    &-condition {
      display: flex;
      flex: 1 1 auto;
      align-items: flex-end;
      margin: 0 8px 0 40px;

      &-label {
        padding-right: 8px;
        font-size: @filter-condition-label-font-size;
        white-space: nowrap;
        color: @filter-condition-label-color;
      }

      &-item-text {
        max-width: 224px;
        .ellipsis;
        display: block;
      }
    }

    &-search {
      min-width: 200px;
    }

    &-handle {
      .reset-component;
      position: absolute;
      right: 0;
      bottom: -1px;
      width: 100px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      color: @filter-handle-color;
      font-size: @filter-handle-font-size;
      cursor: pointer;
      user-select: none;
      border: 1px solid transparent;
      border-bottom: none;

      > i {
        transition: transform 0.2s linear;
      }

      &.spread {
        border-radius: 4px 4px 0 0;
        background-color: @filter-handle-spread-bg-color;
        border-color: @filter-handle-spread-border-color;

        > i {
          transform: rotate(180deg);
        }
      }
    }
  }
  .@{filter-body-prefix-cls} {
    position: relative;
    height: 0;
    overflow: hidden;

    &.spread {
      height: auto;
      overflow: visible;
      padding: 8px 20px;
      border-radius: 4px 0 4px 4px;
      background-color: @filter-body-bg-color;
      border: 1px solid @filter-body-border-color;
    }

    &-tabs {
      border-bottom: 1px solid @filter-body-tabs-border-color;

      &-item {
        padding: 10px 0;
        font-size: @filter-body-tabs-item-font-size;
        color: @filter-body-tabs-item-color;
        cursor: pointer;

        &:hover,
        &.active {
          color: @filter-body-tabs-item-active-color;
        }
      }

      &-split {
        width: 1px;
        height: 16px;
        background-color: @color-border-strong;
      }
    }

    &-conditions {
      display: none;

      &.active {
        display: block;
      }
    }

    &-condition {
      display: flex;
      font-size: @font-size-small;

      &:not(:last-child) {
        border-bottom: 1px solid @color-border-weak;
      }

      &-label {
        padding: 11px 0 10px;
        color: @color-text-third;
        line-height: 18px;
        width: @filter-body-condition-label-width;
      }

      &-options {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        flex: 1;
        max-height: 64px;
        margin-left: 24px;
        padding: 8px 0 4px;
        overflow: auto;
      }

      &-option {
        margin-bottom: 4px;
        padding: 0 12px;
        color: @color-text-secondary;
        vertical-align: middle;
        line-height: 22px;
        font-size: @font-size-small;
        border-radius: @radius-border;
        border: 1px solid transparent;
        cursor: pointer;
        white-space: nowrap;
        max-width: @filter-body-condition-option-max-width;
        overflow: hidden;
        display: inline-block;
        text-overflow: ellipsis;

        &:not(:last-child) {
          margin-right: 24px;
        }

        &.active {
          color: @ongoing-color;
          border-color: @ongoing-color;
          background-color: @color-background;
        }

        &-customer {
          margin-left: -20px;
        }
      }

      &-addition {
        margin-left: 24px;
        line-height: 40px;
      }
    }

    &-scheme {
      display: none;

      &.active {
        display: block;
      }

      > li {
        position: relative;
        display: flex;
        line-height: 40px;
      }

      &-label {
        width: 96px;
        color: @color-text-third;
        font-size: @font-size-small;
        .ellipsis;
      }

      &-list {
        display: flex;
      }

      &-item {
        font-size: @font-size-small;
        color: @color-text-secondary;
        cursor: pointer;

        &:not(:last-child) {
          margin-right: 48px;
        }

        &.active {
          color: @ongoing-color;
        }
      }

      &-action {
        position: absolute;
        right: 0;
      }

      &-detail {
        list-style: none;
        > li {
          line-height: normal;
          padding: 7px 0 5px 0;
          color: @color-text-primary;
          font-size: @font-size-small;

          > span {
            display: inline-block;

            &:not(:last-child) {
              margin-right: 12px;
            }
          }
        }

        &-field {
          width: 100px;
        }

        &-operator {
          width: 140px;
        }

        &-value {
          width: 220px;
        }

        &-and {
          font-size: @font-size-middle;
        }

        &-delete {
          color: @color-disabled;
          font-size: @font-size-xx-large;
          cursor: pointer;

          &:hover {
            color: @color-error;
          }
        }
      }
    }
  }
}
.@{filter-prefix-cls}-rtl {
  direction: rtl;
  .@{filter-header-prefix-cls} {
    padding: 9px 0 9px 124px;
    &-handle {
      left: 0;
      right: auto;
    }
    &-condition {
      margin: 0 40px 0 8px;
      &-label {
        padding-left: 8px;
        padding-right: 0;
      }
    }
  }
  .@{filter-body-prefix-cls} {
    &.spread {
      border-radius: 4px 4px 4px 0;
    }
    &-condition {
      &-options {
        margin-right: 24px;
        margin-left: 0;
      }

      &-option {
        &:not(:last-child) {
          margin-left: 24px;
          margin-right: 0;
        }

        &.active {
          color: @ongoing-color;
          border-color: @ongoing-color;
          background-color: @color-background;
        }

        &-customer {
          margin-left: -20px;
        }
      }

      &-addition {
        margin-left: 24px;
        line-height: 40px;
      }
    }
    &-scheme {
      &-label {
        text-align: right;
      }
      &-action {
        left: 0;
      }
      &-item {
        &:not(:last-child) {
          margin-left: 48px;
          margin-right: 0;
        }
      }
      &-detail {
        > li {
          text-align: right;
            span:not(:last-child) {
              margin-left: 12px;
              margin-right: 0;
            }
          }
        }
      }
    }
  }
/*! rtl:end:ignore */