@volverjs/style/dist/components/vv-nav.css

@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.

:where(:host,:root,.theme){--vv-nav-display:flex;--vv-nav-element-menu-flex:1;--vv-nav-element-menu-display:flex;--vv-nav-element-menu-flex-direction:column;--vv-nav-element-menu-gap:var(--spacing-2);--vv-nav-element-heading-label-display:block;--vv-nav-element-heading-label-font-weight:var(--font-semibold);--vv-nav-element-item-label-display:flex;--vv-nav-element-item-label-align-items:center;--vv-nav-element-item-label-will-change:background-color color;--vv-nav-element-item-label-transition:var(--transition-all);--vv-nav-element-item-label-color:var(--color-word-2);--vv-nav-element-item-label-cursor:pointer;--vv-nav-element-item-label-state-hover-color:var(--color-word-1);--vv-nav-element-item-label-state-current-color:var(--color-word-1);--vv-nav-element-item-label-state-disabled-opacity:var(--opacity-50);--vv-nav-element-item-label-state-disabled-cursor:not-allowed;--vv-nav-element-item-label-state-disabled-pointer-events:none;--vv-nav-element-separator-display:block;--vv-nav-element-separator-margin-block:var(--spacing-16);--vv-nav-element-separator-height:var(--spacing-px);--vv-nav-element-separator-background-color:var(--color-surface-3);--vv-nav-modifier-sidebar-font-size:var(--text-14);--vv-nav-modifier-sidebar-element-item-label-border-radius:var(--rounded-md);--vv-nav-modifier-sidebar-element-item-label-state-active-background-color:var(--color-surface-3);--vv-nav-modifier-sidebar-element-item-label-state-hover-background-color:var(--color-surface-2);--vv-nav-modifier-sidebar-element-item-label-state-current-background-color:var(--color-surface-1);--vv-nav-modifier-aside-font-size:var(--text-12);--vv-nav-modifier-aside-border-left:var(--border) solid var(--color-surface-3);--vv-nav-modifier-aside-element-heading-label-text-transform:uppercase;--vv-nav-modifier-aside-element-item-label-margin-left:calc(-1 * var(--border));--vv-nav-modifier-aside-element-item-label-border-left:var(--border) solid var(--color-surface-3);--vv-nav-modifier-aside-element-item-label-border-radius:0;--vv-nav-modifier-aside-element-item-label-state-hover-border-color:var(--color-brand);--vv-nav-modifier-aside-element-item-label-state-current-border-color:var(--color-brand);--vv-nav-modifier-aside-element-separator-margin-block:var(--spacing-8);--vv-nav-modifier-tabs-element-menu-overflow:auto hidden;--vv-nav-modifier-tabs-element-menu-overscroll-behavior-x:contain;--vv-nav-modifier-tabs-element-menu-scroll-behavior:smooth;--vv-nav-modifier-tabs-element-menu-scroll-snap-type:x mandatory;--vv-nav-modifier-tabs-element-menu-flex-direction:row;--vv-nav-modifier-tabs-element-menu-border-bottom:1px solid var(--color-surface-4);--vv-nav-modifier-tabs-element-menu-scrollbar-width:none;--vv-nav-modifier-tabs-element-menu-pseudo--webkit-scrollbar-width:0;--vv-nav-modifier-tabs-element-menu-pseudo--webkit-scrollbar-height:0;--vv-nav-modifier-tabs-element-item-label-border-bottom:2px solid transparent;--vv-nav-modifier-tabs-element-item-label-margin-bottom:-1px;--vv-nav-modifier-tabs-element-item-label-white-space:nowrap;--vv-nav-modifier-tabs-element-item-label-state-hover-color:var(--color-brand);--vv-nav-modifier-tabs-element-item-label-state-current-color:var(--color-brand);--vv-nav-modifier-tabs-element-item-label-state-current-border-color:currentcolor;--vv-nav-modifier-tabs-element-item-label-state-current-background-color:color-mix(in srgb, var(--color-brand), transparent 95%);--vv-nav-modifier-full-element-item-flex:1 1 0%;--vv-nav-modifier-full-element-item-label-display:block;--vv-nav-modifier-full-element-item-label-width:100%;--vv-nav-modifier-full-element-item-label-text-align:center}:where(.vv-nav){--nav-item-padding:var(--spacing-xs) var(--spacing-sm);display:var(--vv-nav-display)}:where(.vv-nav__menu,.vv-nav ul){flex:var(--vv-nav-element-menu-flex);display:var(--vv-nav-element-menu-display);flex-direction:var(--vv-nav-element-menu-flex-direction);gap:var(--vv-nav-element-menu-gap)}:where(.vv-nav__heading-label){display:var(--vv-nav-element-heading-label-display);font-weight:var(--vv-nav-element-heading-label-font-weight);padding:var(--nav-item-padding)}:where(.vv-nav__item-label,.vv-nav li>:is(a,button)){display:var(--vv-nav-element-item-label-display);align-items:var(--vv-nav-element-item-label-align-items);will-change:var(--vv-nav-element-item-label-will-change);transition:var(--vv-nav-element-item-label-transition);color:var(--vv-nav-element-item-label-color);cursor:var(--vv-nav-element-item-label-cursor);padding:var(--nav-item-padding)}:where(.vv-nav__item-label--hover,.vv-nav__item-label.hover,.vv-nav li>:is(a,button).hover,.vv-nav__item-label:not([disabled]):hover,.vv-nav li>:is(a,button):not([disabled]):hover){--vv-nav-element-item-label-color:var(--vv-nav-element-item-label-state-hover-color)}:where(.vv-nav__item-label--current,.vv-nav__item-label.current,.vv-nav li>:is(a,button).current){--vv-nav-element-item-label-color:var(--vv-nav-element-item-label-state-current-color)}:where(.vv-nav__item-label--disabled,.vv-nav__item-label.disabled,.vv-nav li>:is(a,button).disabled,.vv-nav__item-label[disabled],.vv-nav li>:is(a,button)[disabled],.vv-nav__item-label[aria-disabled=true],.vv-nav li>:is(a,button)[aria-disabled=true]){opacity:var(--vv-nav-element-item-label-state-disabled-opacity);--vv-nav-element-item-label-cursor:var(--vv-nav-element-item-label-state-disabled-cursor);pointer-events:var(--vv-nav-element-item-label-state-disabled-pointer-events)}:where(.vv-nav__separator,.vv-nav li[role=separator]){display:var(--vv-nav-element-separator-display);margin-block:var(--vv-nav-element-separator-margin-block);height:var(--vv-nav-element-separator-height);background-color:var(--vv-nav-element-separator-background-color)}:where(.vv-nav--sidebar.vv-nav){font-size:var(--vv-nav-modifier-sidebar-font-size)}:where(.vv-nav--sidebar .vv-nav__item-label,.vv-nav--sidebar li>:is(a,button)){border-radius:var(--vv-nav-modifier-sidebar-element-item-label-border-radius)}:where(.vv-nav--sidebar .vv-nav__item-label--active,.vv-nav--sidebar .vv-nav__item-label.active,.vv-nav--sidebar li>:is(a,button).active,.vv-nav--sidebar .vv-nav__item-label:not([disabled]):active,.vv-nav--sidebar li>:is(a,button):not([disabled]):active){background-color:var(--vv-nav-modifier-sidebar-element-item-label-state-active-background-color)}:where(.vv-nav--sidebar .vv-nav__item-label--hover,.vv-nav--sidebar .vv-nav__item-label.hover,.vv-nav--sidebar li>:is(a,button).hover,.vv-nav--sidebar .vv-nav__item-label:not([disabled]):hover,.vv-nav--sidebar li>:is(a,button):not([disabled]):hover){background-color:var(--vv-nav-modifier-sidebar-element-item-label-state-hover-background-color)}:where(.vv-nav--sidebar .vv-nav__item-label--current,.vv-nav--sidebar .vv-nav__item-label.current,.vv-nav--sidebar li>:is(a,button).current){background-color:var(--vv-nav-modifier-sidebar-element-item-label-state-current-background-color)}:where(.vv-nav--aside.vv-nav){--nav-item-padding:var(--spacing-8) var(--spacing-12);font-size:var(--vv-nav-modifier-aside-font-size);border-left:var(--vv-nav-modifier-aside-border-left)}:where(.vv-nav--aside .vv-nav__heading-label){text-transform:var(--vv-nav-modifier-aside-element-heading-label-text-transform)}:where(.vv-nav--aside .vv-nav__item-label,.vv-nav--aside li>:is(a,button)){margin-left:var(--vv-nav-modifier-aside-element-item-label-margin-left);border-left:var(--vv-nav-modifier-aside-element-item-label-border-left);border-radius:var(--vv-nav-modifier-aside-element-item-label-border-radius)}:where(.vv-nav--aside .vv-nav__item-label--hover,.vv-nav--aside .vv-nav__item-label.hover,.vv-nav--aside li>:is(a,button).hover,.vv-nav--aside .vv-nav__item-label:not([disabled]):hover,.vv-nav--aside li>:is(a,button):not([disabled]):hover){border-color:var(--vv-nav-modifier-aside-element-item-label-state-hover-border-color)}:where(.vv-nav--aside .vv-nav__item-label--current,.vv-nav--aside .vv-nav__item-label.current,.vv-nav--aside li>:is(a,button).current){border-color:var(--vv-nav-modifier-aside-element-item-label-state-current-border-color)}:where(.vv-nav--aside .vv-nav__separator,.vv-nav--aside li[role=separator]){margin-block:var(--vv-nav-modifier-aside-element-separator-margin-block)}:where(.vv-nav--tabs .vv-nav__menu,.vv-nav--tabs ul){overflow:var(--vv-nav-modifier-tabs-element-menu-overflow);overscroll-behavior-x:var(--vv-nav-modifier-tabs-element-menu-overscroll-behavior-x);scroll-behavior:var(--vv-nav-modifier-tabs-element-menu-scroll-behavior);scroll-snap-type:var(--vv-nav-modifier-tabs-element-menu-scroll-snap-type);flex-direction:var(--vv-nav-modifier-tabs-element-menu-flex-direction);border-bottom:var(--vv-nav-modifier-tabs-element-menu-border-bottom);scrollbar-width:var(--vv-nav-modifier-tabs-element-menu-scrollbar-width)}:where(.vv-nav--tabs .vv-nav__menu,.vv-nav--tabs ul)::-webkit-scrollbar{content:"";width:var(--vv-nav-modifier-tabs-element-menu-pseudo--webkit-scrollbar-width);height:var(--vv-nav-modifier-tabs-element-menu-pseudo--webkit-scrollbar-height)}:where(.vv-nav--tabs .vv-nav__item-label,.vv-nav--tabs li>:is(a,button)){border-bottom:var(--vv-nav-modifier-tabs-element-item-label-border-bottom);margin-bottom:var(--vv-nav-modifier-tabs-element-item-label-margin-bottom);white-space:var(--vv-nav-modifier-tabs-element-item-label-white-space)}:where(.vv-nav--tabs .vv-nav__item-label--hover,.vv-nav--tabs .vv-nav__item-label.hover,.vv-nav--tabs li>:is(a,button).hover,.vv-nav--tabs .vv-nav__item-label:not([disabled]):hover,.vv-nav--tabs li>:is(a,button):not([disabled]):hover){color:var(--vv-nav-modifier-tabs-element-item-label-state-hover-color)}:where(.vv-nav--tabs .vv-nav__item-label--current,.vv-nav--tabs .vv-nav__item-label.current,.vv-nav--tabs li>:is(a,button).current){color:var(--vv-nav-modifier-tabs-element-item-label-state-current-color);border-color:var(--vv-nav-modifier-tabs-element-item-label-state-current-border-color);background-color:var(--vv-nav-modifier-tabs-element-item-label-state-current-background-color)}:where(.vv-nav--full .vv-nav__item,.vv-nav--full li){flex:var(--vv-nav-modifier-full-element-item-flex)}:where(.vv-nav--full .vv-nav__item-label,.vv-nav--full li>:is(a,button)){display:var(--vv-nav-modifier-full-element-item-label-display);width:var(--vv-nav-modifier-full-element-item-label-width);text-align:var(--vv-nav-modifier-full-element-item-label-text-align)}