/**
 * table sticky
 * 由于样式较为复杂，则新开文件专用于设置 sticky 以及 fill-border
 **/


// 表格边框样式
$table-td-border-color = #e6e7eb


.n-tx-sticky[class]
  z-index 1
  position sticky
  background-color inherit

/**
 * 全局样式
 * 由于sticky状态下，左右边框不包含在sticky中，所以 sticky / natural 元素有不同的方式添加边框：
 * sticky 元素，以::before伪类元素添加border;
 * natural 元素，以正常border方式添加.
 **/

.n-tx-sticky:before
.n-tx-natural
  border-left 0 solid $table-td-border-color
  border-right @border-left

/**
 * 一般模式下
 * 左右固定的时候，需要设置边界的边框。
 * | sticky | sticky-end ->| natural | natural |<- sticky-start | sticky |
 **/

// 给 sticky边界元素 添加伪类元素
.n-tx-sticky-end:before
.n-tx-sticky-start:before
  content ''
  z-index 1
  n-absolute(0,0,0,0)
  pointer-events none
  transition box-shadow 0.2s ease
// 增加边框
.n-tx-sticky-end[class]:before
  border-right-width 1px
.n-tx-sticky-start[class]:before
  border-left-width 1px
// 阴影
.n-table-has-scroll-left .n-tx-sticky-end:before
  box-shadow 4px 0 4px -2px rgba(0,0,0,0.06)
.n-table-has-scroll-right .n-tx-sticky-start:before
  box-shadow -4px 0 4px -2px rgba(0,0,0,0.06)

/**
 * 所有边框模式下
 * 左右固定的时候，需要设置外边框，尽量设置所有左边框(参考面向示意)。
 * ->| sticky |<- sticky-end (向右偏移1px)->|<- natural |<- natural |<- natural |<- sticky-start |<- sticky |<-
 * ->| natural |<- natural |<- natural |<-
 **/

.n-table-fill-border
  // 为容器添加外边框
  .n-table-top
  .n-table-header
  .n-table-footer
    border 1px solid $table-td-border-color
  .n-table-main
    border-left 1px solid $table-td-border-color
    border-right @border-left

  // 给所有 sticky元素 添加伪类元素
  .n-tx-sticky:before
    content ''
    z-index 1
    n-absolute(0,0,0,0)
    pointer-events none
  // sticky-end 元素 需要向右偏移 1px 用于覆盖右侧边框
  .n-tx-sticky-end:before
    right -1px

  // sticky / natural 设置左边框
  .n-tx-sticky:before
  .n-tx-natural
    border-left-width 1px
  // 最左侧元素，无左边框
  .n-tx-sticky-0:before
  .n-tx-natural-0
    border-left-width 0
  // n-tx-sticky 元素 需要向下偏移 1px 用于覆盖原始下边框
  .n-td.n-tx-sticky:before
    bottom -1px
    border-bottom 1px solid $table-td-border-color

.n-tx-vertical-middle
  vertical-align middle
.n-tx-vertical-bottom
  vertical-align bottom