@julingbase/jly-arco-design 0.0.2 → 0.0.3

package/es/table/style/index.less

@@ -1,868 +1,868 @@
-@import '../../style/mixins/index.less';
-@import './token.less';
-@import './filters-popup.less';
-
-@table-prefix-cls: ~'@{prefix}-table';
-
-@table-cls-table: ~'@{table-prefix-cls}-element';
-@table-cls-tr: ~'@{table-prefix-cls}-tr';
-@table-cls-th: ~'@{table-prefix-cls}-th';
-@table-cls-td: ~'@{table-prefix-cls}-td';
-
-.expandBtn() {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: @table-size-expand-button;
-  height: @table-size-expand-button;
-  padding: 0;
-  color: @table-color-expand-icon;
-  font-size: @table-font-size-expand-button;
-  line-height: @table-size-expand-button;
-  background-color: @table-color-bg-expand-icon;
-  border: @table-border-expand-icon-width solid @table-color-expand-icon-border;
-  border-radius: @table-border-radius-expand-button;
-  outline: none;
-  cursor: pointer;
-  transition: background-color @transition-duration-1
-    @transition-timing-function-linear;
-
-  &:hover {
-    color: @table-color-expand-icon_hover;
-    background-color: @table-color-bg-expand-icon_hover;
-    border-color: @table-color-expand-icon-border_hover;
-  }
-}
-
-.table-size(@size) {
-  .@{table-prefix-cls}-cell {
-    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-  }
-
-  //.@{table-prefix-cls}-col-has-sorter .@{table-prefix-cls}-cell-with-sorter {
-  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-  //  cursor: pointer;
-  //}
-
-  //.@{table-cls-td} {
-  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-  //}
-
-  .@{table-cls-th} {
-    font-size: ~'@{table-size-@{size}-font-header-size}';
-  }
-
-  .@{table-cls-td} {
-    font-size: ~'@{table-size-@{size}-font-size}';
-  }
-
-  .@{table-prefix-cls}-footer {
-    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-  }
-
-  // expand row in fixed
-  //.@{table-prefix-cls}-cell-fixed-expand {
-  //  margin: ~'-@{table-size-@{size}-padding-vertical}' ~'-@{table-size-@{size}-padding-horizontal}';
-  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-  //}
-
-  // sub table
-  .@{table-prefix-cls}-tr-expand .@{table-cls-td} .@{table-prefix-cls} {
-    margin: ~'-@{table-size-@{size}-padding-vertical}' ~'-@{table-size-@{size}-padding-horizontal}'
-      ~'calc(-@{table-size-@{size}-padding-vertical} - @{table-border-width})' ~'-@{table-size-@{size}-padding-horizontal}';
-  }
-
-  // editor row
-  .@{table-prefix-cls}-editable-row {
-    .@{table-prefix-cls}-cell-wrap-value {
-      padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-    }
-  }
-}
-
-.@{table-prefix-cls} {
-  position: relative;
-
-  &-column-handle {
-    position: absolute;
-    top: 0;
-    right: -4px;
-    z-index: 1;
-    width: 8px;
-    height: 100%;
-    cursor: col-resize;
-  }
-
-  // spin
-  .@{prefix}-spin {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  // ???
-  > .@{prefix}-spin > .@{prefix}-spin-children::after {
-    z-index: 2;
-  }
-
-  // footer
-  &-footer {
-    border-radius: 0 0 @table-border-radius @table-border-radius;
-  }
-
-  // box-shadow of the fixed column on the left
-  &-scroll-position-right &-col-fixed-left-last::after,
-  &-scroll-position-middle &-col-fixed-left-last::after {
-    box-shadow: @table-shadow-left;
-  }
-
-  // box-shadow of the fixed column on the right
-  &-scroll-position-left &-col-fixed-right-first::after,
-  &-scroll-position-middle &-col-fixed-right-first::after {
-    box-shadow: @table-shadow-right;
-  }
-
-  &-layout-fixed {
-    .@{table-cls-table} {
-      table-layout: fixed;
-    }
-  }
-
-  .@{table-cls-table} {
-    width: 100%;
-    min-width: 100%;
-    margin: 0;
-    border-collapse: separate;
-    border-spacing: 0;
-  }
-
-  &-th {
-    position: relative;
-    box-sizing: border-box;
-    color: @table-color-text-header-cell;
-    font-weight: @table-font-weight-header-text;
-    line-height: @line-height-base;
-    text-align: left;
-    background-color: @table-color-bg-header-cell;
-
-    &[colspan] {
-      text-align: center;
-    }
-
-    &-align-right {
-      text-align: right;
-
-      .@{table-prefix-cls}-cell-with-sorter {
-        justify-content: flex-end;
-      }
-    }
-
-    &-align-center {
-      text-align: center;
-
-      .@{table-prefix-cls}-cell-with-sorter {
-        justify-content: center;
-      }
-    }
-  }
-
-  &-td {
-    box-sizing: border-box;
-    color: @table-color-text-body-cell;
-    line-height: @line-height-base;
-    text-align: left;
-    word-break: break-all;
-    background-color: @table-color-bg-body-cell;
-    border-bottom: @table-border-width @table-border-style @table-color-border;
-
-    &-align-right {
-      text-align: right;
-    }
-
-    &-align-center {
-      text-align: center;
-    }
-
-    &.@{table-prefix-cls}-drag-handle {
-      cursor: move;
-    }
-  }
-
-  &-cell {
-    display: flex;
-    align-items: center;
-
-    &-align-right {
-      justify-content: flex-end;
-      text-align: right;
-    }
-
-    &-align-center {
-      justify-content: center;
-      text-align: center;
-    }
-  }
-
-  &-text-ellipsis {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &-td-content {
-    display: block;
-    width: 100%;
-  }
-
-  .@{table-cls-th}&-col-sorted {
-    background-color: @table-color-bg-header-sorted-cell;
-  }
-
-  .@{table-cls-td}&-col-sorted {
-    background-color: @table-color-bg-body-sorted-cell;
-  }
-
-  &-col-fixed-left,
-  &-col-fixed-right {
-    position: sticky;
-    z-index: 10;
-  }
-
-  &-col-fixed-left-last::after,
-  &-col-fixed-right-first::after {
-    position: absolute;
-    top: 0;
-    bottom: -@table-border-width;
-    left: 0;
-    width: @table-size-shadow-wrapper-width;
-    box-shadow: none;
-    transform: translateX(-100%);
-    transition: box-shadow @transition-duration-1
-      @transition-timing-function-linear;
-    content: '';
-    pointer-events: none;
-  }
-
-  // ????
-  &-col-fixed-left-last::after {
-    right: 0;
-    left: unset;
-    transform: translateX(100%);
-  }
-
-  &-cell-text-ellipsis {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  // useless
-  &-editable-row {
-    .@{table-prefix-cls}-cell-wrap-value {
-      border: @table-border-width solid @table-color-editable-body-cell-border;
-      border-radius: @table-border-radius;
-      cursor: pointer;
-      transition: all @transition-duration-1 @transition-timing-function-linear;
-    }
-
-    &:hover {
-      .@{table-prefix-cls}-cell-wrap-value {
-        border: @table-border-width solid @table-color-border;
-      }
-    }
-  }
-
-  //&-cell {
-  //  word-break: break-all;
-  //}
-
-  // Expand
-  .@{table-prefix-cls}-expand-btn {
-    .expandBtn();
-  }
-
-  &-cell-expand-icon {
-    display: flex;
-    align-items: center;
-  }
-
-  &-cell-expand-icon &-cell-inline-icon {
-    display: inline-flex;
-    margin-right: @table-spacing-expand-button-margin-right;
-
-    .@{prefix}-icon-loading {
-      color: @color-primary-6;
-    }
-  }
-
-  &-cell-expand-icon-hidden {
-    display: inline-block;
-    width: @table-size-expand-button;
-    height: @table-size-expand-button;
-    margin-right: @table-spacing-expand-button-margin-right;
-  }
-
-  &-tr-expand .@{table-cls-td} {
-    background-color: @table-color-bg-expand-content;
-  }
-
-  &-cell-fixed-expand {
-    position: sticky;
-    left: 0;
-    box-sizing: border-box;
-  }
-
-  &-tr-expand .@{table-cls-td} & {
-    .@{table-prefix-cls}-container {
-      border: none;
-    }
-
-    .@{table-cls-th} {
-      border-bottom: @table-border-width @table-border-style @table-color-border;
-    }
-
-    .@{table-cls-th},
-    .@{table-cls-td} {
-      background-color: transparent;
-    }
-
-    .@{table-prefix-cls}-pagination {
-      margin-bottom: @table-spacing-pagination-margin;
-    }
-  }
-
-  // Selection
-  //& &-th&-operation &-th-item,
-  //& &-td&-operation {
-  //  padding-right: @table-spacing-selection-padding-horizontal;
-  //  padding-left: @table-spacing-selection-padding-horizontal;
-  //}
-  &-th&-operation,
-  &-td&-operation {
-    text-align: center;
-  }
-
-  &-th&-operation &-cell,
-  &-td&-operation &-cell {
-    display: flex;
-    justify-content: center;
-    padding: 0;
-  }
-
-  &-radio,
-  &-checkbox {
-    justify-content: center;
-  }
-
-  &-checkbox .@{prefix}-checkbox,
-  &-radio .@{prefix}-radio {
-    padding-left: 0;
-  }
-
-  // colgroup selection
-  &-selection-checkbox-col,
-  &-selection-radio-col {
-    .fixed-width(@table-size-selection-col-width);
-  }
-
-  &-expand-col {
-    .fixed-width(@table-size-expand-icon-col-width);
-  }
-
-  &-drag-handle-col {
-    .fixed-width(@table-size-drag-handle-col-width);
-  }
-
-  &-th {
-    transition: background-color @transition-duration-1
-      @transition-timing-function-linear;
-  }
-
-  &-cell-with-sorter {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    &:hover {
-      background-color: @table-color-bg-header-sorted-cell_hover;
-    }
-  }
-
-  &-cell-with-filter {
-    display: flex;
-    align-items: center;
-  }
-
-  &-cell-next-ascend &-sorter-icon {
-    .@{prefix}-icon-caret-up {
-      color: @table-color-header-sorter-icon_next;
-    }
-  }
-
-  &-cell-next-descend &-sorter-icon {
-    .@{prefix}-icon-caret-down {
-      color: @table-color-header-sorter-icon_next;
-    }
-  }
-
-  &-sorter {
-    display: inline-block;
-    margin-left: @table-spacing-header-sorter-icon-margin-left;
-    vertical-align: -3px;
-  }
-
-  &-sorter&-sorter-direction-one {
-    vertical-align: 0;
-  }
-
-  &-sorter-icon {
-    position: relative;
-    width: @table-size-header-sorter-icon-width;
-    height: @table-size-header-sorter-icon-height;
-    overflow: hidden;
-    line-height: @table-size-header-sorter-icon-height;
-
-    .@{prefix}-icon-caret-up,
-    .@{prefix}-icon-caret-down {
-      position: absolute;
-      top: 50%;
-      color: @table-color-header-sorter-icon;
-      font-size: @table-font-size-header-sorter-icon;
-      transition: all @transition-duration-1 @transition-timing-function-linear;
-    }
-
-    .@{prefix}-icon-caret-up {
-      top: @table-position-header-sorter-icon-up-top;
-      left: @table-position-header-sorter-icon-left;
-    }
-
-    .@{prefix}-icon-caret-down {
-      top: @table-position-header-sorter-icon-down-top;
-      left: @table-position-header-sorter-icon-left;
-    }
-
-    &&-active {
-      svg {
-        color: @table-color-header-sorter-icon_active;
-      }
-    }
-  }
-
-  &-filters {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: @table-size-filters-width;
-    height: 100%;
-    line-height: 1;
-    vertical-align: 0;
-    background-color: transparent;
-    cursor: pointer;
-    transition: all @transition-duration-1 @transition-timing-function-linear;
-
-    &:hover,
-    &-open {
-      background-color: @table-color-bg-header-filters-icon_hover;
-    }
-
-    svg {
-      color: @table-color-header-filters-icon;
-      font-size: @table-font-size-filters-icon;
-      transition: all @transition-duration-1 @transition-timing-function-linear;
-    }
-
-    &-active {
-      svg {
-        color: @table-color-header-filters-icon_active;
-      }
-    }
-
-    &-align-left {
-      position: relative;
-      width: auto;
-      margin-left: @table-spacing-header-sorter-icon-margin-left;
-
-      svg {
-        font-size: @table-font-size-header-sorter-icon;
-      }
-
-      &:hover,
-      &-open {
-        background: none;
-      }
-
-      &:hover::before,
-      &.@{table-prefix-cls}-filters-open::before {
-        background: @table-filters-icon-bg_hover;
-      }
-    }
-  }
-
-  /* ---- Table sorter, filter, checkbox, radio (End) ---- */
-  &-container {
-    position: relative;
-    border-radius: @table-border-radius @table-border-radius 0 0;
-  }
-
-  &-header {
-    flex-shrink: 0;
-    border-radius: @table-border-radius @table-border-radius 0 0;
-  }
-
-  &-container {
-    box-sizing: border-box;
-    width: 100%;
-    min-height: 0;
-
-    // chrome not fluent: https://codepen.io/quanqqq/pen/BaLpEQd?editors=0010
-    // border-radius: @table-border-radius @table-border-radius 0 0 0;
-
-    .@{table-prefix-cls}-content {
-      display: flex;
-      flex-direction: column;
-      width: auto;
-      height: 100%;
-
-      &-scroll-x {
-        overflow-x: auto;
-        overflow-y: hidden;
-      }
-    }
-
-    &::before,
-    &::after {
-      position: absolute;
-      //top: -@table-border-width;
-      //bottom: -@table-border-width;
-      z-index: 1;
-      width: @table-size-shadow-wrapper-width;
-      height: 100%;
-      box-shadow: none;
-      transition: box-shadow @transition-duration-1
-        @transition-timing-function-linear;
-      content: '';
-      pointer-events: none;
-    }
-
-    &::before {
-      top: 0;
-      left: 0;
-      border-top-left-radius: @table-border-radius;
-    }
-
-    &::after {
-      top: 0;
-      right: 0;
-      border-top-right-radius: @table-border-radius;
-    }
-
-    // box-shadow on the left side of the scroll table
-    &:not(.@{table-prefix-cls}-has-fixed-col-left) {
-      &.@{table-prefix-cls}-scroll-position-right::before,
-      &.@{table-prefix-cls}-scroll-position-middle::before {
-        box-shadow: @table-shadow-left;
-      }
-    }
-
-    // box-shadow on the right side of the scroll table
-    &:not(.@{table-prefix-cls}-has-fixed-col-right) {
-      &.@{table-prefix-cls}-scroll-position-left::after,
-      &.@{table-prefix-cls}-scroll-position-middle::after {
-        box-shadow: @table-shadow-right;
-      }
-    }
-  }
-
-  &-header {
-    overflow-x: hidden;
-    overflow-y: hidden;
-    background-color: @table-color-bg-header-cell;
-    scrollbar-color: transparent transparent;
-
-    &-sticky {
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-  }
-
-  &:not(&-empty) &-header::-webkit-scrollbar {
-    // 仅隐藏横向滚动条
-    height: 0;
-    background-color: transparent;
-  }
-
-  &&-empty &-header {
-    overflow-x: auto;
-  }
-
-  &-body {
-    position: relative;
-    width: 100%;
-    min-height: @table-size-body-min-width;
-    overflow: auto;
-    background-color: @table-color-body-background;
-  }
-
-  &-border {
-    .@{table-prefix-cls}-container {
-      border-top: @table-border-width @table-border-style @table-color-border;
-      border-left: @table-border-width @table-border-style @table-color-border;
-
-      // ??用处
-      //&::before {
-      //  position: absolute;
-      //  bottom: 0;
-      //  left: 0;
-      //  z-index: 2;
-      //  width: 100%;
-      //  height: @table-border-width;
-      //  background-color: @table-color-border;
-      //  content: '';
-      //}
-    }
-
-    .@{table-prefix-cls}-scroll-y {
-      border-bottom: @table-border-width @table-border-style @table-color-border;
-
-      .@{table-prefix-cls}-body .@{table-cls-tr}:last-of-type .@{table-cls-td},
-      tfoot .@{table-cls-tr}:last-of-type .@{table-cls-td} {
-        border-bottom: none;
-
-        &.@{table-prefix-cls}-col-fixed-left-last::after,
-        &.@{table-prefix-cls}-col-fixed-right-first::after {
-          bottom: 0;
-        }
-      }
-    }
-
-    .@{table-cls-tr} .@{table-cls-th} {
-      border-bottom: @table-border-width @table-border-style @table-color-border;
-    }
-
-    //.@{table-prefix-cls}-tr-expand .@{table-prefix-cls}-cell-fixed-expand {
-    //  border-left: @table-border-width @table-border-style @table-color-border;
-    //}
-
-    .@{table-prefix-cls}-footer {
-      border: @table-border-width @table-border-style @table-color-border;
-      border-top: 0;
-    }
-  }
-
-  &-border:not(&-border-cell) {
-    .@{table-prefix-cls}-container {
-      border-right: @table-border-width @table-border-style @table-color-border;
-    }
-
-    //.@{table-cls-tr} .@{table-cls-th}[colspan] {
-    //  border-bottom: none;
-    //}
-    //
-    //.@{table-prefix-cls}-tr-expand .@{table-prefix-cls}-cell-fixed-expand {
-    //  border-left: none;
-    //}
-  }
-
-  &-border-cell {
-    .@{table-cls-th},
-    .@{table-cls-td}:not(.@{table-prefix-cls}-tr-expand) {
-      border-right: @table-border-width @table-border-style @table-color-border;
-    }
-
-    .@{table-cls-th}-resizing,
-    .@{table-cls-td}-resizing:not(.@{table-prefix-cls}-tr-expand) {
-      border-right-color: @table-color-border_resizing;
-    }
-  }
-
-  &-border-header-cell {
-    .@{table-cls-th} {
-      border-right: @table-border-width @table-border-style @table-color-border;
-      border-bottom: @table-border-width @table-border-style @table-color-border;
-    }
-    .@{table-cls-th}-resizing,
-    .@{table-cls-td}-resizing:not(.@{table-prefix-cls}-tr-expand) {
-      border-right-color: @table-color-border_resizing;
-    }
-  }
-
-  &-border&-border-header-cell {
-    thead {
-      .@{table-cls-tr}:first-child .@{table-cls-th}:last-child {
-        border-right: 0;
-      }
-    }
-  }
-
-  &-border-body-cell {
-    .@{table-cls-td}:not(:last-child):not(.@{table-prefix-cls}-tr-expand) {
-      border-right: @table-border-width @table-border-style @table-color-border;
-    }
-  }
-
-  // stripe: true
-  &-stripe {
-    &:not(.@{table-prefix-cls}-dragging)
-      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty):not(.@{table-prefix-cls}-tr-summary):nth-child(even),
-    .@{table-cls-tr}-drag {
-      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
-        background-color: @table-color-bg-body-stripe-row;
-      }
-
-      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
-      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
-        &::before {
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: -1;
-          width: 100%;
-          height: 100%;
-          background-color: @table-color-bg-body-stripe-row;
-          content: '';
-        }
-      }
-    }
-  }
-
-  & .@{table-cls-tr}-draggable {
-    cursor: move;
-  }
-
-  &-hover {
-    &:not(.@{table-prefix-cls}-dragging)
-      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty):not(.@{table-prefix-cls}-tr-summary):hover,
-    .@{table-cls-tr}-drag {
-      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
-        background-color: @table-color-bg-body-row_hover;
-      }
-
-      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
-      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
-        &::before {
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: -1;
-          width: 100%;
-          height: 100%;
-          background-color: @table-color-bg-body-row_hover;
-          content: '';
-        }
-      }
-    }
-
-    .@{table-cls-tr}-expand:not(.@{table-prefix-cls}-tr-empty):hover {
-      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
-        background-color: @table-color-bg-expand-content_hover;
-      }
-    }
-
-    // 去除嵌套子表格的 hover 效果
-    .@{table-prefix-cls}-tr-expand .@{table-cls-td} & {
-      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty) {
-        .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
-          background-color: transparent;
-        }
-
-        .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
-        .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
-          &::before {
-            background-color: transparent;
-          }
-        }
-      }
-    }
-  }
-
-  &-tfoot {
-    position: relative;
-    z-index: 1;
-    flex-shrink: 0;
-    width: 100%;
-    overflow-x: auto;
-    background-color: @table-color-bg-tfoot;
-    box-shadow: 0 -@table-border-width 0 @table-color-border;
-    scrollbar-color: transparent transparent;
-
-    &::-webkit-scrollbar {
-      height: 0;
-      background-color: transparent;
-    }
-  }
-
-  & tfoot &-td {
-    background-color: @table-color-bg-tfoot;
-  }
-
-  // Active row
-  &-tr-checked .@{table-cls-td} {
-    background-color: @table-color-bg-body-row_active;
-  }
-
-  // Size
-  .table-size(large);
-
-  &-size-medium {
-    .table-size(medium);
-  }
-
-  &-size-small {
-    .table-size(small);
-  }
-
-  &-size-mini {
-    .table-size(mini);
-  }
-
-  // virtualized
-  &-virtualized .@{table-cls-table} {
-    table-layout: fixed;
-  }
-
-  &-virtualized div&-body div&-tr {
-    display: flex;
-  }
-
-  &-virtualized div&-body div&-td {
-    display: flex;
-    flex: 1;
-    align-items: center;
-  }
-}
-
-.@{table-prefix-cls}-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-top: @table-spacing-pagination-margin;
-
-  &-left {
-    justify-content: flex-start;
-  }
-
-  &-center {
-    justify-content: center;
-  }
-
-  &-top {
-    margin-top: 0;
-    margin-bottom: @table-spacing-pagination-margin;
-  }
-}
-
-.@{prefix}-virtual-list {
-  & > .@{table-prefix-cls}-element {
-    width: auto;
-  }
-}
-
-@{arco-theme-tag}[arco-theme='dark'] {
-  .@{table-prefix-cls}-tr-checked .@{table-cls-td} {
-    background-color: @table-color-bg-body-row_active_dark;
-  }
-}
+@import '../../style/mixins/index.less';
+@import './token.less';
+@import './filters-popup.less';
+
+@table-prefix-cls: ~'@{prefix}-table';
+
+@table-cls-table: ~'@{table-prefix-cls}-element';
+@table-cls-tr: ~'@{table-prefix-cls}-tr';
+@table-cls-th: ~'@{table-prefix-cls}-th';
+@table-cls-td: ~'@{table-prefix-cls}-td';
+
+.expandBtn() {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: @table-size-expand-button;
+  height: @table-size-expand-button;
+  padding: 0;
+  color: @table-color-expand-icon;
+  font-size: @table-font-size-expand-button;
+  line-height: @table-size-expand-button;
+  background-color: @table-color-bg-expand-icon;
+  border: @table-border-expand-icon-width solid @table-color-expand-icon-border;
+  border-radius: @table-border-radius-expand-button;
+  outline: none;
+  cursor: pointer;
+  transition: background-color @transition-duration-1
+    @transition-timing-function-linear;
+
+  &:hover {
+    color: @table-color-expand-icon_hover;
+    background-color: @table-color-bg-expand-icon_hover;
+    border-color: @table-color-expand-icon-border_hover;
+  }
+}
+
+.table-size(@size) {
+  .@{table-prefix-cls}-cell {
+    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
+  }
+
+  //.@{table-prefix-cls}-col-has-sorter .@{table-prefix-cls}-cell-with-sorter {
+  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
+  //  cursor: pointer;
+  //}
+
+  //.@{table-cls-td} {
+  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
+  //}
+
+  .@{table-cls-th} {
+    font-size: ~'@{table-size-@{size}-font-header-size}';
+  }
+
+  .@{table-cls-td} {
+    font-size: ~'@{table-size-@{size}-font-size}';
+  }
+
+  .@{table-prefix-cls}-footer {
+    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
+  }
+
+  // expand row in fixed
+  //.@{table-prefix-cls}-cell-fixed-expand {
+  //  margin: ~'-@{table-size-@{size}-padding-vertical}' ~'-@{table-size-@{size}-padding-horizontal}';
+  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
+  //}
+
+  // sub table
+  .@{table-prefix-cls}-tr-expand .@{table-cls-td} .@{table-prefix-cls} {
+    margin: ~'-@{table-size-@{size}-padding-vertical}' ~'-@{table-size-@{size}-padding-horizontal}'
+      ~'calc(-@{table-size-@{size}-padding-vertical} - @{table-border-width})' ~'-@{table-size-@{size}-padding-horizontal}';
+  }
+
+  // editor row
+  .@{table-prefix-cls}-editable-row {
+    .@{table-prefix-cls}-cell-wrap-value {
+      padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
+    }
+  }
+}
+
+.@{table-prefix-cls} {
+  position: relative;
+
+  &-column-handle {
+    position: absolute;
+    top: 0;
+    right: -4px;
+    z-index: 1;
+    width: 8px;
+    height: 100%;
+    cursor: col-resize;
+  }
+
+  // spin
+  .@{prefix}-spin {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  // ???
+  > .@{prefix}-spin > .@{prefix}-spin-children::after {
+    z-index: 2;
+  }
+
+  // footer
+  &-footer {
+    border-radius: 0 0 @table-border-radius @table-border-radius;
+  }
+
+  // box-shadow of the fixed column on the left
+  &-scroll-position-right &-col-fixed-left-last::after,
+  &-scroll-position-middle &-col-fixed-left-last::after {
+    box-shadow: @table-shadow-left;
+  }
+
+  // box-shadow of the fixed column on the right
+  &-scroll-position-left &-col-fixed-right-first::after,
+  &-scroll-position-middle &-col-fixed-right-first::after {
+    box-shadow: @table-shadow-right;
+  }
+
+  &-layout-fixed {
+    .@{table-cls-table} {
+      table-layout: fixed;
+    }
+  }
+
+  .@{table-cls-table} {
+    width: 100%;
+    min-width: 100%;
+    margin: 0;
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  &-th {
+    position: relative;
+    box-sizing: border-box;
+    color: @table-color-text-header-cell;
+    font-weight: @table-font-weight-header-text;
+    line-height: @line-height-base;
+    text-align: left;
+    background-color: @table-color-bg-header-cell;
+
+    &[colspan] {
+      text-align: center;
+    }
+
+    &-align-right {
+      text-align: right;
+
+      .@{table-prefix-cls}-cell-with-sorter {
+        justify-content: flex-end;
+      }
+    }
+
+    &-align-center {
+      text-align: center;
+
+      .@{table-prefix-cls}-cell-with-sorter {
+        justify-content: center;
+      }
+    }
+  }
+
+  &-td {
+    box-sizing: border-box;
+    color: @table-color-text-body-cell;
+    line-height: @line-height-base;
+    text-align: left;
+    word-break: break-all;
+    background-color: @table-color-bg-body-cell;
+    border-bottom: @table-border-width @table-border-style @table-color-border;
+
+    &-align-right {
+      text-align: right;
+    }
+
+    &-align-center {
+      text-align: center;
+    }
+
+    &.@{table-prefix-cls}-drag-handle {
+      cursor: move;
+    }
+  }
+
+  &-cell {
+    display: flex;
+    align-items: center;
+
+    &-align-right {
+      justify-content: flex-end;
+      text-align: right;
+    }
+
+    &-align-center {
+      justify-content: center;
+      text-align: center;
+    }
+  }
+
+  &-text-ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-td-content {
+    display: block;
+    width: 100%;
+  }
+
+  .@{table-cls-th}&-col-sorted {
+    background-color: @table-color-bg-header-sorted-cell;
+  }
+
+  .@{table-cls-td}&-col-sorted {
+    background-color: @table-color-bg-body-sorted-cell;
+  }
+
+  &-col-fixed-left,
+  &-col-fixed-right {
+    position: sticky;
+    z-index: 10;
+  }
+
+  &-col-fixed-left-last::after,
+  &-col-fixed-right-first::after {
+    position: absolute;
+    top: 0;
+    bottom: -@table-border-width;
+    left: 0;
+    width: @table-size-shadow-wrapper-width;
+    box-shadow: none;
+    transform: translateX(-100%);
+    transition: box-shadow @transition-duration-1
+      @transition-timing-function-linear;
+    content: '';
+    pointer-events: none;
+  }
+
+  // ????
+  &-col-fixed-left-last::after {
+    right: 0;
+    left: unset;
+    transform: translateX(100%);
+  }
+
+  &-cell-text-ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  // useless
+  &-editable-row {
+    .@{table-prefix-cls}-cell-wrap-value {
+      border: @table-border-width solid @table-color-editable-body-cell-border;
+      border-radius: @table-border-radius;
+      cursor: pointer;
+      transition: all @transition-duration-1 @transition-timing-function-linear;
+    }
+
+    &:hover {
+      .@{table-prefix-cls}-cell-wrap-value {
+        border: @table-border-width solid @table-color-border;
+      }
+    }
+  }
+
+  //&-cell {
+  //  word-break: break-all;
+  //}
+
+  // Expand
+  .@{table-prefix-cls}-expand-btn {
+    .expandBtn();
+  }
+
+  &-cell-expand-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  &-cell-expand-icon &-cell-inline-icon {
+    display: inline-flex;
+    margin-right: @table-spacing-expand-button-margin-right;
+
+    .@{prefix}-icon-loading {
+      color: @color-primary-6;
+    }
+  }
+
+  &-cell-expand-icon-hidden {
+    display: inline-block;
+    width: @table-size-expand-button;
+    height: @table-size-expand-button;
+    margin-right: @table-spacing-expand-button-margin-right;
+  }
+
+  &-tr-expand .@{table-cls-td} {
+    background-color: @table-color-bg-expand-content;
+  }
+
+  &-cell-fixed-expand {
+    position: sticky;
+    left: 0;
+    box-sizing: border-box;
+  }
+
+  &-tr-expand .@{table-cls-td} & {
+    .@{table-prefix-cls}-container {
+      border: none;
+    }
+
+    .@{table-cls-th} {
+      border-bottom: @table-border-width @table-border-style @table-color-border;
+    }
+
+    .@{table-cls-th},
+    .@{table-cls-td} {
+      background-color: transparent;
+    }
+
+    .@{table-prefix-cls}-pagination {
+      margin-bottom: @table-spacing-pagination-margin;
+    }
+  }
+
+  // Selection
+  //& &-th&-operation &-th-item,
+  //& &-td&-operation {
+  //  padding-right: @table-spacing-selection-padding-horizontal;
+  //  padding-left: @table-spacing-selection-padding-horizontal;
+  //}
+  &-th&-operation,
+  &-td&-operation {
+    text-align: center;
+  }
+
+  &-th&-operation &-cell,
+  &-td&-operation &-cell {
+    display: flex;
+    justify-content: center;
+    padding: 0;
+  }
+
+  &-radio,
+  &-checkbox {
+    justify-content: center;
+  }
+
+  &-checkbox .@{prefix}-checkbox,
+  &-radio .@{prefix}-radio {
+    padding-left: 0;
+  }
+
+  // colgroup selection
+  &-selection-checkbox-col,
+  &-selection-radio-col {
+    .fixed-width(@table-size-selection-col-width);
+  }
+
+  &-expand-col {
+    .fixed-width(@table-size-expand-icon-col-width);
+  }
+
+  &-drag-handle-col {
+    .fixed-width(@table-size-drag-handle-col-width);
+  }
+
+  &-th {
+    transition: background-color @transition-duration-1
+      @transition-timing-function-linear;
+  }
+
+  &-cell-with-sorter {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      background-color: @table-color-bg-header-sorted-cell_hover;
+    }
+  }
+
+  &-cell-with-filter {
+    display: flex;
+    align-items: center;
+  }
+
+  &-cell-next-ascend &-sorter-icon {
+    .@{prefix}-icon-caret-up {
+      color: @table-color-header-sorter-icon_next;
+    }
+  }
+
+  &-cell-next-descend &-sorter-icon {
+    .@{prefix}-icon-caret-down {
+      color: @table-color-header-sorter-icon_next;
+    }
+  }
+
+  &-sorter {
+    display: inline-block;
+    margin-left: @table-spacing-header-sorter-icon-margin-left;
+    vertical-align: -3px;
+  }
+
+  &-sorter&-sorter-direction-one {
+    vertical-align: 0;
+  }
+
+  &-sorter-icon {
+    position: relative;
+    width: @table-size-header-sorter-icon-width;
+    height: @table-size-header-sorter-icon-height;
+    overflow: hidden;
+    line-height: @table-size-header-sorter-icon-height;
+
+    .@{prefix}-icon-caret-up,
+    .@{prefix}-icon-caret-down {
+      position: absolute;
+      top: 50%;
+      color: @table-color-header-sorter-icon;
+      font-size: @table-font-size-header-sorter-icon;
+      transition: all @transition-duration-1 @transition-timing-function-linear;
+    }
+
+    .@{prefix}-icon-caret-up {
+      top: @table-position-header-sorter-icon-up-top;
+      left: @table-position-header-sorter-icon-left;
+    }
+
+    .@{prefix}-icon-caret-down {
+      top: @table-position-header-sorter-icon-down-top;
+      left: @table-position-header-sorter-icon-left;
+    }
+
+    &&-active {
+      svg {
+        color: @table-color-header-sorter-icon_active;
+      }
+    }
+  }
+
+  &-filters {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: @table-size-filters-width;
+    height: 100%;
+    line-height: 1;
+    vertical-align: 0;
+    background-color: transparent;
+    cursor: pointer;
+    transition: all @transition-duration-1 @transition-timing-function-linear;
+
+    &:hover,
+    &-open {
+      background-color: @table-color-bg-header-filters-icon_hover;
+    }
+
+    svg {
+      color: @table-color-header-filters-icon;
+      font-size: @table-font-size-filters-icon;
+      transition: all @transition-duration-1 @transition-timing-function-linear;
+    }
+
+    &-active {
+      svg {
+        color: @table-color-header-filters-icon_active;
+      }
+    }
+
+    &-align-left {
+      position: relative;
+      width: auto;
+      margin-left: @table-spacing-header-sorter-icon-margin-left;
+
+      svg {
+        font-size: @table-font-size-header-sorter-icon;
+      }
+
+      &:hover,
+      &-open {
+        background: none;
+      }
+
+      &:hover::before,
+      &.@{table-prefix-cls}-filters-open::before {
+        background: @table-filters-icon-bg_hover;
+      }
+    }
+  }
+
+  /* ---- Table sorter, filter, checkbox, radio (End) ---- */
+  &-container {
+    position: relative;
+    border-radius: @table-border-radius @table-border-radius 0 0;
+  }
+
+  &-header {
+    flex-shrink: 0;
+    border-radius: @table-border-radius @table-border-radius 0 0;
+  }
+
+  &-container {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 0;
+
+    // chrome not fluent: https://codepen.io/quanqqq/pen/BaLpEQd?editors=0010
+    // border-radius: @table-border-radius @table-border-radius 0 0 0;
+
+    .@{table-prefix-cls}-content {
+      display: flex;
+      flex-direction: column;
+      width: auto;
+      height: 100%;
+
+      &-scroll-x {
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+    }
+
+    &::before,
+    &::after {
+      position: absolute;
+      //top: -@table-border-width;
+      //bottom: -@table-border-width;
+      z-index: 1;
+      width: @table-size-shadow-wrapper-width;
+      height: 100%;
+      box-shadow: none;
+      transition: box-shadow @transition-duration-1
+        @transition-timing-function-linear;
+      content: '';
+      pointer-events: none;
+    }
+
+    &::before {
+      top: 0;
+      left: 0;
+      border-top-left-radius: @table-border-radius;
+    }
+
+    &::after {
+      top: 0;
+      right: 0;
+      border-top-right-radius: @table-border-radius;
+    }
+
+    // box-shadow on the left side of the scroll table
+    &:not(.@{table-prefix-cls}-has-fixed-col-left) {
+      &.@{table-prefix-cls}-scroll-position-right::before,
+      &.@{table-prefix-cls}-scroll-position-middle::before {
+        box-shadow: @table-shadow-left;
+      }
+    }
+
+    // box-shadow on the right side of the scroll table
+    &:not(.@{table-prefix-cls}-has-fixed-col-right) {
+      &.@{table-prefix-cls}-scroll-position-left::after,
+      &.@{table-prefix-cls}-scroll-position-middle::after {
+        box-shadow: @table-shadow-right;
+      }
+    }
+  }
+
+  &-header {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    background-color: @table-color-bg-header-cell;
+    scrollbar-color: transparent transparent;
+
+    &-sticky {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+  }
+
+  &:not(&-empty) &-header::-webkit-scrollbar {
+    // 仅隐藏横向滚动条
+    height: 0;
+    background-color: transparent;
+  }
+
+  &&-empty &-header {
+    overflow-x: auto;
+  }
+
+  &-body {
+    position: relative;
+    width: 100%;
+    min-height: @table-size-body-min-width;
+    overflow: auto;
+    background-color: @table-color-body-background;
+  }
+
+  &-border {
+    .@{table-prefix-cls}-container {
+      border-top: @table-border-width @table-border-style @table-color-border;
+      border-left: @table-border-width @table-border-style @table-color-border;
+
+      // ??用处
+      //&::before {
+      //  position: absolute;
+      //  bottom: 0;
+      //  left: 0;
+      //  z-index: 2;
+      //  width: 100%;
+      //  height: @table-border-width;
+      //  background-color: @table-color-border;
+      //  content: '';
+      //}
+    }
+
+    .@{table-prefix-cls}-scroll-y {
+      border-bottom: @table-border-width @table-border-style @table-color-border;
+
+      .@{table-prefix-cls}-body .@{table-cls-tr}:last-of-type .@{table-cls-td},
+      tfoot .@{table-cls-tr}:last-of-type .@{table-cls-td} {
+        border-bottom: none;
+
+        &.@{table-prefix-cls}-col-fixed-left-last::after,
+        &.@{table-prefix-cls}-col-fixed-right-first::after {
+          bottom: 0;
+        }
+      }
+    }
+
+    .@{table-cls-tr} .@{table-cls-th} {
+      border-bottom: @table-border-width @table-border-style @table-color-border;
+    }
+
+    //.@{table-prefix-cls}-tr-expand .@{table-prefix-cls}-cell-fixed-expand {
+    //  border-left: @table-border-width @table-border-style @table-color-border;
+    //}
+
+    .@{table-prefix-cls}-footer {
+      border: @table-border-width @table-border-style @table-color-border;
+      border-top: 0;
+    }
+  }
+
+  &-border:not(&-border-cell) {
+    .@{table-prefix-cls}-container {
+      border-right: @table-border-width @table-border-style @table-color-border;
+    }
+
+    //.@{table-cls-tr} .@{table-cls-th}[colspan] {
+    //  border-bottom: none;
+    //}
+    //
+    //.@{table-prefix-cls}-tr-expand .@{table-prefix-cls}-cell-fixed-expand {
+    //  border-left: none;
+    //}
+  }
+
+  &-border-cell {
+    .@{table-cls-th},
+    .@{table-cls-td}:not(.@{table-prefix-cls}-tr-expand) {
+      border-right: @table-border-width @table-border-style @table-color-border;
+    }
+
+    .@{table-cls-th}-resizing,
+    .@{table-cls-td}-resizing:not(.@{table-prefix-cls}-tr-expand) {
+      border-right-color: @table-color-border_resizing;
+    }
+  }
+
+  &-border-header-cell {
+    .@{table-cls-th} {
+      border-right: @table-border-width @table-border-style @table-color-border;
+      border-bottom: @table-border-width @table-border-style @table-color-border;
+    }
+    .@{table-cls-th}-resizing,
+    .@{table-cls-td}-resizing:not(.@{table-prefix-cls}-tr-expand) {
+      border-right-color: @table-color-border_resizing;
+    }
+  }
+
+  &-border&-border-header-cell {
+    thead {
+      .@{table-cls-tr}:first-child .@{table-cls-th}:last-child {
+        border-right: 0;
+      }
+    }
+  }
+
+  &-border-body-cell {
+    .@{table-cls-td}:not(:last-child):not(.@{table-prefix-cls}-tr-expand) {
+      border-right: @table-border-width @table-border-style @table-color-border;
+    }
+  }
+
+  // stripe: true
+  &-stripe {
+    &:not(.@{table-prefix-cls}-dragging)
+      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty):not(.@{table-prefix-cls}-tr-summary):nth-child(even),
+    .@{table-cls-tr}-drag {
+      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
+        background-color: @table-color-bg-body-stripe-row;
+      }
+
+      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
+      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          background-color: @table-color-bg-body-stripe-row;
+          content: '';
+        }
+      }
+    }
+  }
+
+  & .@{table-cls-tr}-draggable {
+    cursor: move;
+  }
+
+  &-hover {
+    &:not(.@{table-prefix-cls}-dragging)
+      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty):not(.@{table-prefix-cls}-tr-summary):hover,
+    .@{table-cls-tr}-drag {
+      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
+        background-color: @table-color-bg-body-row_hover;
+      }
+
+      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
+      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          background-color: @table-color-bg-body-row_hover;
+          content: '';
+        }
+      }
+    }
+
+    .@{table-cls-tr}-expand:not(.@{table-prefix-cls}-tr-empty):hover {
+      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
+        background-color: @table-color-bg-expand-content_hover;
+      }
+    }
+
+    // 去除嵌套子表格的 hover 效果
+    .@{table-prefix-cls}-tr-expand .@{table-cls-td} & {
+      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty) {
+        .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
+          background-color: transparent;
+        }
+
+        .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
+        .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
+          &::before {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  &-tfoot {
+    position: relative;
+    z-index: 1;
+    flex-shrink: 0;
+    width: 100%;
+    overflow-x: auto;
+    background-color: @table-color-bg-tfoot;
+    box-shadow: 0 -@table-border-width 0 @table-color-border;
+    scrollbar-color: transparent transparent;
+
+    &::-webkit-scrollbar {
+      height: 0;
+      background-color: transparent;
+    }
+  }
+
+  & tfoot &-td {
+    background-color: @table-color-bg-tfoot;
+  }
+
+  // Active row
+  &-tr-checked .@{table-cls-td} {
+    background-color: @table-color-bg-body-row_active;
+  }
+
+  // Size
+  .table-size(large);
+
+  &-size-medium {
+    .table-size(medium);
+  }
+
+  &-size-small {
+    .table-size(small);
+  }
+
+  &-size-mini {
+    .table-size(mini);
+  }
+
+  // virtualized
+  &-virtualized .@{table-cls-table} {
+    table-layout: fixed;
+  }
+
+  &-virtualized div&-body div&-tr {
+    display: flex;
+  }
+
+  &-virtualized div&-body div&-td {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+}
+
+.@{table-prefix-cls}-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: @table-spacing-pagination-margin;
+
+  &-left {
+    justify-content: flex-start;
+  }
+
+  &-center {
+    justify-content: center;
+  }
+
+  &-top {
+    margin-top: 0;
+    margin-bottom: @table-spacing-pagination-margin;
+  }
+}
+
+.@{prefix}-virtual-list {
+  & > .@{table-prefix-cls}-element {
+    width: auto;
+  }
+}
+
+@{arco-theme-tag}[arco-theme='dark'] {
+  .@{table-prefix-cls}-tr-checked .@{table-cls-td} {
+    background-color: @table-color-bg-body-row_active_dark;
+  }
+}