.gh-nav-switch.gh-nav-switch--ready {
    --gh-nav-switch-effective-duration: var(--gh-nav-switch-duration, 280ms);
    --gh-nav-switch-effective-delay: var(--gh-nav-switch-delay, 0ms);
    will-change: opacity;
}

.gh-nav-switch.gh-nav-switch--visible {
    opacity: var(--gh-nav-switch-base-opacity, 1) !important;
}

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


.gh-nav-dock.gh-nav-dock--docked[data-gh-nav-switch-hide-sticky="yes"]:not(.gh-nav-switch--ready),
.gh-nav-dock.gh-nav-dock--docked [data-gh-nav-switch-hide-sticky="yes"]:not(.gh-nav-switch--ready) {
    display: none !important;
}

.gh-nav-dock:not(.gh-nav-dock--docked)[data-gh-nav-switch-hide-normal="yes"]:not(.gh-nav-switch--ready),
.gh-nav-dock:not(.gh-nav-dock--docked) [data-gh-nav-switch-hide-normal="yes"]:not(.gh-nav-switch--ready) {
    display: none !important;
}

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

.gh-nav-switch--transition-fade {
    transition-property: opacity !important;
    transition-duration: var(--gh-nav-switch-effective-duration) !important;
    transition-delay: var(--gh-nav-switch-effective-delay) !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}


.gh-nav-switch--transition-slide {
    transition-property: opacity, translate !important;
    transition-duration: var(--gh-nav-switch-effective-duration) !important;
    transition-delay: var(--gh-nav-switch-effective-delay) !important;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.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 !important;
    transition-duration: var(--gh-nav-switch-effective-duration) !important;
    transition-delay: var(--gh-nav-switch-effective-delay) !important;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.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;
    }
}

/* Complementary Normal/Sticky switches are stacked in one stable slot.
 * Both elements remain in layout sizing, so the header never recalculates
 * its geometry when one fades out and the other fades in. */
.gh-nav-switch-slot {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    grid-template-rows: minmax(0, max-content);
    align-items: stretch;
    justify-items: stretch;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

.gh-nav-switch-slot > .gh-nav-switch {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 0;
}

/* Vertical Switch collapse
 * When a Switch element is a row inside a column/block layout, hiding it must
 * reduce its occupied height progressively instead of waiting for display:none.
 * This makes the parent header shrink together with the fade, frame by frame. */
.gh-nav-switch.gh-nav-switch--collapse-y.gh-nav-switch--ready {
    max-height: var(--gh-nav-switch-expanded-height, none);
    overflow: hidden !important;
}

.gh-nav-switch.gh-nav-switch--collapse-y.gh-nav-switch--hidden {
    max-height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

.gh-nav-switch.gh-nav-switch--collapse-y.gh-nav-switch--hidden.gh-nav-switch--collapse-gap-after {
    margin-bottom: calc(-1 * var(--gh-nav-switch-parent-gap, 0px)) !important;
}

.gh-nav-switch.gh-nav-switch--collapse-y.gh-nav-switch--hidden.gh-nav-switch--collapse-gap-before {
    margin-top: calc(-1 * var(--gh-nav-switch-parent-gap, 0px)) !important;
}

.gh-nav-switch.gh-nav-switch--collapse-y.gh-nav-switch--transition-fade {
    transition-property: opacity, max-height, min-height, padding-top, padding-bottom, margin-top, margin-bottom, border-top-width, border-bottom-width !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
    .gh-nav-switch.gh-nav-switch--collapse-y.gh-nav-switch--ready {
        transition-duration: 0ms !important;
    }
}