@layer components.mainNavigation{:host{--nav-gap:var(--space-rem-m);--nav-link-color:var(--color-text);--nav-link-hover-color:var(--color-primary);--nav-link-hover-bg:white;--nav-link-active-color:var(--color-primary);--nav-link-active-bg:transparent;--nav-link-active-border:var(--color-primary);--nav-link-font-size:var(--step-0);--nav-link-font-weight:var(--font-weight-normal);--nav-link-active-font-weight:var(--font-weight-bold);--nav-link-padding:var(--space-rem-xs)var(--space-rem-s);--nav-border-radius:var(--border-radius);--nav-transition:var(--transition-normal);transition:opacity var(--nav-transition),transform var(--nav-transition);padding:var(--s1);display:block}@media (prefers-reduced-motion:reduce){:host{transition:none}}:host([data-state-open]){opacity:1;transform:translateY(0)}:host([data-state-closing]){opacity:0;transform:translateY(-10px)}:host([data-icons-visible]) nav,:host([data-text-visible]) nav{visibility:visible}:host([data-expanded]) nav{width:100%}[data-role=sr-only]{width:1px;height:1px;position:absolute;left:-10000px;overflow:hidden}nav{border:1px solid var(--nav-border-color,transparent);width:fit-content;box-shadow:var(--nav-shadow,none);z-index:1;flex-direction:column;gap:0;display:flex;position:relative}.hover-indicator{background:var(--nav-hover-indicator-bg,var(--nav-link-hover-bg,white));pointer-events:none;z-index:0;opacity:0;border-radius:var(--nav-border-radius,4px);height:0;position:absolute;left:0;right:0}@media (prefers-reduced-motion:no-preference){.hover-indicator{transition:top .2s cubic-bezier(.4,0,.2,1),height .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1)}}.hover-indicator[data-active]{opacity:1}ul{flex-direction:column;gap:0;margin:0;padding:0;list-style:none;display:flex;position:relative}::slotted(li){margin:0;padding:0;display:block}[data-role=error-message]{color:var(--color-error,#dc3545);border:1px solid;border-radius:4px;padding:1rem}}