@volverjs/style/dist/components/vv-dropdown-option.css

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

:where(:host,:root,.theme){--vv-dropdown-option-display: flex;--vv-dropdown-option-min-width: 0;--vv-dropdown-option-overflow: hidden;--vv-dropdown-option-gap: var(--spacing-sm);--vv-dropdown-option-align-items: flex-end;--vv-dropdown-option-padding: var(--spacing-sm);--vv-dropdown-option-state-disabled-opacity: var(--opacity-50);--vv-dropdown-option-state-disabled-cursor: not-allowed;--vv-dropdown-option-state-disabled-pointer-events: none;--vv-dropdown-option-state-focus-visible-background-color: var(--color-surface-success);--vv-dropdown-option-state-focus-visible-color: var(--color-success-darken-1);--vv-dropdown-option-state-focus-visible-element-hint-opacity: var(--opacity-100);--vv-dropdown-option-state-selected-font-weight: var(--font-bold);--vv-dropdown-option-state-selected-background-color: var(--color-surface-brand);--vv-dropdown-option-state-selected-color: var(--color-brand-darken-1);--vv-dropdown-option-modifier-unselectable-state-focus-visible-background-color: var(--color-surface-danger);--vv-dropdown-option-modifier-unselectable-state-focus-visible-color: var(--color-danger);--vv-dropdown-option-modifier-inert-cursor: default;--vv-dropdown-option-modifier-inert-color: var(--color-word-3);--vv-dropdown-option-modifier-inert-font-size: .8em;--vv-dropdown-option-modifier-inert-state-focus-visible-background-color: transparent;--vv-dropdown-option-modifier-inert-state-focus-visible-color: var(--color-word-3);--vv-dropdown-option-element-hint-opacity: var(--opacity-0);--vv-dropdown-option-element-hint-transition: var(--transition-opacity);--vv-dropdown-option-element-hint-will-change: opacity;--vv-dropdown-option-element-hint-margin-left: auto;--vv-dropdown-option-element-hint-font-size: .8em;--vv-dropdown-option-element-hint-font-weight: var(--font-normal);--vv-dropdown-option-element-hint-text-overflow: ellipsis;--vv-dropdown-option-element-hint-white-space: nowrap;--vv-dropdown-option-element-hint-overflow: hidden;--vv-dropdown-option-element-label-text-overflow: ellipsis;--vv-dropdown-option-element-label-white-space: nowrap;--vv-dropdown-option-element-label-overflow: hidden}:where(.vv-dropdown-option){display:var(--vv-dropdown-option-display);min-width:var(--vv-dropdown-option-min-width);overflow:var(--vv-dropdown-option-overflow);gap:var(--vv-dropdown-option-gap);align-items:var(--vv-dropdown-option-align-items);padding:var(--vv-dropdown-option-padding)}:where(.vv-dropdown-option__hint){opacity:var(--vv-dropdown-option-element-hint-opacity);transition:var(--vv-dropdown-option-element-hint-transition);will-change:var(--vv-dropdown-option-element-hint-will-change);margin-left:var(--vv-dropdown-option-element-hint-margin-left);font-size:var(--vv-dropdown-option-element-hint-font-size);font-weight:var(--vv-dropdown-option-element-hint-font-weight);text-overflow:var(--vv-dropdown-option-element-hint-text-overflow);white-space:var(--vv-dropdown-option-element-hint-white-space);overflow:var(--vv-dropdown-option-element-hint-overflow)}:where(.vv-dropdown-option__label){text-overflow:var(--vv-dropdown-option-element-label-text-overflow);white-space:var(--vv-dropdown-option-element-label-white-space);overflow:var(--vv-dropdown-option-element-label-overflow)}:where(.vv-dropdown-option--disabled,.vv-dropdown-option.disabled,.vv-dropdown-option[disabled],.vv-dropdown-option[aria-disabled=true]){opacity:var(--vv-dropdown-option-state-disabled-opacity);cursor:var(--vv-dropdown-option-state-disabled-cursor);pointer-events:var(--vv-dropdown-option-state-disabled-pointer-events)}:where(.vv-dropdown-option--focus-visible,.vv-dropdown-option.focus-visible,.vv-dropdown-option:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){background-color:var(--vv-dropdown-option-state-focus-visible-background-color);color:var(--vv-dropdown-option-state-focus-visible-color)}:where(.vv-dropdown-option--focus-visible .vv-dropdown-option__hint,.vv-dropdown-option.focus-visible .vv-dropdown-option__hint,.vv-dropdown-option:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible .vv-dropdown-option__hint){opacity:var(--vv-dropdown-option-state-focus-visible-element-hint-opacity)}:where(.vv-dropdown-option--selected,.vv-dropdown-option.selected,.vv-dropdown-option[aria-selected=true]){font-weight:var(--vv-dropdown-option-state-selected-font-weight);background-color:var(--vv-dropdown-option-state-selected-background-color);color:var(--vv-dropdown-option-state-selected-color)}:where(.vv-dropdown-option--unselectable.vv-dropdown-option--focus-visible,.vv-dropdown-option--unselectable.vv-dropdown-option.focus-visible,.vv-dropdown-option--unselectable.vv-dropdown-option:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){background-color:var(--vv-dropdown-option-modifier-unselectable-state-focus-visible-background-color);color:var(--vv-dropdown-option-modifier-unselectable-state-focus-visible-color)}:where(.vv-dropdown-option--inert.vv-dropdown-option){cursor:var(--vv-dropdown-option-modifier-inert-cursor);color:var(--vv-dropdown-option-modifier-inert-color);font-size:var(--vv-dropdown-option-modifier-inert-font-size)}:where(.vv-dropdown-option--inert.vv-dropdown-option--focus-visible,.vv-dropdown-option--inert.vv-dropdown-option.focus-visible,.vv-dropdown-option--inert.vv-dropdown-option:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled=true])):focus-visible){background-color:var(--vv-dropdown-option-modifier-inert-state-focus-visible-background-color);color:var(--vv-dropdown-option-modifier-inert-state-focus-visible-color)}