@import '~scss/variables';

.table {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: solid #e3e9ef 1px;
}

.body {
  flex: 1;
  overflow: auto;
}

.header {
  display: flex;
  height: 42px;
  line-height: 42px;
  background-color: $bg-color;
  font-weight: 600;
  position: relative;
  border-bottom: solid 1px #eee;
  @at-root {
    .headerItems {
      flex: 1;
      padding: 0 5px;
    }
    .visibleBtn {
      cursor: pointer;
      position: absolute;
      right: 0;
      padding: 0 20px;
      @at-root {
        .dropdown {
          width: 222px;
          padding: 12px 8px;
          font-weight: bold;
          h3 {
            color: $light-color08;
          }
        }
        .visibleItem {
          line-height: 32px;
          padding: 0 4px;
          span {
            margin-left: 4px;
            vertical-align: middle;
          }
          &:hover {
            border-radius: 4px;
            background-color: $bg-color;
          }
        }
      }
    }
  }
}

.tr {
  display: flex;
  line-height: 32px;
  &:nth-child(2n) {
    background-color: $lightest;
  }
  &:hover {
    background-color: $lightest;
  }
  @at-root {
    .bodyItems {
      flex: 1;
      padding: 0 5px;
      overflow: hidden;
    }
  }
}
