@charset "utf-8";
@import (optional, reference) "var.less";
/*table*/
._table-wrap {
  border-top: 1px solid var(--_c-text-bd);
  border-bottom: 1px solid var(--_c-text-bd);
  overflow: auto;
  position: relative;
}
._table {
  th ._cell {
    display: flex;
  }
  tr:where([selected]) td {
    background-color: var(--_c-primary-bg);
  }
  th:where([selected]),
  td:where([selected]) {
    background-color: var(--_c-primary-bg);
  }
  tr td:where([focus]) {
    color: var(--_c-primary);
    box-shadow: inset 0 0 0 2px var(--_c-primary);
  }
  tr:where([disabled]) td:where([focus]) {
    color: var(--_c-ignore);
    box-shadow: inset 0 0 0 2px var(--_c-primary-bd);
  }
  tr:where([disabled]) {
    color: var(--_c-ignore);
  }
  tr:where([disabled]) a {
    color: var(--_c-ignore);
  }
  &:where([stripe='']) tbody tr:nth-child(odd),
  &:where([stripe="odd"]) tbody tr:nth-child(odd) {
    background-color:var(--_c-ignore-bg);
  }
  &:where([stripe="even"]) tbody tr:nth-child(even) {
    background-color:var(--_c-ignore-bg);
  }
  &:where([hover]) tbody tr:where(:not([selected], [disabled])):hover {
    background-color:var(--_c-text-bg);
  }
  &:where([focus]) tbody tr td:where(:not([focus], [name='check'], [name='tools'])):hover {
    box-shadow: inset 0 0 0 2px var(--_c-ignore);
  }
  &:where([nowrap]) td,
  &:where([nowrap]) th {
    white-space: nowrap;
  }
  ._sort-arrow {
    width: var(--_sz-brief);
    height: var(--_sz-brief);
    text-align: center;
    position: relative;
    &:before {
      .arrowUp;
      position: absolute;
      top: calc(var(--_sz-brief) /2 - 0.1rem - 0.4rem);
      left: calc(var(--_sz-brief) /2 - 0.4rem);
    }
    &:after {
      .arrowDown;
      position: absolute;
      top: calc(var(--_sz-brief) /2 + 0.1rem);
      left: calc(var(--_sz-brief) /2 - 0.4rem);
    }
  }
  label~* {
    font-size: var;
    color: var(--_c-text-bg);
    width: var(--_sz-brief);
    text-align: center;
    cursor: pointer;
    .v3-trans-all(var(--_dur-2), linear);
  }
  label~*:hover {
    color: var(--_c-text);
  }
  [order="asc"] ._sort-arrow:before {
    border-color: transparent transparent var(--_c-text) transparent;
  }
  [order="desc"] ._sort-arrow:after {
    border-color: var(--_c-text) transparent transparent transparent;
  }
}
._table {
  ._avatar {
    margin-top: calc((-1*var(--_sz-list) + var(--_sz-biref))/2);
    margin-bottom: calc((-1*var(--_sz-list) + var(--_sz-biref))/2);
  }
  ._b-xs {
    margin-top: calc((-1*var(--_sz-list) + var(--_sz-biref))/2);
    margin-bottom: calc((-1*var(--_sz-list) + var(--_sz-biref))/2);
  }
  ._b-xs._b-seal {
    position: relative;
  }
  ._operate {
    margin-top: calc((-1*var(--_sz-list) + var(--_sz-biref))/2);
    margin-bottom: calc((-1*var(--_sz-list) + var(--_sz-biref))/2);
  }
  ._operate [class*="icon-"] {
    color: var(--_c-ignore);
    font-size: 1.4rem;
    height: var(--_sz-list);
    line-height: var(--_sz-list);
    width: var(--_sz-list);
    text-align: center;
    box-sizing: border-box;
    position: relative;
  }
  ._operate [class*="icon-"]._c-ignore {
    cursor: not-allowed;
  }
  ._operate [class*="icon-"] ._dot {
    position: absolute;
    right: 0;
    top: 0
  }
  tbody tr:hover ._operate [class*="icon-"] {
    color: var(--_c-text-aj);
  }
  tbody tr:hover ._operate [class*="icon-"]._c-ignore {
  }
  ._operate [class*="icon-"]:hover {
    background-color: #fff;
    border: 1px solid var(--_c-text-bd);
    line-height: calc(var(--_sz-list) - .2rem);
    border-radius: @radius;
  }
  ._operate [class*="icon-"]:hover ._badge {
    right: -0.1rem;
    top: -0.1rem
  }
  ._ell {
    max-width: 16.0rem;
  }
  ._form-input,
  ._form-con {
    width: 100%;
  }
  ._radio._xs,
  ._checkbox._xs,
  select._xs,
  ._form-group._xs,
  td>input._xs {
    margin-top: calc((-1*var(--_sz-list) + var(--_sz-biref))/2);
    margin-bottom: calc((-1*var(--_sz-list) + var(--_sz-biref))/2);
  }
  ._select._xs+span {
    margin-top: calc(((-1*var(--_sz-list) + var(--_sz-biref))/2) - .4rem);
    margin-bottom: calc((-1*var(--_sz-list) + var(--_sz-biref))/2);
  }
  ._select,
  select {
    width: 12.0rem;
  }
  th>input[type='text'],
  td>input[type='text'],
  th>input[type='password'],
  td>input[type='password'] {
    width: 12.0rem;
    max-width: 100%;
  }
  td>input[type='text'][editing] {
    background: transparent;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 2px var(--_c-primary);
    border-radius: 0;
    border: none;
    position: absolute;
    left: 0;
    top: 0;
  }
  td>textarea[editing] {
    background: transparent;
    width: calc(100% + 2rem);
    margin: -1rem;
    box-shadow: inset 0 0 0 2px var(--_c-primary);
    border-radius: 0;
    border: none;
  }
  ._form-group ._col {
    width: auto;
  }
}
._table,
._table-wrap {
  &[display="border"] {
    border-left: 1px solid var(--_c-text-bd);
    border-right: 1px solid var(--_c-text-bd);
  }
  &[display="grid"] {
    border-left: 1px solid var(--_c-text-bd);
    box-shadow: inset -1px 0 0 0 var(--_c-text-bd);
    position: relative;
  }
  &[display="grid"] td,
  &[display="grid"] th {
    position: relative;
    box-shadow: inset -1px 0 0 0 var(--_c-text-bd);
  }
  &[display="grid"] td[selected] {
    position: relative;
    box-shadow: inset 0 0 0 2px var(--_c-primary);
  }
}
._table-wrap {
  border-top: 1px solid var(--_c-text-bd);
  border-bottom: 1px solid var(--_c-text-bd);
  overflow: auto;
  position: relative;
  ._table {
    border-top: none;
    border-bottom: none;
  }
  &[fixedheader] thead tr:last-child {
    border: none;
  }
  &[fixedheader] thead th {
    background: #fff;
    box-shadow: inset 0 -1px 0 0 var(--_c-text-bd);
    position: sticky;
    top: 0;
    z-index: 3;
  }
  &[fixedheader] tbody tr:last-child {
    border-bottom: 1px solid var(--_c-text-bd);
  }
  &[display="grid"][fixedheader] thead th {
    box-shadow: inset 0 -1px 0 0 var(--_c-text-bd), inset -1px 0 0 0 var(--_c-text-bd);
  }
  &[fixedleft] th:first-child,
  &[fixedleft] td:first-child {
    background-color: #fff;
    box-shadow: inset -1px 0 0 0 var(--_c-text-bd);
    position: sticky;
    left: 0;
    z-index: 3;
  }
  &[stripe][fixedleft] tbody tr:nth-child(odd) td:first-child {
    background-color:var(--_c-ignore-bg);
  }
  &[stripe][fixedleft] tbody tr[selected] td:first-child {
    background-color: var(--_c-primary-bg);
  }
  &[hover][fixedleft] tbody tr:not([selected]):hover td:first-child {
    background-color:var(--_c-text-bg);
  }
  &[fixedright] th:last-child,
  &[fixedright] td:last-child {
    background-color: #fff;
    position: sticky;
    right: 0;
    z-index: 3;
  }
  &[fixedright] th:last-child:before,
  &[fixedright] td:last-child:before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: var(--_c-text-bd);
    position: absolute;
    left: -1px;
    top: 0;
  }
  &[stripe][fixedright] tbody tr:nth-child(odd) td:last-child {
    background-color:var(--_c-ignore-bg);
  }
  &[stripe][fixedright] tbody tr[selected] td:last-child {
    background-color: var(--_c-primary-bg);
  }
  &[hover][fixedright] tbody tr:not([selected]):hover td:last-child {
    background-color:var(--_c-text-bg);
  }
  &[fixedheader][fixedleft] tr th:first-child {
    box-shadow: inset 0 -1px 0 0 var(--_c-text-bd), inset -1px 0 0 0 var(--_c-text-bd);
    z-index: 4;
  }
  &[fixedheader][fixedright] tr th:last-child {
    z-index: 4;
  }
  &[fixedheader][fixedright] tr th:last-child:before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: var(--_c-text-bd);
    position: absolute;
    left: -1px;
    top: 0;
  }
  *[fixed] {
    position: sticky;
    z-index: 3;
  }
  &[fixedheader] *[fixed] {
    z-index: 4;
  }
}
._table-tools {
  display: flex;
  [toolsleft] {}
  [toolsright] {
    text-align: right;
    flex: auto;
  }
  [toolsright]>a,
  [toolsright]>._btn-group {
    margin-left: .8rem;
  }
  ._table-search {
    width: 20rem;
  }
  ._table-search ._form-input,
  ._table-search ._form-con {
    width: 100%
  }
  ._table-button {}
}
