#layout{--size-nav-width:var(--size-nav-width-default);--space-view-padding:16px;--size-view-outer-height:calc(100dvh - var(--size-header-height));--size-view-inner-height:calc(var(--size-view-outer-height) - var(--size-breadcrumbs-height));height:100dvh;#sidebar{position:fixed;z-index:10001;height:100%;width:var(--size-nav-width);overflow:hidden;transition:var(--transition-layout);background-color:var(--color-nav-bg);color:var(--color-nav-text);>header{height:var(--size-header-height)}>section{height:calc(100dvh - var(--size-header-height) - var(--size-footer-height))}>footer{height:var(--size-footer-height);width:var(--size-nav-width)}}#content{height:100%;width:calc(100dvw - var(--size-nav-width));margin-left:var(--size-nav-width);transition:var(--transition-layout);>header{height:var(--size-header-height);>.navbar{padding:0;border-bottom:1px solid var(--color-border);height:calc(var(--size-header-height) - 1px)}}>#view{overflow:hidden;height:var(--size-view-outer-height);>.scroll{height:calc(var(--size-view-inner-height));>.wrapper{padding:var(--space-view-padding)}}}}.navbar-toggler{height:var(--size-header-height);padding:0 14px;border:none;border-radius:0;&.active i,&:hover{color:var(--color-primary)}&.toggle-menu{padding:0 16px 0 22px}}&.collapsed:not(.mobile){--size-nav-width:var(--size-nav-width-collapsed);#sidebar{>section{height:calc(100dvh - var(--size-header-height))}>footer{display:none;width:var(--size-nav-width-default)}}#content{margin-left:var(--size-nav-width-collapsed)}&.hover{#sidebar{width:var(--size-nav-width-default);>section{height:calc(100dvh - var(--size-header-height) - var(--size-footer-height))}>footer{display:block}}}}&.mobile{#sidebar{visibility:hidden;width:0}#content{width:100%;margin-left:0}&.collapsed{#sidebar{visibility:visible;width:var(--size-nav-width-default)}}}}[data-theme=dark] #layout{#sidebar{box-shadow:12px 0 32px rgba(0,0,0,.16)}#content{>header>.navbar{background-color:var(--color-surface-tertiary);border-bottom-color:var(--color-border)}>#view{background-color:var(--color-surface-body)}}.navbar-toggler{color:var(--color-dark-text-soft);&.active i,&:hover{color:var(--color-primary)}}}