@use 'mixins/mixins'as *;
* {
  box-sizing: border-box;
}
#{getClassName((table))} {
  text-align: left;
  font-size: #{getValName((table, font, size))};
  position: relative;
  // border-radius: 8px 8px 0 0;
  overflow: auto;
  // border-width: 1px;
  border-style: #{getValName((table, border, style))};
  border-color: #{getValName((table, border, color))};
  border-top-width: 1px;
  border-left-width: 1px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  // border-bottom-style: #{getValName((table, border, style))};
  // border-bottom-color: #{getValName((table, border, color))};
  #{getClassName((checkbox))}, #{getClassName((radio))} {
    padding: 0px;
    min-height: auto;
  }
  #{getClassName((td))} {
    display:flex;
    flex-direction: row;
    align-items: center;
    line-height: 1em;
    #{getClassName((td, bd))} {
      flex: 1;
    }
  }
  #{getClassName((td, tree-icon))} {
    width: 1.4em;
    min-width: 1.4em;
    font-size: 0.856em;
    display: inline-flex;
    align-items: center;
    justify-content: start;
    i {
      cursor: pointer;
    }
  }
  table {
    width: 100%;
    table-layout: fixed;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
  }
  td, th {
    // border-collapse: collapse;
    // border-style: #{getValName((table, border, style))};
    // border-width: 1px;
    // border-color: #{getValName((table, border, color))};
    // border-spacing: 0;
    border-right: 1px #{getValName((table, border, style))} #{getValName((table, border, color))};
    border-bottom: 1px #{getValName((table, border, style))} #{getValName((table, border, color))};
    padding: .5em .8em;
    word-break: break-word;
    // overflow: hidden; // 添加会影响固定列阴影
  }
  th {
    font-weight: 600;
    &.is-drag * {
      pointer-events: none;
      position: relative;
    }
    &.is-sort {
      cursor: pointer;
    }
    #{getClassName((td))} {
      display:flex;
      flex-direction: row;
      align-items: center;
      #{getClassName((td, bd))} {
        flex: 1;
      }
      #{getClassName((td, ft))} {
        display: inline-flex;
      }
    }
    #{getClassName((td, sort))} {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-self: center;
      &:after,&:before {
        content: '';
        display: block;
        border: .3em solid transparent;
        margin: 1px 0;
      }
      &:after{
        border-top-color: #{getValName((color, neutral, 5))};
        opacity: .5;
      }
      &:before{
        border-bottom-color: #{getValName((color, neutral, 5))};
        opacity: .5;
      }
      &.is-desc {
        &:after{
          border-top-color: #{getValName((color, primary))};
          opacity: 1;
        }
      }
      &.is-asc {
        &:before{
          border-bottom-color: #{getValName((color, primary))};
          opacity: 1;
        }
      }
    }
  }
  thead {
    border-style: #{getValName((table, border, style))};
    border-width: 1px;
    border-color: #{getValName((table, border, color))};
    position: sticky;
    top: 0px;
    z-index: 2;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    color: #{getValName((table, th, color))};
    background-color: #{getValName((table, thead, background-color))};
  }
  &.is-hover {
    #{getClassName((table, main))} {
      tbody {
        tr:hover {
          td {
            box-shadow: inset 0 0 1000px rgba(160,167,176,.2);
          }
        }
      }
    }
  }
}

#{getClassName((table, main))} {
  position: relative;
  th.is-dragover {
    &:before {
      border: 5px transparent solid;
      border-top-color: #{getValName((color, primary))};
      display: block;
      content: '';
      position: absolute;
      top: 0px;
      left: 0px;
      transform: translateX(-5px);
    }
  }
  th, td {
    &.is-draging {
      #{getClassName((td))} {
        opacity: .1;
      }
    }
    &.is-dragover {
      position: relative;
      &:after {
        display: block;
        content: '';
        position: absolute;
        left: 0px;top: 0;height:100%;
        border-left: 1px #{getValName((color, primary))} dashed;
      }
    }
    &.is-fixed-left, &.is-fixed-right {
      position: sticky;
      background-color: var(--os-table-thead-background-color);
    }
    &.is-fixed-left {
      left: 0;
      // transform: translateX(-1px);
      // box-shadow: inset -1px 0px 0px 0px #{getValName((table, border, color))};
      &:after {
        content: "";
        display: block;
        position: absolute;
        right: -9px;
        top: 0;
        height: 100%;
        box-shadow: inset 9px 0px 9px -9px rgba(160,167,176,.5);
        // border-left: solid 1px var(--os-table-border-color);
        width: 9px;
        z-index: 1;
      }
    }
    &.is-fixed-right {
      right: 0;
      // transform: translateX(1px);
      // box-shadow: inset -1px 0px 0px 0px #{getValName((table, border, color))};
      + .is-fixed-right {
        &:after {
          border-right: solid 1px var(--os-table-border-color);
          box-shadow: none;
        }
      }
      &:after {
        content: "";
        display: block;
        position: absolute;
        left: -9px;
        top: 0;
        height: 100%;
        box-shadow: inset -9px 0px 9px -9px rgba(160,167,176,.5);
        // border-right: solid 1px var(--os-table-border-color);
        width: 9px;
        z-index: 1;
      }
    }
  }
  tbody {
    tr:nth-child(odd) {
      background-color:  #{getValName((table, tr-odd, background-color))};
      td.is-fixed-left, td.is-fixed-right {
        background-color:  #{getValName((table, tr-odd, background-color))};
      }
    }
    tr:nth-child(even) {
      background-color:  #{getValName((table, tr-even, background-color))};
      td.is-fixed-left, td.is-fixed-right {
        background-color:  #{getValName((table, tr-even, background-color))};
      }
    }
    tr#{getClassName((table,tr,selected))} {
      background-color:  #{getValName((table, tr-selected, background-color))} !important;
      td.is-fixed-left, td.is-fixed-right {
        background-color:  #{getValName((table, tr-selected, background-color))};
      }
    }
  }
}

#{getClassName((table))} {
  #{(joinValName((table, border, style)))}: solid; // dotted;
  @include set-css-val(
    table,
    (
      'font-size': (heading8),
      'tr-odd-background-color': (color, neutral, 0),
      'tr-even-background-color': (color, neutral, 0),
      // 'tr-hover-background-color': (color, neutral, 2),
      'thead-color': (color, neutral, 8),
      'thead-background-color': (color, neutral, 0),
      'border-color': (color, neutral, 2),
      'tr-selected-background-color': (color, primary, lightest)
    )
  );
  &.is-stripe {
    @include set-css-val(
      table,
      (
        'tr-odd-background-color': (color, neutral, 0),
        'tr-even-background-color': (color, neutral, 1),
      )
    );
  }
  &.is-inborder {
    border-right: 0px;
    border-left: 0px;
    thead, th, td {
      border-right: 0px;
      border-left: 0px;
    }
  }
}
#{getClassName((table, large))} {
  @include set-css-val(
    table,
    (
      'font-size': (heading7),
    )
  );
}
#{getClassName((table, mini))} {
  @include set-css-val(
    table,
    (
      'font-size': (heading9),
    )
  );
}


#{getClassName((table, play))} {
  border-radius: #{getValName((border, radius, soft))};
  border-spacing: 0;
  border-left: 1px solid #{getValName((color, neutral, 3))};

  td,
  th {
    padding: #{getValName((space, s))} #{getValName((space, base))};
    border-right: 1px solid #{getValName((color, neutral, 3))};
    border-bottom: 1px solid #{getValName((color, neutral, 3))};
  }

  thead {

    td,
    th {
      position: sticky;
      top: 0px;
      font-weight: #{getValName((font, semi, bold))};
    }

    td:not([class*="background-"]),
    th:not([class*="background-"]) {
      background-color: #{getValName((color, neutral, 0))};
    }

    tr:first-child {

      td,
      th {
        border-top: 1px solid #{getValName((color, neutral, 3))};
      }
    }
  }

  tbody tr:not([class*="background-"]) {
    background-color: #{getValName((color, neutral, 0))};

    &:nth-child(even) {
      background-color: #{getValName((color, neutral, 1))};
    }

    &:hover {
      background-color: #{getValName((color, neutral, 2))};
    }
  }
}

#{getClassName((table, warp))} {
  overflow: auto;

  #{getClassName((table, play))} {
    min-width: 100%;
  }
}