.table {
  overflow-x: auto;
  width: 100%;
}
table {
  border-collapse: collapse;

  &.full-width {
    width: 100%;

    col {
      width: 8rem;
    }
  }
  col.icon {
    width: 1ch;
  }
  thead tr:not(.new) {
    background: var(--bg-1);
  }
  tr {
    border: 1px solid var(--gray);
    height: 2rem;
    line-height: 2rem;

    tbody &:where(:nth-of-type(even)) {
      background: #eeeeff;
    }
    &.more,
    &.new {
      text-align: center;
      border-style: dashed;
    }
  }
  td,
  th {
    padding: 0 var(--gap);
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    &.empty {
      text-align: center;
      opacity: 0.8;
      font-weight: 300;
    }
  }

  .l {
    text-align: left;
  }
  .r,
  .value {
    text-align: right;
  }
  .c,
  .date {
    text-align: center;
  }
}
