.dv-index-table {
  &-header {
    padding: $content-padding;
    text-align: center;
  }

  &-title {
    font-size: $font-size;
    font-weight: bold;
    color: $primary-color;
  }

  &-time {
    margin-top: $component-span;
    color: $title-text-color;
  }

  ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;

    li {
      display: flex;
      flex: 1;
      flex-shrink: 1;
      align-items: center;
      justify-content: center;
      height: $component-size;
      padding: 0 $text-padding;
      overflow: hidden;
      text-align: center;
      white-space: nowrap;
      user-select: none;

      &:not(:last-child) {
        margin-right: $border-width;
      }
    }
  }

  .dv-index-table-body {
    .dv-index-table-names {
      .dv-index-table-name {
        color: $title-text-color;
      }
    }

    .dv-index-table-values {
      background-color: $background;

      .dv-index-table-value {
        display: flex;
        align-items: center;
        justify-content: center;
        height: $component-size;
        color: $content-text-color;
      }
    }
  }
}
