.dv-index-switch {
  padding: $content-padding;
  background: rgba($dv-dark-background, 0.8);
  border-radius: $border-radius-large;

  .dv-index-switch-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: $component-size-large;
    padding: 0 $content-padding;
    font-size: $font-size;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border: $border-width solid rgba(61, 145, 223, 0.3);
    border-radius: $border-radius-large;

    &.active {
      color: $dv-dark-primary-color1;
      background-image: -webkit-linear-gradient(right, rgba($dv-dark-highlight-background, 0.3), rgba($dv-dark-highlight-background, 1), rgba($dv-dark-highlight-background, 0.3));
      border-color: $dv-dark-highlight-border-color;
    }

    &:not(:last-child) {
      margin-bottom: $component-span;
    }

    &-color {
      width: $font-size;
      height: $font-size;
      margin-right: $component-span;
      border-radius: 50%;
    }
  }
}