@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';

// rc-table
$m-table-prefix: 'cn-ui-m-mini-table';
$color-border: $m-color-bg;
$text-color: $m-color-text;
$font-size-base: $m-font-size-body-1;
$line-height: $m-font-lineheight-2;
$table-head-background-color: $m-color-bg-white;
$vertical-padding: $m-s-6;
$horizontal-padding: $m-s-6;
$border-width: $m-line;
$border: $border-width solid $m-color-bg-light;
$cell-padding: $vertical-padding $horizontal-padding;
$cell-margin: calc(-1 * $vertical-padding) calc(-1 * $horizontal-padding);
$box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.05);

@mixin tableBorder {
  border: $border;
  border-right: 0;
  border-bottom: 0;
}

.#{$hashClassName}.#{$m-table-prefix}-wrap {
  .#{$m-table-prefix} {
    position: relative;
    box-sizing: border-box;
    color: $text-color;
    font-size: $font-size-base;
    line-height: $line-height;

    &-rtl {
      direction: rtl;
    }
    // ================= Global =================
    table {
      width: 100%;
      border-spacing: 0px;
    }

    th,
    td {
      position: relative;
      box-sizing: border-box;
      padding: $cell-padding;
      white-space: normal;
      word-break: break-word;
      border-bottom: $border;
      border-top: 0;
      border-left: 0;
      transition: box-shadow 0.3s;
    }
    &-has-border {
      th,
      td {
        border-right: $border;
      }
    }

    &-rtl {
      th,
      td {
        border-right: 0;
        border-left: $border;
      }
    }

    // ================== Cell ==================
    &-rtl {
      &-cell {
        &-fix-right:last-child {
          border-right-color: $color-border;
        }
        &-fix-left:last-child {
          border-left-color: transparent;
        }
        &-fix-left-first {
          box-shadow: 1px 0 0 $color-border;
        }
        &-fix-right-first,
        &-fix-right-last {
          box-shadow: none;
        }
      }
    }

    &-cell {
      &-fix-left,
      &-fix-right {
        z-index: 1;
      }

      &-fix-left-first::after,
      &-fix-left-last::after {
        position: absolute;
        top: 0;
        right: -1px;
        bottom: -1px;
        width: $m-s-5;
        transform: translateX(100%);
        transition: box-shadow 0.3s;
        content: '';
        pointer-events: none;
      }

      &-fix-left-all::after {
        display: none;
      }

      &-fix-right-first,
      &-fix-right-last {
        box-shadow: -1px 0 0 $color-border;

        &::after {
          position: absolute;
          top: 0;
          bottom: -1px;
          left: -1px;
          width: $m-s-5;
          transform: translateX(-100%);
          transition: box-shadow 0.3s;
          content: '';
          pointer-events: none;
        }
      }

      &-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        // Fixed first or last should special process
        &.#{$m-table-prefix}-cell-fix-left-first,
        &.#{$m-table-prefix}-cell-fix-left-last,
        &.#{$m-table-prefix}-cell-fix-right-first
          &.#{$m-table-prefix}-cell-fix-right-last {
          overflow: visible;

          .#{$m-table-prefix}-cell-content {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      &-row-hover {
        background: rgba(255, 0, 0, 0.05);
      }
    }

    &-ping-left {
      .#{$m-table-prefix}-cell-fix-left-first::after,
      .#{$m-table-prefix}-cell-fix-left-last::after {
        box-shadow: $box-shadow;
      }
    }

    &-ping-right {
      .#{$m-table-prefix}-cell-fix-right-first::after,
      .#{$m-table-prefix}-cell-fix-right-last::after {
        box-shadow: $box-shadow;
      }
    }

    // ================= Expand =================
    &-expand-icon-col {
      width: $m-s-15;
    }

    &-row-expand-icon-cell {
      text-align: center;
    }

    // ================= Header =================
    &-rtl {
      thead .#{$m-table-prefix}-cell-scrollbar::after {
        right: -1px;
        left: auto;
      }
    }

    thead {
      border-top-left-radius: $m-s-1;
      border-top-right-radius: $m-s-1;
      th {
        text-align: center;
        background: $table-head-background-color;
      }

      th:last-child {
        border-right: 0;
      }

      .#{$m-table-prefix}-cell-scrollbar::after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1px;
        width: 1px;
        background: $table-head-background-color;
        content: '';
      }

      tr:last-child th:first-child {
        border-top-left-radius: $m-s-1;
      }

      tr:last-child th:last-child {
        border-top-right-radius: $m-s-1;
      }
    }

    &-header {
      //@include tableBorder;
    }

    // ================= Empty ==================
    &-placeholder {
      text-align: center;
    }

    &-empty {
      color: $m-color-text-disabled;
      padding: $m-s-8 0;
      text-align: center;
    }

    // ================== Body ==================
    tbody {
      tr {
        td {
          background: #fff;
        }

        th {
          background: $table-head-background-color;
        }
        td:last-child {
          border-right: 0;
        }
      }

      tr:last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    &-content {
      border-top-left-radius: $m-s-1;
      border-top-right-radius: $m-s-1;

      table {
        border-top-left-radius: $m-s-1;
        border-top-right-radius: $m-s-1;
      }
    }

    &-body {
      //@include tableBorder;
      border-top: 0;
    }

    &-fixed-column &-body::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      border-right: $border;
      content: '';
    }

    // ================= Expand =================
    &-expanded-row {
      // .#{$m-table-prefix}-cell {
      //   box-shadow: inset 0 8px 8px -8px $m-color-secondary;
      // }

      &-fixed {
        box-sizing: border-box;
        margin: $cell-margin;
        margin-right: calc(-1 * #{$horizontal-padding} - 2 * #{$border-width});
        padding: $cell-padding;

        &::after {
          position: absolute;
          top: 0;
          right: 1px;
          bottom: 0;
          width: 0;
          border-right: $border;
          content: '';
        }
      }
    }

    &-row-expand-icon {
      display: inline-block;
      width: $m-s-4;
      height: $m-s-4;
      color: #aaa;
      line-height: $m-s-4;
      text-align: center;
      vertical-align: middle;
      border: 1px solid currentColor;
      cursor: pointer;

      &.#{$m-table-prefix}-row-expanded::after {
        content: '-';
      }

      &.#{$m-table-prefix}-row-collapsed::after {
        content: '+';
      }

      &.#{$m-table-prefix}-row-spaced {
        visibility: hidden;
      }
    }

    // ================= Title ==================
    &-title {
      padding: $cell-padding;
      //border: $border;
      border-bottom: 0;
    }

    // ================= Footer =================
    &-footer {
      padding: $cell-padding;
      border: $border;
      border-top: 0;
    }

    tfoot {
      td {
        background: #fff;
      }
    }

    &-summary {
      border-top: $border;
      border-left: $border;
    }

    &-sticky {
      &-holder {
        position: sticky;
        z-index: 2;
      }
      &-scroll {
        position: sticky;
        bottom: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        border-top: 1px solid #f3f3f3;
        opacity: 0.6;
        transition: transform 0.1s ease-in 0s;
        &:hover {
          transform: scaleY(1.2);
          transform-origin: center bottom;
        }
        &-bar {
          height: $m-s-2;
          background-color: #bbb;
          border-radius: $m-s-1;
          &:hover {
            background-color: #999;
          }
          &-active {
            background-color: #999;
          }
        }
      }
    }
  }
}