@layer components.page{@property --page-header-height{syntax: "<length>"; inherits: true; initial-value: 0px;}:host{--page-footer-color-background:inherit;--page-main-color-background:inherit;--page-header-color-background:inherit;--page-nav-color-background:inherit;--page-header-height:0px;--color-text:inherit;flex-direction:column;min-height:100vh;margin:0;padding:0;display:flex}[data-component=skip-link]{z-index:calc(var(--z-index-dialog,1000) - 1);background-color:var(--skip-link-bg,#000);color:var(--skip-link-color,#fff);border-radius:4px;padding:1rem;text-decoration:none;position:absolute;left:-9999px}[data-component=skip-link]:focus{top:1rem;left:1rem}header{background-color:var(--page-header-color-background,transparent)}header[sticky]{z-index:var(--z-index-header-sticky,100);position:sticky;top:0}main,aside{background-color:var(--page-main-color-background,#fff);color:var(--color-text,inherit)}footer{background-color:var(--page-footer-color-background,#f5f5f5)}aside[data-state=empty],footer[data-state=empty]{display:none}e-main{flex-direction:column;flex:1;display:flex}e-main e-content{order:1}slot[name=nav]{background-color:var(--page-nav-color-background,transparent);display:block}e-main ::slotted([slot=nav]){order:2}e-content{flex-direction:column;display:flex}main{min-height:calc(100vh - var(--page-header-height))}@media (width<=767px){e-main ::slotted([slot=nav]){top:calc(var(--header-offset,0px) + 1rem);height:auto;z-index:var(--z-index-page-nav-mobile,1000);will-change:left;transition:left .3s;position:fixed;bottom:1rem;left:-100%}e-main ::slotted([slot=nav][data-icons-visible]),e-main ::slotted([slot=nav][data-text-visible]){left:1rem}e-main ::slotted([slot=nav][data-state-closing]){left:-100%}}@media (width>=768px){e-main{flex-direction:row}e-main ::slotted([slot=nav]){top:var(--header-offset,999px);max-height:calc(100vh - var(--header-offset,0px));order:0;align-self:flex-start;position:sticky;overflow-y:auto}e-main e-content{flex-direction:row;flex:1;order:1;display:flex}main{flex:3}aside{flex:1}}@media (prefers-reduced-motion:reduce){e-main ::slotted([slot=nav]){transition:none}}}