@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-header-height: 0px;--color-text: inherit;display:flex;flex-direction:column;min-height:100vh;margin:0;padding:0}[data-component=skip-link]{position:absolute;left:-9999px;z-index:999;padding:1rem;background-color:#000;color:#fff;text-decoration:none;border-radius:4px}[data-component=skip-link]:focus{left:1rem;top:1rem}header{background-color:var(--page-header-color-background, transparent)}header[sticky]{position:sticky;top:0;z-index:100}main,aside{background-color:var(--page-main-color-background, #ffffff);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:1;display:flex;flex-direction:column}e-main e-content{order:1}e-main ::slotted([slot=nav]){order:2}e-content{display:flex;flex-direction:column}main{min-height:calc(100vh - var(--page-header-height))}@media(max-width: 767px){e-main ::slotted([slot=nav]){position:fixed;top:calc(var(--header-offset, 0px) + 1rem);left:-100%;bottom:1rem;height:auto;z-index:1000;transition:left .3s ease;will-change:left}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(min-width: 768px){e-main{flex-direction:row}e-main ::slotted([slot=nav]){order:0;position:sticky;top:var(--header-offset, 999px);align-self:flex-start;max-height:calc(100vh - var(--header-offset, 0px));overflow-y:auto}e-main e-content{order:1;flex:1;display:flex;flex-direction:row}main{flex:3}aside{flex:1}}}/*# sourceMappingURL=page.css.map */