/* Trigger glyph — the animated hamburger lines, both variants.

   These rules used to be returned as a <style> block inside the markup from
   generateTriggerModern()/generateTriggerClassic(), which makes them an inline
   stylesheet: a style-src-elem violation under the site's CSP
   (src/.htaccess), and one no nonce can rescue because the site's HTML is
   served as static files. A real stylesheet, loaded through the same
   link-based loader as base.css and the visual-state sheets, is compliant and
   keeps the component's documented cascade order intact.

   One file rather than one per variant, selected by the `trigger-style`
   attribute the element sets on itself: both variants target the same lines,
   so loading two sheets would leak whichever rules the other does not
   override (modern's `opacity` on the top line, for one). The modern variant
   is the default and so is written as "not classic". */

navigation-menu-trigger svg {
    width: 1em;
}

navigation-menu-trigger svg line {
    transform-origin: 50% 50%;
}

/* Modern: the top line shrinks and fades, the bottom line stays put. */

navigation-menu:not([trigger-style="classic"]) navigation-menu-trigger svg line {
    transition: transform var(--timing-navigation-menu-active) cubic-bezier(0, 0.59, 0.76, 1.11),
                opacity var(--timing-navigation-menu-active) cubic-bezier(0.09, -0.31, 0.47, 2.27);
}

navigation-menu:not([trigger-style="classic"]):not([expanded]) navigation-menu-trigger svg .line-top {
    transform: translateY(-1.25px);
    opacity: 1;
}

navigation-menu:not([trigger-style="classic"]):not([expanded]) navigation-menu-trigger svg .line-bottom {
    transform: translateY(1.25px);
}

navigation-menu:not([trigger-style="classic"])[expanded] navigation-menu-trigger svg .line-top {
    transform: translateY(0px) scaleX(0.25);
    opacity: 0;
}

navigation-menu:not([trigger-style="classic"])[expanded] navigation-menu-trigger svg .line-bottom {
    transform: translateY(0px);
}

/* Classic: the two lines cross into an X. */

navigation-menu[trigger-style="classic"] navigation-menu-trigger svg line {
    transition: transform var(--timing-navigation-menu-active) ease;
}

navigation-menu[trigger-style="classic"]:not([expanded]) navigation-menu-trigger svg .line-top {
    transform: translateY(-1.25px);
}

navigation-menu[trigger-style="classic"]:not([expanded]) navigation-menu-trigger svg .line-bottom {
    transform: translateY(1.25px);
}

navigation-menu[trigger-style="classic"][expanded] navigation-menu-trigger svg .line-top {
    transform: rotate(-45deg);
}

navigation-menu[trigger-style="classic"][expanded] navigation-menu-trigger svg .line-bottom {
    transform: rotate(45deg);
}