@layer components{.side{margin-top:var(--spacing-lg);& .side-list,& .nav-list{margin:0;padding:0;list-style:none}& .nav-item{list-style:none;position:relative}& .nav-item>a,& .nav-item>.nav-item-trigger:not(.nav-item-toggle-btn){border-radius:var(--radius-xs);color:inherit;min-height:1.75rem;padding:var(--spacing-sm) var(--spacing-md);transition:background-color var(--animation-normal) ease;align-items:center;text-decoration:none;display:flex;&:hover,&:focus-visible{background-color:var(--color-state-hover);color:var(--color-text-strong);& .nav-item-icon{color:var(--color-text-strong)}}}& .nav-item>a{font-weight:var(--font-weight-semibold)}& .nav-item>.nav-item-trigger:not(.nav-item-toggle-btn){cursor:pointer;user-select:none;justify-content:space-between;width:100%;padding-inline-end:0;& .nav-item-icon{box-sizing:border-box;margin-inline:2px var(--spacing-xs);min-width:2.25rem;min-height:1.75rem;padding:var(--spacing-xs);flex-shrink:0;justify-content:center;align-items:center;line-height:0;display:inline-flex}}& .side-list>.nav-item>.nav-item-trigger:not(.nav-item-toggle-btn){font-weight:var(--font-weight-semibold)}& .nav-item-split{border-radius:var(--radius-xs);align-items:stretch;gap:var(--spacing-xs);min-width:0;transition:background-color var(--animation-normal) ease;flex-wrap:nowrap;width:100%;display:flex;&:hover{background-color:var(--color-state-hover);color:var(--color-text-strong);& .nav-item-icon{color:var(--color-text-strong)}& .nav-item-toggle-btn{background-color:color-mix(in srgb, var(--color-state-hover), var(--color-text) 3%)}}& .nav-item-link{border-radius:var(--radius-xs);color:inherit;font-weight:var(--font-weight-semibold);min-width:0;min-height:1.75rem;padding:var(--spacing-sm) var(--spacing-xs) var(--spacing-sm) var(--spacing-md);transition:color var(--animation-normal) ease;flex:auto;align-items:center;text-decoration:none;display:flex;&:hover,&:focus-visible{color:var(--color-text-strong)}}& .nav-item-toggle-btn{border-radius:var(--radius-xs);cursor:pointer;margin-inline:2px var(--spacing-xs);min-width:2.25rem;padding:0 var(--spacing-xs);transition:background-color var(--animation-normal) ease, border-color var(--animation-normal) ease;background:0 0;border:none;border-left:1px solid #0000;flex:none;justify-content:center;align-self:stretch;align-items:center;display:inline-flex;&:hover{background-color:color-mix(in srgb, var(--color-state-hover), var(--color-text) 8%);border-left-color:var(--color-border)}&:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}& .nav-item-icon{justify-content:center;align-items:center;line-height:0;display:flex}}}& .nav-item a[aria-current=page] .nav-item-label,& .nav-item .nav-item-trigger[aria-current=page] .nav-item-label,& .nav-item-split .nav-item-link[aria-current=page] .nav-item-label{box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--color-text-strong) 45%, transparent);text-decoration:none}& .nav-item-toggle,& .nav-item-content{display:none}& .nav-item-toggle:checked~.nav-item-content{animation:grow-out var(--animation-normal) ease-out;display:block}& .nav-item-toggle:checked~.nav-item-content-initial{animation-duration:1ms;display:block}& .nav-item-icon{color:var(--color-text-muted);transition:transform var(--animation-normal) ease;display:inline-block}& .nav-item-toggle:checked~.nav-item-trigger .nav-item-icon,& .nav-item-toggle:checked~.nav-item-split .nav-item-icon{transform:rotate(90deg)}& .nav-list{&>.nav-item>a,&>.nav-item>.nav-item-trigger:not(.nav-item-toggle-btn){font-weight:var(--font-weight-normal);padding-inline-start:var(--spacing-xl)}&>.nav-item>.nav-item-trigger:not(.nav-item-toggle-btn){padding-inline-end:var(--spacing-sm)}&>.nav-item>.nav-item-split{box-sizing:border-box;padding-inline-start:var(--spacing-xl);padding-inline-end:var(--spacing-sm)}&>.nav-item>.nav-item-split .nav-item-link,& .nav-list>.nav-item>.nav-item-split .nav-item-link{font-weight:var(--font-weight-normal);padding:var(--spacing-sm) var(--spacing-xs) var(--spacing-sm) 0}& .nav-list>.nav-item>a,& .nav-list>.nav-item>.nav-item-trigger:not(.nav-item-toggle-btn){padding-inline-start:var(--spacing-2xl)}& .nav-list>.nav-item>.nav-item-split{padding-inline-start:var(--spacing-2xl);padding-inline-end:var(--spacing-xl)}}}}