@visa/nova-styles/components/dropdown-menu/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              Copyright (c) 2025 Visa, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
@layer components{:root,.v-alternate{--v-dropdown-menu-surface-margin-block-start:var(--size-scalable-2)}}@layer utilities{.v-screen-reader,.v-sr{clip:rect(0, 0, 0, 0);clip-path:inset(50%);height:1px;inset-inline-start:-100000px;overflow:hidden;position:absolute;inset-block-start:0;width:1px;z-index:-1;white-space:nowrap}}@layer abstracts{:root,.v-alternate{--v-action-secondary-block-size:var(--size-scalable-38);--v-action-secondary-font-size:var(--typography-label-font-size);--v-action-secondary-font-weight:600;--v-action-secondary-gap:var(--size-scalable-2);--v-action-secondary-letter-spacing:0.5px;--v-action-secondary-line-height:var(--typography-label-line-height);--v-action-secondary-padding-block:calc(var(--size-scalable-10) - var(--v-action-secondary-border-size));--v-action-secondary-padding-inline:calc(var(--size-scalable-14) - var(--v-action-secondary-border-size));--v-action-secondary-background:var(--palette-default-surface-1);--v-action-secondary-border-color:var(--palette-default-active);--v-action-secondary-border-radius:var(--size-rounded-medium);--v-action-secondary-border-size:calc(var(--theme-border-size) / 2);--v-action-secondary-border-style:solid;--v-action-secondary-foreground:var(--palette-default-active);--v-action-secondary-hover-background:var(--palette-default-surface-highlight);--v-action-secondary-hover-border-color:var(--palette-default-active-hover);--v-action-secondary-hover-foreground:var(--palette-default-active-hover);--v-action-secondary-focus-background:var(--palette-default-surface-highlight);--v-action-secondary-focus-border-color:var(--palette-default-active-hover);--v-action-secondary-focus-foreground:var(--palette-default-active-hover);--v-action-secondary-active-background:var(--palette-default-surface-lowlight);--v-action-secondary-active-border-color:var(--palette-default-active-pressed);--v-action-secondary-active-foreground:var(--palette-default-active-pressed);--v-action-secondary-disabled-background:var(--palette-default-surface-1);--v-action-secondary-disabled-border-color:var(--palette-default-disabled);--v-action-secondary-disabled-foreground:var(--palette-default-disabled)}}@layer abstracts{.v-action-secondary.v-action-stateless{background-color:var(--v-action-secondary-background);border-color:var(--v-action-secondary-border-color);border-radius:var(--v-action-secondary-border-radius);border-style:var(--v-action-secondary-border-style);border-width:var(--v-action-secondary-border-size);color:var(--v-action-secondary-foreground);font-size:var(--v-action-secondary-font-size);font-weight:var(--v-action-secondary-font-weight);gap:var(--v-action-secondary-gap);letter-spacing:var(--v-action-secondary-letter-spacing);line-height:var(--v-action-secondary-line-height)}}@layer abstracts{.v-action-secondary:not(.v-action-stateless){background-color:var(--v-action-secondary-background);border-color:var(--v-action-secondary-border-color);border-radius:var(--v-action-secondary-border-radius);border-style:var(--v-action-secondary-border-style);border-width:var(--v-action-secondary-border-size);color:var(--v-action-secondary-foreground);font-size:var(--v-action-secondary-font-size);font-weight:var(--v-action-secondary-font-weight);gap:var(--v-action-secondary-gap);letter-spacing:var(--v-action-secondary-letter-spacing);line-height:var(--v-action-secondary-line-height);block-size:var(--v-action-secondary-block-size);cursor:pointer;padding-block:var(--v-action-secondary-padding-block);padding-inline:var(--v-action-secondary-padding-inline)}.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:hover),.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:hover),.v-action-secondary:not(.v-action-stateless):hover{--v-action-secondary-background:var(--v-action-secondary-hover-background);--v-action-secondary-border-color:var(--v-action-secondary-hover-border-color);--v-action-secondary-foreground:var(--v-action-secondary-hover-foreground)}.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:focus-visible),.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:focus-visible),.v-action-secondary:not(.v-action-stateless):focus-visible{--v-action-secondary-background:var(--v-action-secondary-focus-background);--v-action-secondary-border-color:var(--v-action-secondary-focus-border-color);--v-action-secondary-foreground:var(--v-action-secondary-focus-foreground)}.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:focus-visible) .v-label,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:focus-visible) .v-label,.v-action-secondary:not(.v-action-stateless):focus-visible .v-label{color:var(--v-action-secondary-focus-foreground)}.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:active),.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:active),.v-action-secondary:not(.v-action-stateless):active{--v-action-secondary-background:var(--v-action-secondary-active-background);--v-action-secondary-border-color:var(--v-action-secondary-active-border-color);--v-action-secondary-foreground:var(--v-action-secondary-active-foreground)}.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:active) .v-label,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:active) .v-label,.v-action-secondary:not(.v-action-stateless):active .v-label{color:var(--v-action-secondary-active-foreground)}.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type),.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type){--v-action-secondary-block-size:100%}.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type):has(.v-checkbox:focus-visible),.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type):has(.v-radio:focus-visible),.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type):has(.v-checkbox:focus-visible),.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type):has(.v-radio:focus-visible){outline-width:var(--theme-focus-outline-size);outline-style:dashed;outline-color:var(--palette-default-active-pressed);outline-offset:var(--theme-focus-outline-offset);--theme-focus-outline-offset:0px}.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-label:only-of-type,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-label:only-of-type{inline-size:100%}.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:focus-visible{outline:none}.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:focus-visible::after,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:focus-visible::after,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:focus-visible::after,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:focus-visible::after{display:none}.v-action-secondary:not(.v-action-stateless)[disabled],.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type:disabled),.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type:disabled){--v-action-secondary-background:var(--v-action-secondary-disabled-background);--v-action-secondary-border-color:var(--v-action-secondary-disabled-border-color);--v-action-secondary-foreground:var(--v-action-secondary-disabled-foreground);--v-label-color:var(--v-action-secondary-disabled-foreground);--v-input-message-color:var(--v-action-secondary-disabled-foreground);cursor:default}}@layer components{.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:hover,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-radio:active,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:hover,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type) .v-checkbox:active,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:hover,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-radio:active,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:hover,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type) .v-checkbox:active{--v-checkbox-glow-color:rgba(0,0,0,0)}.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type):hover,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type):hover{--v-checkbox-color:var(--v-checkbox-hover-color)}.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type):focus-visible,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type):focus-visible{--v-checkbox-color:var(--v-checkbox-focus-color)}.v-action-secondary:not(.v-action-stateless):has(.v-checkbox:only-of-type):active,.v-action-secondary:not(.v-action-stateless):has(.v-radio:only-of-type):active{--v-checkbox-color:var(--v-checkbox-active-color)}}@layer components{.v-dropdown:not(:has(.v-input[aria-expanded=true]))+.v-surface:has(.v-listbox),.v-dropdown:not(:has(.v-input[aria-expanded=true]))+.v-listbox-container:has(.v-listbox){margin-block-start:var(--v-dropdown-menu-surface-margin-block-start)}.v-dropdown[aria-expanded=true]+.v-surface:has(.v-listbox),.v-dropdown[aria-expanded=true]+.v-listbox-container:has(.v-listbox),.v-dropdown:has(.v-input[aria-expanded=true])+.v-surface:has(.v-listbox),.v-dropdown:has(.v-input[aria-expanded=true])+.v-listbox-container:has(.v-listbox){box-shadow:var(--elevation-xlarge);display:flex}.v-dropdown[aria-expanded=true]+.v-surface .v-listbox-item,.v-dropdown[aria-expanded=true]+.v-listbox-container .v-listbox-item,.v-dropdown:has(.v-input[aria-expanded=true])+.v-surface .v-listbox-item,.v-dropdown:has(.v-input[aria-expanded=true])+.v-listbox-container .v-listbox-item{--v-action-secondary-border-size:var(--v-listbox-border-size)}@media(prefers-contrast: more)and (forced-colors: active){.v-dropdown[aria-expanded=true]+.v-surface .v-listbox-item,.v-dropdown[aria-expanded=true]+.v-listbox-container .v-listbox-item,.v-dropdown:has(.v-input[aria-expanded=true])+.v-surface .v-listbox-item,.v-dropdown:has(.v-input[aria-expanded=true])+.v-listbox-container .v-listbox-item{border-width:1px;border-color:rgba(0,0,0,0)}}.v-dropdown[aria-expanded=true]+.v-surface .v-listbox-item:not(.v-button-destructive):not(:disabled) .v-listbox-item-label,.v-dropdown[aria-expanded=true]+.v-listbox-container .v-listbox-item:not(.v-button-destructive):not(:disabled) .v-listbox-item-label,.v-dropdown:has(.v-input[aria-expanded=true])+.v-surface .v-listbox-item:not(.v-button-destructive):not(:disabled) .v-listbox-item-label,.v-dropdown:has(.v-input[aria-expanded=true])+.v-listbox-container .v-listbox-item:not(.v-button-destructive):not(:disabled) .v-listbox-item-label{color:var(--palette-default-text)}.v-dropdown[aria-expanded=true]+.v-surface .v-listbox-item:not(.v-button-destructive):not(:disabled) .v-icon,.v-dropdown[aria-expanded=true]+.v-listbox-container .v-listbox-item:not(.v-button-destructive):not(:disabled) .v-icon,.v-dropdown:has(.v-input[aria-expanded=true])+.v-surface .v-listbox-item:not(.v-button-destructive):not(:disabled) .v-icon,.v-dropdown:has(.v-input[aria-expanded=true])+.v-listbox-container .v-listbox-item:not(.v-button-destructive):not(:disabled) .v-icon{color:var(--palette-default-active-subtle)}.v-dropdown[aria-expanded=true]+.v-surface .v-listbox-item.v-button,.v-dropdown[aria-expanded=true]+.v-listbox-container .v-listbox-item.v-button,.v-dropdown:has(.v-input[aria-expanded=true])+.v-surface .v-listbox-item.v-button,.v-dropdown:has(.v-input[aria-expanded=true])+.v-listbox-container .v-listbox-item.v-button{--v-button-default-justify-content:start}.v-dropdown[aria-expanded=true]+.v-surface .v-listbox-item.v-button-destructive,.v-dropdown[aria-expanded=true]+.v-listbox-container .v-listbox-item.v-button-destructive,.v-dropdown:has(.v-input[aria-expanded=true])+.v-surface .v-listbox-item.v-button-destructive,.v-dropdown:has(.v-input[aria-expanded=true])+.v-listbox-container .v-listbox-item.v-button-destructive{--typography-font-family:var(--typography-label-large-active-font-family);--typography-font-size:var(--typography-label-large-active-font-size);--typography-font-weight:var(--typography-label-large-active-font-weight);--typography-letter-spacing:var(--typography-label-large-active-letter-spacing);--typography-line-height:var(--typography-label-large-active-line-height);--typography-text-decoration:var(--typography-label-large-active-text-decoration);--typography-text-transform:var(--typography-label-large-active-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform)}.v-dropdown[aria-expanded=true].v-button:has(+.v-surface *:focus-visible),.v-dropdown[aria-expanded=true].v-button:has(+.v-listbox-container *:focus-visible),.v-dropdown:has(.v-input[aria-expanded=true]).v-button:has(+.v-surface *:focus-visible),.v-dropdown:has(.v-input[aria-expanded=true]).v-button:has(+.v-listbox-container *:focus-visible){--v-button-default-background:var(--v-button-default-active-background);--v-button-default-border-color:var(--v-button-default-active-border-color);--v-button-default-foreground:var(--v-button-default-active-foreground)}.v-dropdown-menu{--v-surface-border-color:var(--palette-default-border);--v-surface-border-radius:var(--size-rounded-large);--v-surface-border-size:1px;--v-surface-padding-block:0px;--v-surface-padding-inline:0px;box-shadow:var(--elevation-xlarge);display:flex}.v-dropdown-menu li.v-listbox-item .v-link,.v-dropdown-menu li.v-listbox-item .v-button{--v-button-default-justify-content:start}.v-dropdown-menu li.v-listbox-item .v-link-destructive,.v-dropdown-menu li.v-listbox-item .v-button-destructive{--typography-font-family:var(--typography-label-large-active-font-family);--typography-font-size:var(--typography-label-large-active-font-size);--typography-font-weight:var(--typography-label-large-active-font-weight);--typography-letter-spacing:var(--typography-label-large-active-letter-spacing);--typography-line-height:var(--typography-label-large-active-line-height);--typography-text-decoration:var(--typography-label-large-active-text-decoration);--typography-text-transform:var(--typography-label-large-active-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform)}.v-dropdown-menu li .v-listbox-item{width:100%;background-color:var(--v-action-secondary-background);border-color:var(--v-action-secondary-border-color);border-radius:var(--v-action-secondary-border-radius);border-style:var(--v-action-secondary-border-style);border-width:var(--v-action-secondary-border-size);color:var(--v-action-secondary-foreground);font-size:var(--v-action-secondary-font-size);font-weight:var(--v-action-secondary-font-weight);gap:var(--v-action-secondary-gap);letter-spacing:var(--v-action-secondary-letter-spacing);line-height:var(--v-action-secondary-line-height);block-size:var(--v-action-secondary-block-size);cursor:pointer;padding-block:var(--v-action-secondary-padding-block);padding-inline:var(--v-action-secondary-padding-inline);--typography-font-family:var(--typography-label-large-font-family);--typography-font-size:var(--typography-label-large-font-size);--typography-font-weight:var(--typography-label-large-font-weight);--typography-letter-spacing:var(--typography-label-large-letter-spacing);--typography-line-height:var(--typography-label-large-line-height);--typography-text-decoration:var(--typography-label-large-text-decoration);--typography-text-transform:var(--typography-label-large-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform)}.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type:hover),.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type:hover),.v-dropdown-menu li .v-listbox-item:hover{--v-action-secondary-background:var(--v-action-secondary-hover-background);--v-action-secondary-border-color:var(--v-action-secondary-hover-border-color);--v-action-secondary-foreground:var(--v-action-secondary-hover-foreground)}.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type:focus-visible),.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type:focus-visible),.v-dropdown-menu li .v-listbox-item:focus-visible{--v-action-secondary-background:var(--v-action-secondary-focus-background);--v-action-secondary-border-color:var(--v-action-secondary-focus-border-color);--v-action-secondary-foreground:var(--v-action-secondary-focus-foreground)}.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type:focus-visible) .v-label,.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type:focus-visible) .v-label,.v-dropdown-menu li .v-listbox-item:focus-visible .v-label{color:var(--v-action-secondary-focus-foreground)}.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type:active),.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type:active),.v-dropdown-menu li .v-listbox-item:active{--v-action-secondary-background:var(--v-action-secondary-active-background);--v-action-secondary-border-color:var(--v-action-secondary-active-border-color);--v-action-secondary-foreground:var(--v-action-secondary-active-foreground)}.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type:active) .v-label,.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type:active) .v-label,.v-dropdown-menu li .v-listbox-item:active .v-label{color:var(--v-action-secondary-active-foreground)}.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type),.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type){--v-action-secondary-block-size:100%}.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type):has(.v-checkbox:focus-visible),.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type):has(.v-radio:focus-visible),.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type):has(.v-checkbox:focus-visible),.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type):has(.v-radio:focus-visible){outline-width:var(--theme-focus-outline-size);outline-style:dashed;outline-color:var(--palette-default-active-pressed);outline-offset:var(--theme-focus-outline-offset);--theme-focus-outline-offset:0px}.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type) .v-label:only-of-type,.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type) .v-label:only-of-type{inline-size:100%}.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type) .v-checkbox:focus-visible,.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type) .v-radio:focus-visible,.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type) .v-checkbox:focus-visible,.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type) .v-radio:focus-visible{outline:none}.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type) .v-checkbox:focus-visible::after,.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type) .v-radio:focus-visible::after,.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type) .v-checkbox:focus-visible::after,.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type) .v-radio:focus-visible::after{display:none}.v-dropdown-menu li .v-listbox-item[disabled],.v-dropdown-menu li .v-listbox-item:has(.v-checkbox:only-of-type:disabled),.v-dropdown-menu li .v-listbox-item:has(.v-radio:only-of-type:disabled){--v-action-secondary-background:var(--v-action-secondary-disabled-background);--v-action-secondary-border-color:var(--v-action-secondary-disabled-border-color);--v-action-secondary-foreground:var(--v-action-secondary-disabled-foreground);--v-label-color:var(--v-action-secondary-disabled-foreground);--v-input-message-color:var(--v-action-secondary-disabled-foreground);cursor:default}.v-dropdown-menu li .v-listbox-item.v-button-destructive:not(:disabled){color:var(--v-button-default-foreground) !important}.v-dropdown-menu li .v-listbox-item.v-button-destructive:not(:disabled):hover,.v-dropdown-menu li .v-listbox-item.v-button-destructive:not(:disabled):focus{background-color:var(--v-button-default-background)}}