.gh-nav-switch.gh-nav-switch--ready {
    --gh-nav-switch-effective-duration: var(--gh-nav-switch-duration, 200ms);
    --gh-nav-switch-effective-delay: var(--gh-nav-switch-delay, 0ms);
}

.gh-nav-switch.gh-nav-switch--hidden {
    opacity: 0;
    pointer-events: none;
}

.gh-nav-switch--transition-none {
    transition: none;
}

.gh-nav-switch--transition-fade {
    transition-property: opacity;
    transition-duration: var(--gh-nav-switch-effective-duration);
    transition-delay: var(--gh-nav-switch-effective-delay);
    transition-timing-function: ease;
}

.gh-nav-switch--transition-slide {
    transition-property: opacity, translate;
    transition-duration: var(--gh-nav-switch-effective-duration);
    transition-delay: var(--gh-nav-switch-effective-delay);
    transition-timing-function: ease;
}

.gh-nav-switch--transition-slide.gh-nav-switch--visible {
    translate: 0 0;
}

.gh-nav-switch--transition-slide.gh-nav-switch--hidden {
    translate: 0 -8px;
}

.gh-nav-switch--transition-scale {
    transition-property: opacity, scale;
    transition-duration: var(--gh-nav-switch-effective-duration);
    transition-delay: var(--gh-nav-switch-effective-delay);
    transition-timing-function: ease;
}

.gh-nav-switch--transition-scale.gh-nav-switch--visible {
    scale: 1;
}

.gh-nav-switch--transition-scale.gh-nav-switch--hidden {
    scale: 0.96;
}

@media (prefers-reduced-motion: reduce) {
    .gh-nav-switch.gh-nav-switch--ready {
        --gh-nav-switch-effective-duration: 0ms;
        --gh-nav-switch-effective-delay: 0ms;
    }

    .gh-nav-switch--transition-slide.gh-nav-switch--hidden {
        translate: 0 0;
    }

    .gh-nav-switch--transition-scale.gh-nav-switch--hidden {
        scale: 1;
    }
}