@index-bar-list-item-font-size: var(--font-size-xs);
@index-bar-list-item-color: var(--color-primary);
@index-bar-list-item-active-color: var(--color-danger);
@index-bar-list-item-height: 14px;
@index-bar-list-item-padding: 0 10px;

:root {
  --index-bar-list-item-font-size: @index-bar-list-item-font-size;
  --index-bar-list-item-color: @index-bar-list-item-color;
  --index-bar-list-item-active-color: @index-bar-list-item-active-color;
  --index-bar-list-item-height: @index-bar-list-item-height;
  --index-bar-list-item-padding: @index-bar-list-item-padding;
}

.var-index-bar {
  position: relative;

  &__anchor-list {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  &__anchor-item {
    font-size: var(--index-bar-list-item-font-size);
    display: flex;
    align-items: center;
    height: var(--index-bar-list-item-height);
    justify-content: center;
    padding: var(--index-bar-list-item-padding);
    color: var(--index-bar-list-item-color);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    &--active {
      color: var(--index-bar-list-item-active-color);
    }
  }
}