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

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

  &-time {
    margin-top: $text-span;
    color: $title-text-color;
    font-size: $font-size-small;
  }

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

    .dv-index-table-item {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      overflow: hidden;
      text-align: center;
      white-space: nowrap;
      user-select: none;

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

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

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

  &.inner-header {
    display: flex;
    align-items: stretch;

    .dv-index-table-header {
      padding: $content-padding;
      background: transparent;
      margin-right: $border-width;
    }

    .dv-index-table-items {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: stretch;

      .dv-index-table-item {
        flex: 1;
        align-items: stretch;
        display: flex;
        flex-direction: column;

        .dv-index-table-item-value {
          height: auto;
          flex: 1;
        }
      }
    }
  }

  &.dark {
    .dv-index-table-header {
      background: $dv-dark-component-background;

      .dv-index-table-title {
        color: $dv-dark-primary-text-color;
      }
      .dv-index-table-time {
        color: $dv-dark-secondary-text-color;
      }
    }
    .dv-index-table-items {
      .dv-index-table-item {
        .dv-index-table-item-value {
          background-color: $dv-dark-component-background;
          color: $dv-dark-primary-text-color;
        }
      }
    }
  }
}
