@import "mixins/mixins";
@import "checkbox";
@import "tag";
@import "common/var";

// 筛选过滤
@include b(table-filter) {
  border-radius: 2px;
  background-color: $--table-bg-color;
  box-shadow: $--table-box-shadow;
  box-sizing: border-box;
  position: relative;

  &[x-placement^="bottom-start"] {
    margin-top: -6px;
    transform: translateX(-5px);
    &::before {
      content: "";
      border: $--table-arrow-size solid transparent;
      position: absolute;
      left: $--table-arrow-offset;
      top: -$--table-arrow-size * 2;
      width: 0;
      height: 0;
      border-bottom-color: $--table-bg-color;
    }
  }
  &[x-placement^="bottom-end"] {
    margin-top: -6px;
    transform: translateX(6px);
    &::before {
      content: "";
      border: $--table-arrow-size solid transparent;
      position: absolute;
      right: $--table-arrow-offset;
      top: -$--table-arrow-size * 2;
      width: 0;
      height: 0;
      border-bottom-color: $--table-bg-color;
    }
  }
  &[x-placement^="top-start"] {
    margin-bottom: -6px;
    transform: translateX(-5px);
    &::before {
      content: "";
      border: $--table-arrow-size solid transparent;
      position: absolute;
      left: $--table-arrow-offset;
      bottom: -$--table-arrow-size * 2;
      width: 0;
      height: 0;
      border-top-color: $--table-bg-color;
    }
  }
  &[x-placement^="top-end"] {
    margin-bottom: -6px;
    transform: translateX(6px);
    &::before {
      content: "";
      border: $--table-arrow-size solid transparent;
      position: absolute;
      right: $--table-arrow-offset;
      bottom: -$--table-arrow-size * 2;
      width: 0;
      height: 0;
      border-top-color: $--table-bg-color;
    }
  }
  /** used for dropdown mode */
  @include e(list) {
    padding: 5px 0;
    margin: 0;
    list-style: none;
    min-width: 100px;
  }

  @include e(list-item) {
    line-height: 36px;
    padding: 0 10px;
    cursor: pointer;
    font-size: $--table-font-size;

    @include when(active) {
      background-color: $--table-active-color;
      color: $--table-bg-color;
    }
  }

  @include e(content) {
    min-width: 100px;
  }

  @include e(bottom) {
    border-top: $--table-border;
    padding: 8px 10px;
    line-height: $--table-font-size-small;
    button {
      background: transparent;
      border: none;
      color: $--table-font-color;
      cursor: pointer;
      font-size: $--table-font-size-small;
      line-height: $--table-font-size-small;

      padding: 0;
      padding-right: 8px;

      &:first-child {
        color: $--table-active-color;
      }
      &:hover {
        color: $--table-hover-color;
      }

      &:focus {
        outline: none;
      }

      &.is-disabled {
        color: $--table-font-color-disabled;
        cursor: not-allowed;
      }
    }
  }

  @include e(wrap) {
    max-height: 280px;
  }

  @include e(checkbox-group) {
    padding: 10px;
    label.el-checkbox {
      display: block;
      margin: 0;
      margin-bottom: 7px;
      .el-checkbox__label {
        padding-left: 10px;
      }
    }

    .el-checkbox:last-child {
      margin-bottom: 0;
    }
  }
}