@import './var.scss';

:root {
    --index-bar-sidebar-z-index: #{$index-bar-sidebar-z-index};
    --index-bar-index-font-size: #{$index-bar-index-font-size};
    --index-bar-index-line-height: #{$index-bar-index-line-height};
    --index-bar-index-active-color: #{$index-bar-index-active-color};
    --index-anchor-z-index: #{$index-anchor-z-index};
    --index-anchor-padding: #{$index-anchor-padding};
    --index-anchor-text-color: #{$index-anchor-text-color};
    --index-anchor-font-weight: #{$index-anchor-font-weight};
    --index-anchor-font-size: #{$index-anchor-font-size};
    --index-anchor-line-height: #{$index-anchor-line-height};
    --index-anchor-bg: #{$index-anchor-bg};
    --index-anchor-sticky-text-color: #{$index-anchor-sticky-text-color};
    --index-anchor-sticky-bg: #{$index-anchor-sticky-bg};
}

.jing-index-bar {
    width: 100%;
    &__sidebar {
        position: fixed;
        top: 50%;
        right: 0;
        z-index: var(--index-bar-sidebar-z-index);
        display: flex;
        flex-direction: column;
        text-align: center;
        transform: translateY(-50%);
        cursor: pointer;
        user-select: none;
    }

    &__index {
        padding: 0 var(--padding-xs) 0 var(--padding-md);
        font-weight: 500;
        font-size: var(--index-bar-index-font-size);
        line-height: var(--index-bar-index-line-height);

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

.jing-index-anchor {
    z-index: var(--index-anchor-z-index);
    padding: var(--index-anchor-padding);
    color: var(--index-anchor-text-color);
    font-weight: var(--index-anchor-font-weight);
    font-size: var(--index-anchor-font-size);
    line-height: var(--index-anchor-line-height);
    background-color: var(--index-anchor-bg);

    &--sticky {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        color: var(--index-anchor-sticky-text-color);
        background-color: var(--index-anchor-sticky-bg);
    }
}