nav[scrollbar] {
    align-items: center;
    display: var(--display-navigation);
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: calc(var(--size-navigation-size) * 0.5);
}

nav[scrollbar] a {
    padding: calc(var(--size-navigation-size) * 2);
    position: relative;
    width: var(--size-navigation-size);
}

nav[scrollbar] a::after {
    background-color: var(--color-font);
    border-radius: calc(var(--size-navigation-size) * 0.5);
    content: '';
    height: calc(100% - (var(--size-navigation-size) * 4));
    left: calc(50% - (var(--size-navigation-size) * 0.5));
    position: absolute;
    top: calc((var(--size-navigation-size) * 2));
    transition: background-color var(--time-active-transition);
    width: var(--size-navigation-size);
}

nav[scrollbar] a:hover::after { 
    background-color: var(--color-active);
}

nav[scrollbar] a:nth-child(1) {
    animation: scrollbar_one linear;
    animation-timeline: scroll();
}

nav[scrollbar] a:nth-child(2) {
    animation: scrollbar_two linear;
    animation-timeline: scroll();
}

nav[scrollbar] a:nth-child(3) {
    animation: scrollbar_three linear;
    animation-timeline: scroll();
}

@keyframes scrollbar_one {
    0% {
        height: var(--size-scrollbar-expanded);
    }
    50% {
        height: var(--size-navigation-size);
    }
    100% {
        height: var(--size-navigation-size);
    }
}

@keyframes scrollbar_two {
    0% {
        height: var(--size-navigation-size);
    }
    50% {
        height: var(--size-scrollbar-expanded);
    }
    100% {
        height: var(--size-navigation-size);
    }
}

@keyframes scrollbar_three {
    0% {
        height: var(--size-navigation-size);
    }
    50% {
        height: var(--size-navigation-size);
    }
    100% {
        height: var(--size-scrollbar-expanded);
    }
}