@mixin table-size($padding, $border-radius) {
  table {
    th,
    td {
      padding: $padding / 2 $padding;
    }
  }

  &.ui-table-radius {
    .ui-table-body {
      border-radius: $border-radius;
    }

    table {
      border-radius: $border-radius;
    }
  }
}

$prefixCls: ui-table;

.#{$prefixCls} {
  @include table-size(12px, $base-radius);

  position: relative;
  color: #666;

  &-body {
    width: 100%;
    overflow-x: auto;
    transition: opacity .3s ease;
  }

  &-fixed-left {
    position: absolute;
    top: 0;
    left: 0;
    transition: box-shadow 0.3s ease-out;

    &.shadow {
      border-right: 0;
      box-shadow: 6px 0 6px -4px rgba(0, 0, 0, .12);
    }
  }

  &-fixed-right {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    transition: box-shadow 0.3s ease-out;

    &.shadow {
      border-left: 0;
      box-shadow: -6px 0 6px -4px rgba(0, 0, 0, .12);
    }
  }

  .ui-popover-content {
    max-width: 300px;
    text-align: left;
    line-height: 24px;
    white-space: normal;
  }

  table {
    border-collapse: separate;
    border-spacing: 0;
    background-color: #fff;

    tr {
      line-height: normal;
    }

    th,
    td {
      white-space: nowrap;
    }

    th {
      background: #f4f4f4;
      font-weight: bold;
      height: 50px;
      line-height: 26px;
      transition: background .3s ease;
      position: relative;
      user-select: none;
    }

    td {
      height: 40px;
      line-height: 15px;

      .ellipsis-cell {
        max-width: 300px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

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

    &.#{$prefixCls}-multi-headrow {
      text-align: center;

      th {
        border-right: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;

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

      tr:not(:first-child) {
        th {
          border-right: 1px solid #e9e9e9;
        }
      }
    }
  }

  &-expand-icon {
    display: inline-block;
    width: 17px;
    height: 17px;
    line-height: 13px;
    text-align: center;
    border: 1px solid #e8e8e8;
    user-select: none;
    background-color: #fff;
    cursor: pointer;
  }

  &-icon-expanded::before {
    content: '-';
  }

  &-icon-collapsed::before {
    content: '+';
  }

  &-expanded-row {
    background-color: rgb(251, 251, 251);
  }

  &-scroll {
    width: auto;
    min-width: 100%;
    text-align: left;
  }

  &.#{$prefixCls}-bordered {
    .#{$prefixCls}-body {
      border-left: 1px solid #e9e9e9;
      border-right: 1px solid #e9e9e9;
    }

    &.#{$prefixCls}-multi-headrow {
      border: 1px solid #e9e9e9;
      border-left: 0;
      border-right: 0;
    }

    table {
      border: 1px solid #e9e9e9;
      border-left: 0;
      border-right: 0;

      th,
      td {
        border-right: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;

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

      tr:not(:first-child) {
        th {
          border-right: 1px solid #e9e9e9;
        }
      }
    }

    .#{$prefixCls}-fixed-left,
    .#{$prefixCls}-fixed-right {
      border: 1px solid #e9e9e9 !important;
      border-bottom: 0;
    }
  }

  &.#{$prefixCls}-striped {
    tbody {
      > tr:nth-of-type(even) {
        background: #fbfbfb;
      }
    }
  }

  &.#{$prefixCls}-hover {
    tbody {
      tr:hover,
      tr.hover {
        background-color: #ecf6fd !important;
      }
    }
  }

  &.size-xl {
    @include table-size(16px, $base-radius-xl);
  }

  &.size-lg {
    @include table-size(14px, $base-radius-lg);
  }

  &.size-sm {
    @include table-size(6px 12px, $base-radius-sm);
  }

  &.size-xs {
    @include table-size(4px 12px, $base-radius-xs);
  }
}

.#{$prefixCls}-sorter {
  margin-left: 5px;
  display: inline-block;
  width: 8px;
  height: 16px;
  vertical-align: middle;
  text-align: center;

  &-up,
  &-down {
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-style: solid;
  }

  &-up {
    border-width: 0 4px 7px;
    border-color: transparent transparent #ddd;
    margin-bottom: 2px;

    &.#{$prefixCls}-sorter-active {
      border-color: transparent transparent #2db7f5;
    }
  }

  &-down {
    border-width: 7px 4px 0;
    border-color: #ddd transparent transparent;

    &.#{$prefixCls}-sorter-active {
      border-color: #2db7f5 transparent transparent;
    }
  }
}