.#{$namespace} {
  &-table {
    width: 100%;
    margin: 10px 0;
    background-color: $white;
    color: $g-333;
    tr {
      @include transition();
    }
    th {
      text-align: left;
      font-weight: 600;
    }
    &-mend {
      background-color: $white;
    }
    &-click,
    &-hover,
    &[hui-even] tbody tr:nth-child(even) {
      background-color: $g-200;
    }
    &-checked {
      background-color: $g-500;
    }
    &-checked.hui-table-click,
    &-checked.hui-table-hover {
      background-color: rgba($primary, $alpha: 0.2);
    }

    &-col-set,
    &-fixed-r,
    &-grid-down,
    &-header,
    &-mend,
    &-page,
    &-tips-main,
    &-tool,
    &-total,
    &-view,
    &[hui-skin="line"],
    &[hui-skin="row"] {
      border-width: 1px;
      border-style: solid;
      border-color: $g-200;
    }
    td,
    th {
      position: relative;
      padding: 9px 15px;
      min-height: 20px;
      line-height: 20px;
      font-size: 14px;
    }
    &[hui-skin="line"] td,
    &[hui-skin="line"] th {
      border-width: 0;
      border-bottom-width: 1px;
    }
    &[hui-skin="row"] td,
    &[hui-skin="row"] th {
      border-width: 0;
      border-right-width: 1px;
    }

    &[hui-skin="nob"] td,
    &[hui-skin="nob"] th {
      border: none;
    }
    img {
      max-width: 100px;
    }
    &[hui-size="lg"] td,
    &[hui-size="lg"] th {
      padding-top: 15px;
      padding-right: 30px;
      padding-bottom: 15px;
      padding-left: 30px;
    }
    &-view &[hui-size="lg"] &-cell {
      height: 50px;
      line-height: 40px;
    }
    &[hui-size="sm"] td,
    &[hui-size="sm"] th {
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 5px;
      padding-left: 10px;
      font-size: 12px;
    }

    &-view &[hui-size="sm"] &-cell {
      height: 30px;
      line-height: 20px;
      padding-top: 5px;
      padding-left: 11px;
      padding-right: 11px;
    }

    &[hui-data],
    &[hui-options] {
      display: none;
    }

    &-box {
      position: relative;
      overflow: hidden;
    }
    &-view {
      clear: both;
      .#{$namespace} {
        &-table {
          position: relative;
          width: auto;
          margin: 0;
          border: 0;
          border-collapse: separate;

          &[hui-skin="line"] {
            border-width: 0;
            border-right-width: 1px;
          }
          &[hui-skin="row"] {
            border-width: 0;
            border-bottom-width: 1px;
          }
          td,
          tr {
            padding: 0;
            border-top: none;
            border-left: none;
          }
          th[hui-event] {
            cursor: pointer;

            &.hui-unselect {
              .hui-table-cell {
                span {
                  cursor: pointer;
                }
              }
            }
          }

          td,
          th span {
            cursor: default;
          }

          td[data-edit] {
            cursor: text;
            &:hover::after {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              box-sizing: border-box;
              border: 1px solid $primary;
              pointer-events: none;
              content: "";
            }
          }
        }

        &-form-checkbox[hui-skin="primary"] {
          width: 18px;
          height: 18px;
          line-height: 16px;
        }

        &-form-radio {
          line-height: 0;
          padding: 0;
          & > i {
            margin: 0;
            font-size: 20px;
          }
        }
      }
    }

    &-init {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      z-index: 199;
      .#{$namespace}-icon,
      i {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -15px 0 0 -15px;
        font-size: 30px;
        color: #c2c2c2;
      }
    }

    // 头部
    &-header {
      .#{$namespace}-table {
        margin-bottom: -1px;
      }
    }

    &-column {
      .#{$namespace}-btn-container {
        margin-bottom: -8px;
        .#{$namespace}-btn {
          margin-right: 8px;
        }
      }
    }

    &-tool {
      .#{$namespace}-inline[hui-event] {
        position: relative;
        width: 26px;
        height: 26px;
        padding: 5px;
        line-height: 16px;
        margin-right: 10px;
        text-align: center;
        color: #333;
        border: 1px solid #ccc;
        cursor: pointer;
        -webkit-transition: 0.5s all;
        transition: 0.5s all;

        &:hover {
          border: 1px solid #999;
        }
      }

      &-temp {
        padding-right: 120px;
      }
      &-self {
        position: absolute;
        right: 17px;
        top: 10px;
        .#{$namespace}-inline[hui-event] {
          margin: 0 0 0 10px;
        }
      }
    }

    &-tool-panel {
      position: absolute;
      top: 29px;
      left: -1px;
      z-index: 399;
      padding: 5px 0 !important;
      min-width: 150px;
      min-height: 40px;
      border: 1px solid #d2d2d2;
      text-align: left;
      overflow-y: auto;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
      li {
        padding: 0 10px;
        margin: 0 !important;
        line-height: 30px;
        list-style-type: none !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-transition: 0.5s all;
        transition: 0.5s all;

        .#{$namespace}-form-checkbox[hui-skin="primary"] {
          width: 100%;
          padding-left: 28px;
          i {
            position: absolute;
            left: 0;
            top: 0;
          }
          span {
            padding: 0;
          }
        }
        &:hover {
          background-color: #f8f8f8;
        }
      }
    }

    &-tool .#{$namespace}-table-tool-self .#{$namespace}-table-tool-panel {
      left: auto;
      right: -1px;
    }

    &-col-set {
      position: absolute;
      right: 0;
      top: 0;
      width: 20px;
      height: 100%;
      border-width: 0;
      border-left-width: 1px;
      background-color: #fff;
    }

    &-sort {
      width: 10px;
      height: 20px;
      margin-left: 5px;
      cursor: pointer !important;

      .#{$namespace}-table-sort-asc {
        top: 3px;
        border-top: none;
        border-bottom-style: solid;
        border-bottom-color: #b2b2b2;
        &:hover {
          border-bottom-color: #5f5f5f;
        }
      }

      .#{$namespace}-table-sort-desc {
        bottom: 5px;
        border-bottom: none;
        border-top-style: solid;
        border-top-color: #b2b2b2;
        &:hover {
          border-bottom-color: #5f5f5f;
        }
      }

      &[hui-sort="asc"] {
        .#{$namespace}-table-sort-asc {
          border-bottom-color: #000;
        }
      }
      &[hui-sort="desc"] {
        .#{$namespace}-table-sort-desc {
          border-bottom-color: #000;
        }
      }
    }

    &-cell {
      height: 38px;
      line-height: 28px;
      padding: 6px 15px;
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;

      .#{$namespace}-form-checkbox[hui-skin="primary"] {
        top: -1px;
        padding: 0;
        & > div {
          padding-left: 24px;
        }
      }

      .#{$namespace}-table-link {
        color: $primary;
      }
      .#{$namespace}-btn {
        vertical-align: inherit;
      }

      &[align="center"] {
        -webkit-box-pack: center;
      }
      &[align="right"] {
        -webkit-box-pack: end;
      }
      &-checkbox,
      &-numbers,
      &-radio,
      &-space {
        text-align: center;
        -webkit-box-pack: center;
      }
    }

    &-body {
      position: relative;
      overflow: auto;
      margin-right: -1px;
      margin-bottom: -1px;
      .#{$namespace}-none {
        line-height: 26px;
        padding: 30px 15px;
        text-align: center;
        color: $g-999;
      }
    }

    &-fixed {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 101;
      .#{$namespace}-table-body {
        overflow: hidden;
      }

      &-l {
        box-shadow: 1px 0 8px rgba(0, 0, 0, 0.08);
      }
      &-r {
        left: auto;
        right: -1px;
        border-width: 0;
        border-left-width: 1px;
        box-shadow: -1px 0 8px rgba(0, 0, 0, 0.08);
        .#{$namespace}-table-header {
          position: relative;
          overflow: visible;
        }
      }
    }

    &-mend {
      position: absolute;
      right: -49px;
      top: 0;
      height: 100%;
      width: 50px;
      border-width: 0;
      border-left-width: 1px;
    }

    &-tool {
      position: relative;
      width: 100%;
      min-height: 50px;
      line-height: 30px;
      padding: 10px 15px;
      border-width: 0;
      border-bottom-width: 1px;

      .#{$namespace}-btn-container {
        margin-bottom: -10px;
      }
    }
    &-total {
      margin-bottom: -1px;
      border-width: 0;
      border-top-width: 1px;
      overflow: hidden;
    }
    &-page {
      border-width: 0;
      border-top-width: 1px;
      margin-bottom: -1px;
      white-space: nowrap;
      overflow: hidden;
      & > div {
        height: 26px;
      }
      .#{$namespace}-page {
        margin: 0;
      }
    }

    &-page {
      .#{$namespace}-laypage {
        a,
        span {
          height: 26px;
          line-height: 26px;
          margin-bottom: 10px;
          border: none;
          background: 0 0;
        }
        a,
        span.hui-laypage-curr {
          padding: 0 12px;
        }
        span {
          margin-left: 0;
          padding: 0;
        }
        .hui-laypage-prev {
          margin-left: -11px !important;
        }
        .hui-laypage-curr .hui-laypage-em {
          left: 0;
          top: 0;
          padding: 0;
        }
        button,
        input {
          height: 26px;
          line-height: 26px;
        }
        input {
          width: 40px;
        }
        button {
          padding: 0 10px;
        }
        select {
          height: 18px;
        }
      }
    }

    &-pagebar {
      float: right;
      line-height: 23px;
      .hui-btn-sm {
        margin-top: -1px;
      }
      .hui-btn-xs {
        margin-top: 2px;
      }
    }

    &-view select[hui-ignore] {
      display: inline-block;
    }

    &-patch .#{$namespace}-cell {
      padding: 0;
      width: 30px;
    }

    &-edit {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 189;
      min-width: 100%;
      min-height: 100%;
      padding: 5px 14px;
      border-radius: 0;
      box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
      background-color: #fff;
      &:focus {
        border-color: $primary !important;
      }
    }

    &-view {
      .#{$namespace}-form-checkbox,
      .#{$namespace}-form-radio,
      .#{$namespace}-switch {
        top: 0;
        margin: 0;
      }

      .#{$namespace}-form-checkbox {
        top: -1px;
        height: 26px;
        line-height: 26px;
        i {
          height: 26px;
        }
      }
    }

    &-grid .#{$namespace}-table-cell {
      overflow: visible;
    }

    &-grid-down {
      position: absolute;
      top: 0;
      right: 0;
      width: 24px;
      height: 100%;
      padding: 5px 0;
      border-width: 0;
      border-left-width: 1px;
      text-align: center;
      background-color: $white;
      color: $g-999;
      cursor: pointer;
    }

    &-grid-down i {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -8px 0 0 -8px;
      font-size: 14px;

      &:hover {
        background-color: $g-100;
      }
    }
    &-expanded {
      height: 95px;
    }

    &-expanded &-cell,
    &-view &[hui-size="lg"] &-expanded &-cell,
    &-view &[hui-size="sm"] &-expanded &-cell {
      height: auto;
      max-height: 94px;
      white-space: normal;
      text-overflow: ellipsis;
    }
    &-cell-c {
      position: absolute;
      bottom: -10px;
      right: 50%;
      margin-right: -9px;
      width: 20px;
      height: 20px;
      line-height: 18px;
      cursor: pointer;
      text-align: center;
      background-color: $white;
      border: 1px solid $g-200;
      border-radius: 50%;
      z-index: 1000;
      transition: 0.3s all;
      font-size: 14px;
      &:hover {
        background-color: rgba($primary, $alpha: 1);
      }
    }
    &-expanded td:hover {
      .#{$namespace}-table-cell {
        overflow: auto;
      }
    }

    body {
      .#{$namespace}-table-tips {
        .#{$namespace}-content {
          background: 0 0;
          padding: 0;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
        }
      }
    }

    &-tips-main {
      margin: -49px 0 0 -1px;
      max-height: 150px;
      padding: 8px 15px;
      font-size: 14px;
      overflow-y: scroll;
      background-color: $white;
      color: $g-700;
    }
    &-tips-c {
      position: absolute;
      right: -3px;
      top: -13px;
      width: 20px;
      height: 20px;
      padding: 3px;
      cursor: pointer;
      background-color: $g-700;
      border-radius: 50%;
      color: $white;

      &:hover {
        background-color: $g-600;
      }
      &::before {
        position: relative;
        right: -2px;
      }
    }
    &-tree-nodeIcon {
      max-width: 20px;
      & > * {
        width: 100%;
      }
    }
    &-tree-flexIcon,
    &-tree-nodeIcon {
      margin-right: 2px;
    }

    &-tree-flexIcon {
      cursor: pointer;
    }
  }
}
input.hui-input.hui-table-edit {
  height: 100%;
}

select.hui-table-edit {
  padding: 0 0 0 10px;
  border-color: $g-200;
}