@import "mixins/bem-mixin";
@import "common/variable";

@mixin table-border($direction) {
  border-#{$direction}: 1px solid $forth-level-color;
}

@include b(table) {
  width: 100%;
  @include e(head) {
    background: $fifth-level-color;
    @include e(row) {
      @include e(cell) {
        padding: 8px 5px;
        text-align: left;
        @include table-border(bottom);
        @include table-border(top);
        &:first-child {
          border-left: 1px solid $forth-level-color;
        }
        &:last-child {
          border-right: 1px solid $forth-level-color;
        }
      }
      @include e(checkbox) {
        width: 30px;
        @include table-border(bottom);
        @include table-border(top);
        border-left: 1px solid $forth-level-color;
      }
    }
  }
  @include e(body) {
    @include e(row) {
      @include pseudo(hover) {
        background: $fifth-level-color;
      }
      @include e(checkbox) {
        width: 30px;
        text-align: center;
        border-left: 1px solid $forth-level-color;
        border-bottom: 1px solid $forth-level-color;
      }
      @include e(cell) {
        padding: 5px;
        @include table-border(bottom);
        &:first-child {
          @include table-border(left);
        }
        &:last-child {
          @include table-border(right);
        }
      }
    }
  }
  @include e(foot) {
    @include e(row) {
      @include e(cell) {
        @include e(pagination) {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 5px 0 0 0;
          @include e(size) {
            width: 100px;
          }
          @include e(page) {
            display: flex;
            margin: 0;
            @include e(item) {
              list-style: none;
              padding: 5px 15px;
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
              @include pseudo(hover) {
                background: $fifth-level-color;
              }
            }
          }
          @include e(info) {
            text-align: center;
          }
        }
      }
    }
  }
}

@include b(table-box) {
  width: 100%;
  position: relative;
  @include e(loading) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #ffffffe6;
    @include e(icon) {
      width: 50px;
      height: 50px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      border-radius: 30px;
      border: {
        left: 3px solid #308ee0;
        right: 3px solid;
        top: 3px solid;
        bottom: 3px solid;
      }
      border-right-color: #eee;
      border-top-color: #eee;
      border-bottom-color: #eee;
      animation: lanaya-table-box__loading__icon 5s infinite linear;
    }
  }
}

@keyframes lanaya-table-box__loading__icon {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}