@import "./font/iconfont";

// text
@prefixCls: zk-table;
// color
@black: #1f2d3d;
@white: #ffffff;
@border: #f6f8fb;
@hoverRow: #ebf7ff;
@clickRow: #e6f7ff;
@backgroundRow: #f8f8f9;

.@{prefixCls} {
  position: relative;
  //width: 100%;
  box-sizing: border-box;
  background-color: @white;
  // border: 1px solid @border;
  font-size: 12px;
  line-height: 26px;
  color: @black;
  overflow: hidden;
}

.@{prefixCls}__header-wrapper,
.@{prefixCls}__footer-wrapper {
  overflow: hidden;
}

.@{prefixCls}__body-wrapper {
  overflow: auto;
}

.@{prefixCls}__header,
.@{prefixCls}__body,
.@{prefixCls}__footer {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

.@{prefixCls}__header-row {
  height: 40px;
  box-sizing: border-box;
  background-color: @backgroundRow;
  // border-bottom: 1px solid @border;
}

.@{prefixCls}__footer-row {
  height: 40px;
  box-sizing: border-box;
  background-color: @white;
  // border-top: 1px solid @border;
}

.@{prefixCls}__body-row {
  height: 40px;
  box-sizing: border-box;
  /* &:not(:first-of-type) {
    border-top: 1px solid @border;
  } */
}

.@{prefixCls}__header-cell,
.@{prefixCls}__body-cell,
.@{prefixCls}__footer-cell {
  position: relative;
  box-sizing: border-box;
  text-align: left;
  vertical-align: middle;
  word-break: break-all;
  overflow: hidden;
}

.@{prefixCls}__header-cell {
  font-weight: bold;
}

.@{prefixCls}__cell-inner {
  padding: 0 8px;
  height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 40px;
}

.@{prefixCls}__header-cell-inner {
  padding: 0 8px;
}

.@{prefixCls}--firstProp-header-inner {
  padding-left: 12px;
}

.@{prefixCls}--empty-row {
  height: 80px;
}

.@{prefixCls}--empty-content {
  text-align: center;
}

.@{prefixCls}--center-cell {
  text-align: center;
}

.@{prefixCls}--right-cell {
  text-align: right;
}

.@{prefixCls}--stripe-row {
  background-color: @backgroundRow;
}

.@{prefixCls}--row-hover {
  background-color: @hoverRow;
}

.@{prefixCls}--row-select {
  background-color: @clickRow;
}

.@{prefixCls}--border-cell {
  &:not(:last-of-type) {
    border-right: 1px solid @border;
  }
}

.@{prefixCls}--tree-icon {
  margin-left: 2px;
  margin-right: 6px;
  cursor: pointer;
  color: #1472DC;
  font-size: 18px;
}

.@{prefixCls}--tree-top-line {
  position: absolute;
  display: inline-block;
  top: -1px;
  left: -5px;
  background-color: #c0c4cc;
  width: 1px;
  height: 50%;
  height: 19px\0;
}

.@{prefixCls}--tree-left-line {
  position: absolute;
  display: inline-block;
  top: 18px;
  left: -5px;
  background-color: #c0c4cc;
  height: 1px;
  width: 19px;
}

.@{prefixCls}--tree-bottom-line {
  position: absolute;
  display: inline-block;
  top: 26px;
  left: 19px;
  background-color: #c0c4cc;
  width: 1px;
  height: 65%;
}

.@{prefixCls}--tree-left-bottom-line {
  position: absolute;
  display: inline-block;
  top: 19px;
  left: -5px;
  background-color: #c0c4cc;
  width: 1px;
  height: 65%;
  height: 21px\0;
}
.@{prefixCls}--tree-level1-line {
  position: absolute;
  display: inline-block;
  top: 0;
  left: -29px;
  background-color: #c0c4cc;
  width: 1px;
  height: 100%;
}
.@{prefixCls}--tree-level2-line {
  position: absolute;
  display: inline-block;
  top: 0;
  left: -29px;
  background-color: #c0c4cc;
  width: 1px;
  height: 100%;
}
.@{prefixCls}--tree-level3-line {
  position: absolute;
  display: inline-block;
  top: 0;
  left: -29px;
  background-color: #c0c4cc;
  width: 1px;
  height: 100%;
}
.@{prefixCls}--tree-account-wrapper {
  display: inline-block;
}

.@{prefixCls}--tree-account {
  display: inline-block;
  color: #5CB87A;
}

.@{prefixCls}--expand-inner {
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease-in-out;
  display: inline-block;
}

.@{prefixCls}--expanded-inner {
  transform: rotate(90deg);
}

.@{prefixCls}--expand-content {
  position: relative;
  padding: 20px 0 20px 65px;
  background-color: #e6e8ec;
}

.@{prefixCls}--expand-left-line {
  position: absolute;
  left: 69px;
  left: 70px\0;
  top: -1px;
  width: 1px;
  height: 105%;
  background-color: #c0c4cc;
}

.@{prefixCls}--expand-level1-line {
  position: absolute;
  left: 70px;
  left: 70px\0;
  top: -1px;
  width: 1px;
  height: 105%;
  background-color: #c0c4cc;
}

.@{prefixCls}--expand-level2-line {
  position: absolute;
  left: 93px;
  left: 94px\0;
  top: -1px;
  width: 1px;
  height: 105%;
  background-color: #c0c4cc;
}

.@{prefixCls}--expand-level3-line {
  position: absolute;
  left: 117px;
  left: 118px\0;
  top: -1px;
  width: 1px;
  height: 105%;
  background-color: #c0c4cc;
}

.@{prefixCls}--expand-level4-line {
  position: absolute;
  left: 141px;
  left: 142px\0;
  top: -1px;
  width: 1px;
  height: 105%;
  background-color: #c0c4cc;
}

@-moz-document url-prefix() {
  .@{prefixCls}--expand-left-line {
    left: 70px;
  }
  .@{prefixCls}--expand-level1-line {
    left: 70px;
  }
  .@{prefixCls}--expand-level2-line {
    left: 94px;
  }
  .@{prefixCls}--expand-level3-line {
    left: 118px;
  }
  .@{prefixCls}--expand-level4-line {
    left: 142px;
  }
}