nav[site] {
    display: flex;
    height: 100%;
}

nav[site] a {
    margin: 0 0.4em 0 calc(var(--size-navigation-size) * 2);
    position: relative;
}

nav[site] a::after {
    background-color: var(--color-font);
    border-radius: calc(var(--size-navigation-size) * 0.5);
    bottom: calc(var(--size-navigation-size) * 2);
    content: '';
    height: var(--size-navigation-size);
    left: 50%;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%);
    transition: background-color var(--time-active-transition);
    width: var(--size-navigation-size);
}

nav[site] a::before {
    background-color: var(--color-keyboard-focus);
    border-radius: calc(var(--size-navigation-size) * 0.5);
    content: '';
    height: var(--size-navigation-size);
    left: 50%;
    opacity: 0;
    position: absolute;
    top: calc(var(--size-navigation-size) * 3);
    transform: translateX(-50%);
    transition: opacity var(--time-active-transition);
    width: 100%;
}

nav[site] a:focus-visible {
    color: var(--color-keyboard-focus);
}

nav[site] a:focus-visible::before {
    opacity: 1;
}

nav[site] a:hover {
    color: var(--color-active);
}

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

nav[site] a:nth-of-type(1)::after {
    animation: navigation_one linear;
    animation-timeline: scroll();
}

nav[site] a:nth-of-type(2)::after {
    animation: navigation_two linear;
    animation-timeline: scroll();
}

nav[site] a:nth-of-type(3)::after {
    animation: navigation_three linear;
    animation-timeline: scroll();
}

@keyframes navigation_one {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes navigation_two {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes navigation_three {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}