.navigation
{
    display:            contents;
}


.section-navigation-dot
{
    position:           fixed;
    z-index:            10;
    top:                calc(50% + var(--navigation-dot-offset));
    right:              clamp(1rem, 2.5vw, 2.5rem);

    display:            grid;
    place-items:        center;

    width:              2rem;
    height:             2rem;

    cursor:             pointer;
    transform:          translateY(-50%);

    mix-blend-mode:     soft-light;
}


.section-navigation-dot::before
{
    content:            "";

    width:              2rem;
    height:             2rem;

    border-radius:      50%;
    background-color:   black;
    opacity:            0.75;
    transform:          scale(0.5);

    transition:         transform 300ms ease;

}


.section-navigation-dot:hover::before
{
    opacity:            0.9;
}


.section-navigation-dot.is-active::before
{
    background-color:   var(--white);
    opacity:            1;
    transform:          scale(1);

    mix-blend-mode:     normal;
}


.section-navigation-dot.is-active
{
    mix-blend-mode:     normal;
}




@media (prefers-reduced-motion: reduce)
{
    html
    {
        scroll-behavior: auto;
    }

    .section-navigation-dot::before
    {
        transition: none;
    }
}