@use '../../../../style/themes/default.scss' as *;
@use '../../../../style/util.scss' as *;
@use '../../../../ele-virtual-table/style/css-var.scss' as *;
@use './css-var.scss' as *;

@include set-el-table-filter-var($ele);

/* TableFilter */
.el-table-filter {
  .el-table-filter__list {
    padding: eleVar('table-filter', 'padding');
    max-height: eleVar('table-filter', 'max-height');
    box-sizing: border-box;
    overflow: auto;
  }

  .el-table-filter__list-item {
    color: eleVar('table-filter', 'item-color');
    height: eleVar('table-filter', 'item-height');
    line-height: eleVar('table-filter', 'item-height');
    padding: eleVar('table-filter', 'item-padding');
    border-radius: eleVar('table-filter', 'item-radius');
    transition: (color $ele-transition, background-color $ele-transition);
    box-sizing: border-box;

    & + .el-table-filter__list-item {
      margin-top: eleVar('table-filter', 'item-margin');
    }

    &:hover {
      color: eleVar('table-filter', 'item-hover-color');
      background: eleVar('table-filter', 'item-hover-bg');
    }

    &.is-active {
      color: eleVar('table-filter', 'item-active-color');
      background: eleVar('table-filter', 'item-active-bg');
      font-weight: eleVar('table-filter', 'item-active-font-weight');

      &:hover {
        background: eleVar('table-filter', 'item-active-hover-bg');
      }
    }
  }

  .el-table-filter__wrap {
    max-height: eleVar('table-filter', 'max-height');
  }

  @include filter-checkbox-style($ele-transition);

  .el-table-filter__bottom {
    padding: eleVar('table-filter', 'footer-padding');
    border-top: eleVar('table-filter', 'footer-border');
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    & > button {
      height: 24px;
      line-height: 24px;
      padding: 0 11px;
      font-size: 12px;
      color: elVar('text-color', 'regular');
      border-radius: calc(#{elVar('border-radius', 'base')} - 1px);
      transition: (color $ele-transition, background-color $ele-transition);
      box-sizing: border-box;

      &:hover {
        background: elVar('fill-color', 'light');
      }

      &:active {
        background: elVar('fill-color');
      }

      &:first-child {
        order: 2;
        color: #fff;
        background: elVar('color-primary');
        margin-left: 4px;

        &:hover {
          background: elVar('color-primary', 'light-3');
        }

        &:active {
          background: elVar('color-primary', 'dark-2');
        }

        &.is-disabled {
          background: elVar('color-primary', 'light-5');
        }
      }
    }
  }
}