@import (css) '~ag-grid-community/styles/ag-grid.css';
@import (css) '~ag-grid-community/styles/ag-theme-material.css';
@import '../../../style/themes/index';
@import '../../../style/mixins/index';

@table-prefix-cls: ~'@{fc-prefix}-table';
/** Table */
@table-font-weight-base: 400;
@table-font-weight-font: 600;
@table-font-weight-icon: 700;
@table-font-icon-size: @font-size-base + 2px;
@table-left-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@table-top-shadow: 0px -4px 6px 0px rgba(224, 225, 233, 0.6);
@table-no-padding: 0 0;
@table-font-family: Microsoft YaHei;
@table-pagination-margin: 1.25 * @unit;

.@{table-prefix-cls} {
  &-filterwrap {
    width: 100%;
  }

  &-header {
    &-filter {
      // padding-top: 2 * @unit;
      width: calc(100% - 48px);
      margin-left: 24px;
      display: flex;

      &-form {
        height: 33px;
        overflow: hidden;
        float: left;
        flex-grow: 1;
        margin-bottom: 2 * @unit;

        &-item {
          width: calc(25% - @padding-md);
        }
      }

      &-expand {
        float: right;
        color: @black-8;
        line-height: 4 * @unit;
        font-size: @font-size-base;
        white-space: nowrap;
        user-select: none;

        &.halfLength {
          line-height: 2.75 * @unit;
        }

        &-span {
          cursor: pointer;
        }
      }
    }

    &-filterwrap {
      width: calc(100% - 48px);
      margin-left: 24px;
      display: flex;

      // padding-top: 2 * @unit;
      &-form {
        height: 33px;
        overflow: hidden;
        float: left;
        flex-grow: 1;

        &-item {
          width: calc(25% - @padding-md);
        }
      }

      &-form-space {
        margin-bottom: 1 * @unit;
      }

      &-expand {
        float: right;
        color: @black-8;
        line-height: 4 * @unit;
        font-size: @font-size-base;
        white-space: nowrap;
        margin-left: 12px;
        user-select: none;

        &.halfLength {
          line-height: 2.75 * @unit;
        }

        &-span {
          cursor: pointer;
        }
      }
    }

    &-filterwrap {
      width: calc(100% - 48px);
      float: left;
      justify-content: space-between;
      padding-top: 2 * @unit;

      &-form {
        height: 33px;
        overflow: hidden;
        float: right;
        text-align: right;
        // max-width: 50%;
        flex: 1;

        &-item {
          width: calc(50% - @padding-md);
          max-width: 300px;
          margin-left: 2 * @unit;
          margin-right: 0 !important;
        }
      }

      &-form-slot {
        height: 33px;
        overflow: hidden;
        float: right;
        flex: 1;
      }

      &-form-operate {
        display: flex;
        flex: 1;
        justify-content: flex-end;
      }

      &-advance {
        overflow: hidden;
        width: calc(100% - 48px);
        margin-left: 24px;
        border: 1px solid @black-3;
        border-radius: 2px;
        padding: 8px;
        padding-bottom: 0;
        justify-content: space-between;

        &:hover {
          border-color: @blue-6;
        }

        &-form-item {
          width: calc(25% - 16px);
          margin: @padding-xs;
          margin-right: 8px !important;
          margin-bottom: 8px !important;

          &-button {
            width: calc(25% - 16px);
            margin: @padding-xs;
            margin-right: 8px !important;
            margin-bottom: 8px !important;
          }
        }

        &-form-item-withLinkage {
          width: calc(50% - 16px);
          margin: @padding-xs;
          margin-right: 8px !important;
          margin-bottom: 8px !important;
        }

        &-form-item-special {
          width: calc(50% - 16px);
          margin: @padding-xs;
          margin-right: 8px !important;
          margin-bottom: 8px !important;
        }

        &-search {
          margin-right: @margin-sm;

          // margin-left: @margin-sm;
          &-button {
            line-height: 22px;
          }
        }
      }

      &-expand {
        float: right;
        color: @black-8;
        line-height: 4 * @unit;
        font-size: @font-size-base;
        white-space: nowrap;
        user-select: none;

        &.halfLength {
          line-height: 2.75 * @unit;
        }

        &-span {
          cursor: pointer;
          color: @blue-6;

          &:hover {
            color: @blue-5;
          }

          &:active {
            color: @blue-7;
          }
        }
      }
    }
  }
}