@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: hsl(var(--color-brand-hue), var(--color-brand-saturation), var(--color-brand-lightness), 5%);--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)}