@volverjs/style/dist/components/vv-dropdown.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-position:relative;--vv-dropdown-z-index:var(--z-dropdown);--vv-dropdown-display:flex;--vv-dropdown-flex-direction:column;--vv-dropdown-box-shadow:var(--shadow-lg);--vv-dropdown-width:max-content;--vv-dropdown-element-list-background-color:var(--color-surface-1);--vv-dropdown-element-list-overflow:auto;--vv-dropdown-element-list-pseudo--webkit-scrollbar-width:var(--spacing-2);--vv-dropdown-element-list-pseudo--webkit-scrollbar-height:var(--spacing-2);--vv-dropdown-element-list-pseudo--webkit-scrollbar-thumb-background-color:var(--color-brand-lighten-4);--vv-dropdown-element-list-pseudo--webkit-scrollbar-thumb-border:var(--spacing-0) solid transparent;--vv-dropdown-element-list-pseudo--webkit-scrollbar-thumb-background-clip:content-box;--vv-dropdown-element-list-pseudo--webkit-scrollbar-track-background-color:transparent;--vv-dropdown-element-list-pseudo--webkit-scrollbar-track-padding:0;--vv-dropdown-element-item-not-last-border-width:0 0 var(--border) 0;--vv-dropdown-element-item-not-last-border-color:var(--color-surface-3);--vv-dropdown-element-item-not-last-border-style:solid;--vv-dropdown-element-search-display:block;--vv-dropdown-element-search-min-width:0;--vv-dropdown-element-search-align-items:center;--vv-dropdown-element-search-min-height:var(--input-min-height);--vv-dropdown-element-search-background-color:var(--color-surface-2);--vv-dropdown-element-search-padding:var(--input-spacing-top) var(--input-spacing-right) var(--input-spacing-bottom) var(--input-spacing-left);--vv-dropdown-element-search-font-size:var(--input-font-size);--vv-dropdown-element-search-pseudo-search-cancel-button--webkit-appearance:none;--vv-dropdown-element-search-pseudo-search-cancel-button-opacity:var(--opacity-0);--vv-dropdown-element-search-pseudo-placeholder-color:var(--color-word-4);--vv-dropdown-element-search-pseudo-placeholder-text-overflow:ellipsis;--vv-dropdown-element-arrow-position:absolute;--vv-dropdown-element-arrow-width:var(--spacing-20);--vv-dropdown-element-arrow-height:var(--spacing-20);--vv-dropdown-element-arrow-z-index:-1;--vv-dropdown-element-arrow-pointer-events:none;--vv-dropdown-element-arrow-border:none;--vv-dropdown-element-arrow-pseudo-before-position:absolute;--vv-dropdown-element-arrow-pseudo-before-top:0;--vv-dropdown-element-arrow-pseudo-before-left:0;--vv-dropdown-element-arrow-pseudo-before-width:0;--vv-dropdown-element-arrow-pseudo-before-height:0;--vv-dropdown-element-arrow-pseudo-before-border-left:var(--spacing-10) solid transparent;--vv-dropdown-element-arrow-pseudo-before-border-right:var(--spacing-10) solid transparent;--vv-dropdown-element-arrow-pseudo-before-border-bottom:var(--spacing-10) solid var(--color-surface-1);--vv-dropdown-element-arrow-pseudo-after-position:absolute;--vv-dropdown-element-arrow-pseudo-after-bottom:0;--vv-dropdown-element-arrow-pseudo-after-left:0;--vv-dropdown-element-arrow-pseudo-after-width:0;--vv-dropdown-element-arrow-pseudo-after-height:0;--vv-dropdown-element-arrow-pseudo-after-border-left:var(--spacing-10) solid transparent;--vv-dropdown-element-arrow-pseudo-after-border-right:var(--spacing-10) solid transparent;--vv-dropdown-element-arrow-pseudo-after-border-top:var(--spacing-10) solid var(--color-surface-1);--vv-dropdown-modifier-block-width:100%;--vv-dropdown-modifier-bottom-position:absolute;--vv-dropdown-modifier-bottom-top:100%;--vv-dropdown-modifier-bottom-right:0;--vv-dropdown-modifier-bottom-left:0;--vv-dropdown-modifier-top-position:absolute;--vv-dropdown-modifier-top-left:0;--vv-dropdown-modifier-top-right:0;--vv-dropdown-modifier-top-bottom:100%;--vv-dropdown-modifier-full-bleed-element-item-min-width:20ch;--vv-dropdown-modifier-dialog-position:fixed;--vv-dropdown-modifier-dialog-display:flex;--vv-dropdown-modifier-dialog-inset:0;--vv-dropdown-modifier-dialog-width:auto;--vv-dropdown-modifier-dialog-height:auto;--vv-dropdown-modifier-dialog-z-index:var(--z-modal-backdrop);--vv-dropdown-modifier-dialog-background-color:var(--color-backdrop);--vv-dropdown-modifier-dialog-backdrop-filter:var(--blur-sm);--vv-dropdown-modifier-dialog-justify-content:flex-end;--vv-dropdown-modifier-dialog-align-items:center;--vv-dropdown-modifier-dialog-padding:var(--spacing-lg);--vv-dropdown-modifier-dialog-gap:var(--spacing-md);--vv-dropdown-modifier-dialog-state-close-display:none;--vv-dropdown-modifier-dialog-element-list-max-width:max(30dvw, min(40rem, 90dvw));--vv-dropdown-modifier-dialog-element-list-z-index:var(--z-modal);--vv-dropdown-modifier-mobile-breakpoint-down-xs-position:fixed;--vv-dropdown-modifier-mobile-breakpoint-down-xs-inset:0;--vv-dropdown-modifier-mobile-breakpoint-down-xs-width:auto;--vv-dropdown-modifier-mobile-breakpoint-down-xs-height:auto;--vv-dropdown-modifier-mobile-breakpoint-down-xs-z-index:var(--z-modal-backdrop);--vv-dropdown-modifier-mobile-breakpoint-down-xs-background-color:var(--color-backdrop);--vv-dropdown-modifier-mobile-breakpoint-down-xs-backdrop-filter:var(--blur-sm);--vv-dropdown-modifier-mobile-breakpoint-down-xs-justify-content:flex-end;--vv-dropdown-modifier-mobile-breakpoint-down-xs-padding:var(--spacing-lg);--vv-dropdown-modifier-mobile-breakpoint-down-xs-gap:var(--spacing-md);--vv-dropdown-modifier-mobile-element-list-breakpoint-down-xs-z-index:var(--z-modal);--vv-dropdown-modifier-mobile-element-list-breakpoint-down-xs-margin-bottom:auto;--vv-dropdown-transition-fade-block-active-transition:var(--transition-opacity);--vv-dropdown-transition-fade-block-active-element-list-transition:var(--transition-transform);--vv-dropdown-transition-fade-block-active-element-search-transition:var(--transition-transform);--vv-dropdown-transition-fade-block-enter-from-opacity:var(--opacity-0);--vv-dropdown-transition-fade-block-enter-from-element-list-translate:0 100%;--vv-dropdown-transition-fade-block-enter-from-element-search-translate:0 -100%;--vv-dropdown-transition-fade-block-leave-to-opacity:var(--opacity-0);--vv-dropdown-transition-fade-block-leave-to-element-list-translate:0 100%;--vv-dropdown-transition-fade-block-leave-to-element-search-translate:0 -100%;--vv-dropdown-transition-mobile-fade-block-active-transition:var(--transition-opacity);--vv-dropdown-transition-mobile-fade-block-active-element-list-transition:var(--transition-transform);--vv-dropdown-transition-mobile-fade-block-active-element-search-transition:var(--transition-transform);--vv-dropdown-transition-mobile-fade-block-enter-from-opacity:var(--opacity-0);--vv-dropdown-transition-mobile-fade-block-enter-from-element-list-breakpoint-down-xs-translate:0 100%;--vv-dropdown-transition-mobile-fade-block-enter-from-element-search-breakpoint-down-xs-translate:0 -100%;--vv-dropdown-transition-mobile-fade-block-leave-to-opacity:var(--opacity-0);--vv-dropdown-transition-mobile-fade-block-leave-to-element-list-breakpoint-down-xs-translate:0 100%;--vv-dropdown-transition-mobile-fade-block-leave-to-element-search-breakpoint-down-xs-translate:0 -100%}:where(.vv-dropdown){--dropdown-border-radius:0px;--dropdown-custom-position:false;position:var(--vv-dropdown-position);z-index:var(--vv-dropdown-z-index);display:var(--vv-dropdown-display);flex-direction:var(--vv-dropdown-flex-direction);box-shadow:var(--vv-dropdown-box-shadow);width:var(--vv-dropdown-width)}:where(.vv-dropdown__list,.vv-dropdown div:is([role=menu],[role=list-box])){border-radius:var(--dropdown-border-radius);background-color:var(--vv-dropdown-element-list-background-color);overflow:var(--vv-dropdown-element-list-overflow)}:where(.vv-dropdown__list,.vv-dropdown div:is([role=menu],[role=list-box]))::-webkit-scrollbar{content:"";width:var(--vv-dropdown-element-list-pseudo--webkit-scrollbar-width);height:var(--vv-dropdown-element-list-pseudo--webkit-scrollbar-height)}:where(.vv-dropdown__list,.vv-dropdown div:is([role=menu],[role=list-box]))::-webkit-scrollbar-thumb{content:"";background-color:var(--vv-dropdown-element-list-pseudo--webkit-scrollbar-thumb-background-color);border:var(--vv-dropdown-element-list-pseudo--webkit-scrollbar-thumb-border);background-clip:var(--vv-dropdown-element-list-pseudo--webkit-scrollbar-thumb-background-clip)}:where(.vv-dropdown__list,.vv-dropdown div:is([role=menu],[role=list-box]))::-webkit-scrollbar-track{content:"";background-color:var(--vv-dropdown-element-list-pseudo--webkit-scrollbar-track-background-color);padding:var(--vv-dropdown-element-list-pseudo--webkit-scrollbar-track-padding)}:where(.vv-dropdown__item-first,.vv-dropdown :is([role=option],[role=presentation]):first-child){border-top-left-radius:var(--dropdown-border-radius);border-top-right-radius:var(--dropdown-border-radius)}:where(.vv-dropdown__item-last,.vv-dropdown :is([role=option],[role=presentation]):last-child){border-bottom-left-radius:var(--dropdown-border-radius);border-bottom-right-radius:var(--dropdown-border-radius)}:where(.vv-dropdown__item-not-last,.vv-dropdown :is([role=option],[role=presentation]):not(:last-child)){border-width:var(--vv-dropdown-element-item-not-last-border-width);border-color:var(--vv-dropdown-element-item-not-last-border-color);border-style:var(--vv-dropdown-element-item-not-last-border-style)}:where(.vv-dropdown__search){display:var(--vv-dropdown-element-search-display);min-width:var(--vv-dropdown-element-search-min-width);align-items:var(--vv-dropdown-element-search-align-items);min-height:var(--vv-dropdown-element-search-min-height);background-color:var(--vv-dropdown-element-search-background-color);padding:var(--vv-dropdown-element-search-padding);font-size:var(--vv-dropdown-element-search-font-size)}:where(.vv-dropdown__search)::-webkit-search-cancel-button{content:"";-webkit-appearance:var(--vv-dropdown-element-search-pseudo-search-cancel-button--webkit-appearance);opacity:var(--vv-dropdown-element-search-pseudo-search-cancel-button-opacity)}:where(.vv-dropdown__search)::-moz-search-cancel-button{-webkit-appearance:var(--vv-dropdown-element-search-pseudo-search-cancel-button--webkit-appearance);opacity:var(--vv-dropdown-element-search-pseudo-search-cancel-button-opacity)}:where(.vv-dropdown__search)::-moz-placeholder{content:"";color:var(--vv-dropdown-element-search-pseudo-placeholder-color);text-overflow:var(--vv-dropdown-element-search-pseudo-placeholder-text-overflow)}:where(.vv-dropdown__search)::placeholder{content:"";color:var(--vv-dropdown-element-search-pseudo-placeholder-color);text-overflow:var(--vv-dropdown-element-search-pseudo-placeholder-text-overflow)}:where(.vv-dropdown__arrow){position:var(--vv-dropdown-element-arrow-position);width:var(--vv-dropdown-element-arrow-width);height:var(--vv-dropdown-element-arrow-height);z-index:var(--vv-dropdown-element-arrow-z-index);pointer-events:var(--vv-dropdown-element-arrow-pointer-events);border:var(--vv-dropdown-element-arrow-border)}:where(.vv-dropdown__arrow):before{content:"";position:var(--vv-dropdown-element-arrow-pseudo-before-position);top:var(--vv-dropdown-element-arrow-pseudo-before-top);left:var(--vv-dropdown-element-arrow-pseudo-before-left);width:var(--vv-dropdown-element-arrow-pseudo-before-width);height:var(--vv-dropdown-element-arrow-pseudo-before-height);border-left:var(--vv-dropdown-element-arrow-pseudo-before-border-left);border-right:var(--vv-dropdown-element-arrow-pseudo-before-border-right);border-bottom:var(--vv-dropdown-element-arrow-pseudo-before-border-bottom)}:where(.vv-dropdown__arrow):after{content:"";position:var(--vv-dropdown-element-arrow-pseudo-after-position);bottom:var(--vv-dropdown-element-arrow-pseudo-after-bottom);left:var(--vv-dropdown-element-arrow-pseudo-after-left);width:var(--vv-dropdown-element-arrow-pseudo-after-width);height:var(--vv-dropdown-element-arrow-pseudo-after-height);border-left:var(--vv-dropdown-element-arrow-pseudo-after-border-left);border-right:var(--vv-dropdown-element-arrow-pseudo-after-border-right);border-top:var(--vv-dropdown-element-arrow-pseudo-after-border-top)}:where(.vv-dropdown--rounded.vv-dropdown){--dropdown-border-radius:var(--rounded)}:where(.vv-dropdown--block.vv-dropdown){--vv-dropdown-width:var(--vv-dropdown-modifier-block-width)}:where(.vv-dropdown--bottom.vv-dropdown){--vv-dropdown-position:var(--vv-dropdown-modifier-bottom-position);top:var(--vv-dropdown-modifier-bottom-top);right:var(--vv-dropdown-modifier-bottom-right);left:var(--vv-dropdown-modifier-bottom-left)}:where(.vv-dropdown--top.vv-dropdown){--vv-dropdown-position:var(--vv-dropdown-modifier-top-position);left:var(--vv-dropdown-modifier-top-left);right:var(--vv-dropdown-modifier-top-right);bottom:var(--vv-dropdown-modifier-top-bottom)}:where(.vv-dropdown--full-bleed .vv-dropdown__item,.vv-dropdown--full-bleed :is([role=option],[role=presentation])){min-width:var(--vv-dropdown-modifier-full-bleed-element-item-min-width)}:where(.vv-dropdown--dialog.vv-dropdown){--dropdown-border-radius:var(--rounded-lg);--dropdown-custom-position:true;--vv-dropdown-position:var(--vv-dropdown-modifier-dialog-position);--vv-dropdown-display:var(--vv-dropdown-modifier-dialog-display);inset:var(--vv-dropdown-modifier-dialog-inset);--vv-dropdown-width:var(--vv-dropdown-modifier-dialog-width);height:var(--vv-dropdown-modifier-dialog-height);--vv-dropdown-z-index:var(--vv-dropdown-modifier-dialog-z-index);background-color:var(--vv-dropdown-modifier-dialog-background-color);-webkit-backdrop-filter:var(--vv-dropdown-modifier-dialog-backdrop-filter);backdrop-filter:var(--vv-dropdown-modifier-dialog-backdrop-filter);justify-content:var(--vv-dropdown-modifier-dialog-justify-content);align-items:var(--vv-dropdown-modifier-dialog-align-items);padding:var(--vv-dropdown-modifier-dialog-padding);gap:var(--vv-dropdown-modifier-dialog-gap)}:where(.vv-dropdown--dialog .vv-dropdown__list,.vv-dropdown--dialog div:is([role=menu],[role=list-box])){max-width:var(--vv-dropdown-modifier-dialog-element-list-max-width);z-index:var(--vv-dropdown-modifier-dialog-element-list-z-index)}:where(.vv-dropdown--dialog.vv-dropdown--close,.vv-dropdown--dialog.vv-dropdown.close,.vv-dropdown--dialog.vv-dropdown:not([open])){--vv-dropdown-modifier-dialog-display:var(--vv-dropdown-modifier-dialog-state-close-display)}@media (width<=575.98px){:where(.vv-dropdown--mobile .vv-dropdown__list,.vv-dropdown--mobile div:is([role=menu],[role=list-box])){z-index:var(--vv-dropdown-modifier-mobile-element-list-breakpoint-down-xs-z-index);margin-bottom:var(--vv-dropdown-modifier-mobile-element-list-breakpoint-down-xs-margin-bottom);border-radius:var(--dropdown-border-radius)}:where(.vv-dropdown--mobile .vv-dropdown__search){border-radius:var(--dropdown-border-radius)}:where(.vv-dropdown--mobile.vv-dropdown){--dropdown-border-radius:var(--rounded-lg);--dropdown-custom-position:true;position:var(--vv-dropdown-modifier-mobile-breakpoint-down-xs-position);inset:var(--vv-dropdown-modifier-mobile-breakpoint-down-xs-inset);width:var(--vv-dropdown-modifier-mobile-breakpoint-down-xs-width);height:var(--vv-dropdown-modifier-mobile-breakpoint-down-xs-height);z-index:var(--vv-dropdown-modifier-mobile-breakpoint-down-xs-z-index);background-color:var(--vv-dropdown-modifier-mobile-breakpoint-down-xs-background-color);-webkit-backdrop-filter:var(--vv-dropdown-modifier-mobile-breakpoint-down-xs-backdrop-filter);backdrop-filter:var(--vv-dropdown-modifier-mobile-breakpoint-down-xs-backdrop-filter);justify-content:var(--vv-dropdown-modifier-mobile-breakpoint-down-xs-justify-content);padding:var(--vv-dropdown-modifier-mobile-breakpoint-down-xs-padding);gap:var(--vv-dropdown-modifier-mobile-breakpoint-down-xs-gap)}}:where(.vv-dropdown--fade-block-enter-active,.vv-dropdown--fade-block-leave-active){transition:var(--vv-dropdown-transition-fade-block-active-transition)}:where(.vv-dropdown--fade-block-enter-active .vv-dropdown__list,.vv-dropdown--fade-block-leave-active .vv-dropdown__list,.vv-dropdown--fade-block-enter-active div:is([role=menu],[role=list-box]),.vv-dropdown--fade-block-leave-active div:is([role=menu],[role=list-box])){transition:var(--vv-dropdown-transition-fade-block-active-element-list-transition)}:where(.vv-dropdown--fade-block-enter-active .vv-dropdown__search,.vv-dropdown--fade-block-leave-active .vv-dropdown__search){transition:var(--vv-dropdown-transition-fade-block-active-element-search-transition)}:where(.vv-dropdown--fade-block-enter-from){opacity:var(--vv-dropdown-transition-fade-block-enter-from-opacity)}:where(.vv-dropdown--fade-block-enter-from .vv-dropdown__list,.vv-dropdown--fade-block-enter-from div:is([role=menu],[role=list-box])){translate:var(--vv-dropdown-transition-fade-block-enter-from-element-list-translate)}:where(.vv-dropdown--fade-block-enter-from .vv-dropdown__search){translate:var(--vv-dropdown-transition-fade-block-enter-from-element-search-translate)}:where(.vv-dropdown--fade-block-leave-to){opacity:var(--vv-dropdown-transition-fade-block-leave-to-opacity)}:where(.vv-dropdown--fade-block-leave-to .vv-dropdown__list,.vv-dropdown--fade-block-leave-to div:is([role=menu],[role=list-box])){translate:var(--vv-dropdown-transition-fade-block-leave-to-element-list-translate)}:where(.vv-dropdown--fade-block-leave-to .vv-dropdown__search){translate:var(--vv-dropdown-transition-fade-block-leave-to-element-search-translate)}:where(.vv-dropdown--mobile-fade-block-enter-active,.vv-dropdown--mobile-fade-block-leave-active){transition:var(--vv-dropdown-transition-mobile-fade-block-active-transition)}:where(.vv-dropdown--mobile-fade-block-enter-active .vv-dropdown__list,.vv-dropdown--mobile-fade-block-leave-active .vv-dropdown__list,.vv-dropdown--mobile-fade-block-enter-active div:is([role=menu],[role=list-box]),.vv-dropdown--mobile-fade-block-leave-active div:is([role=menu],[role=list-box])){transition:var(--vv-dropdown-transition-mobile-fade-block-active-element-list-transition)}:where(.vv-dropdown--mobile-fade-block-enter-active .vv-dropdown__search,.vv-dropdown--mobile-fade-block-leave-active .vv-dropdown__search){transition:var(--vv-dropdown-transition-mobile-fade-block-active-element-search-transition)}:where(.vv-dropdown--mobile-fade-block-enter-from){opacity:var(--vv-dropdown-transition-mobile-fade-block-enter-from-opacity)}@media (width<=575.98px){:where(.vv-dropdown--mobile-fade-block-enter-from .vv-dropdown__list,.vv-dropdown--mobile-fade-block-enter-from div:is([role=menu],[role=list-box])){translate:var(--vv-dropdown-transition-mobile-fade-block-enter-from-element-list-breakpoint-down-xs-translate)}:where(.vv-dropdown--mobile-fade-block-enter-from .vv-dropdown__search){translate:var(--vv-dropdown-transition-mobile-fade-block-enter-from-element-search-breakpoint-down-xs-translate)}}:where(.vv-dropdown--mobile-fade-block-leave-to){opacity:var(--vv-dropdown-transition-mobile-fade-block-leave-to-opacity)}@media (width<=575.98px){:where(.vv-dropdown--mobile-fade-block-leave-to .vv-dropdown__list,.vv-dropdown--mobile-fade-block-leave-to div:is([role=menu],[role=list-box])){translate:var(--vv-dropdown-transition-mobile-fade-block-leave-to-element-list-breakpoint-down-xs-translate)}:where(.vv-dropdown--mobile-fade-block-leave-to .vv-dropdown__search){translate:var(--vv-dropdown-transition-mobile-fade-block-leave-to-element-search-breakpoint-down-xs-translate)}}