@visa/nova-styles/components/anchor-link-menu/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              © 2025-2026 Visa
 *
 * 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-anchor-link-menu-inline-size:200px;--v-anchor-link-menu-gap:var(--size-scalable-6);--v-anchor-link-menu-background:var(--palette-default-surface-1);--v-anchor-link-menu-border-style:solid;--v-anchor-link-menu-border-color:var(--palette-default-border);--v-anchor-link-menu-border-block-start-size:var(--size-scalable-0);--v-anchor-link-menu-border-block-end-size:var(--size-scalable-0);--v-anchor-link-menu-border-inline-start-size:var(--size-scalable-1);--v-anchor-link-menu-border-inline-end-size:var(--size-scalable-0);--v-anchor-link-menu-padding-block-end:var(--size-scalable-0);--v-anchor-link-menu-padding-block-start:var(--size-scalable-0);--v-anchor-link-menu-padding-inline-end:var(--size-scalable-10);--v-anchor-link-menu-padding-inline-start:var(--size-scalable-0);--v-anchor-link-menu-title-text-color:var(--palette-default-text-subtle);--v-anchor-link-menu-item-padding-block:var(--size-scalable-6);--v-anchor-link-menu-item-padding-inline:var(--size-scalable-10);--v-anchor-link-menu-indicator-color:inherit;--v-anchor-link-menu-indicator-style:solid;--v-anchor-link-menu-indicator-size:var(--size-scalable-2);--v-anchor-link-menu-indicator-offset:var(--size-scalable-4);--v-anchor-link-menu-indent-ratio:var(--size-scalable-14)}}@layer utilities{.v-flex{display:flex}.v-flex-inline{display:inline-flex}.v-flex-col{flex-direction:column}.v-flex-col-reverse{flex-direction:column-reverse}.v-flex-row{flex-direction:row}.v-flex-row-reverse{flex-direction:row-reverse}.v-flex-wrap{flex-wrap:wrap}.v-flex-wrap-reverse{flex-wrap:wrap-reverse}.v-flex-nowrap{flex-wrap:nowrap}.v-flex-grow{flex-grow:1}.v-flex-shrink{flex-shrink:1}.v-align-content-center{align-content:center}.v-align-content-start{align-content:flex-start}.v-align-content-end{align-content:flex-end}.v-align-content-between{align-content:space-between}.v-align-content-around{align-content:space-around}.v-align-content-evenly{align-content:space-evenly}.v-align-items-start{align-items:flex-start}.v-align-items-end{align-items:flex-end}.v-align-items-center{align-items:center}.v-align-items-baseline{align-items:baseline}.v-align-items-stretch{align-items:stretch}.v-align-self-start{align-self:flex-start}.v-align-self-end{align-self:flex-end}.v-align-self-auto{align-self:auto}.v-align-self-center{align-self:center}.v-align-self-stretch{align-self:stretch}.v-align-self-baseline{align-self:baseline}.v-justify-content-start{justify-content:flex-start}.v-justify-content-end{justify-content:flex-end}.v-justify-content-center{justify-content:center}.v-justify-content-between{justify-content:space-between}.v-justify-content-around{justify-content:space-around}.v-justify-content-evenly{justify-content:space-evenly}}@layer utilities{.v-flex-0{flex:0}.v-flex-1{flex:1}.v-flex-2{flex:2}.v-flex-3{flex:3}.v-flex-4{flex:4}.v-flex-5{flex:5}.v-flex-6{flex:6}.v-flex-7{flex:7}.v-flex-8{flex:8}.v-flex-9{flex:9}.v-flex-10{flex:10}.v-flex-11{flex:11}.v-flex-12{flex:12}.v-flex-grow-0{flex-grow:0}.v-flex-grow-1{flex-grow:1}.v-flex-grow-2{flex-grow:2}.v-flex-grow-3{flex-grow:3}.v-flex-grow-4{flex-grow:4}.v-flex-grow-5{flex-grow:5}.v-flex-grow-6{flex-grow:6}.v-flex-grow-7{flex-grow:7}.v-flex-grow-8{flex-grow:8}.v-flex-grow-9{flex-grow:9}.v-flex-grow-10{flex-grow:10}.v-flex-grow-11{flex-grow:11}.v-flex-grow-12{flex-grow:12}.v-flex-shrink-0{flex-shrink:0}.v-flex-shrink-1{flex-shrink:1}.v-flex-shrink-2{flex-shrink:2}.v-flex-shrink-3{flex-shrink:3}.v-flex-shrink-4{flex-shrink:4}.v-flex-shrink-5{flex-shrink:5}.v-flex-shrink-6{flex-shrink:6}.v-flex-shrink-7{flex-shrink:7}.v-flex-shrink-8{flex-shrink:8}.v-flex-shrink-9{flex-shrink:9}.v-flex-shrink-10{flex-shrink:10}.v-flex-shrink-11{flex-shrink:11}.v-flex-shrink-12{flex-shrink:12}}@layer components{.v-anchor-link-menu{background:var(--v-anchor-link-menu-background);inline-size:var(--v-anchor-link-menu-inline-size);padding-block-end:var(--v-anchor-link-menu-padding-block-end);padding-block-start:var(--v-anchor-link-menu-padding-block-start);padding-inline-end:var(--v-anchor-link-menu-padding-inline-end);padding-inline-start:var(--v-anchor-link-menu-padding-inline-start);position:relative}.v-anchor-link-menu::before{border-block-end-width:var(--v-anchor-link-menu-border-block-end-size);border-block-start-width:var(--v-anchor-link-menu-border-block-start-size);border-color:var(--v-anchor-link-menu-border-color);border-inline-end-width:var(--v-anchor-link-menu-border-inline-end-size);border-inline-start-width:var(--v-anchor-link-menu-border-inline-start-size);border-style:var(--v-anchor-link-menu-border-style);content:"";display:block;inset:0;pointer-events:none;position:absolute}.v-anchor-link-menu section{display:flex;flex-direction:column;row-gap:var(--v-anchor-link-menu-gap)}.v-anchor-link-menu .v-anchor-link-menu-header{color:var(--v-anchor-link-menu-title-text-color);margin-inline-start:calc(var(--v-anchor-link-menu-indicator-offset) + var(--v-anchor-link-menu-indicator-size));padding-block-start:var(--v-anchor-link-menu-item-padding-block);padding-inline:var(--v-anchor-link-menu-item-padding-inline)}.v-anchor-link-menu ul{display:flex;flex-direction:column;row-gap:var(--v-anchor-link-menu-gap)}.v-anchor-link-menu ul:not(.v-anchor-link-menu section>ul){grid-column:1/-1}.v-anchor-link-menu ul li{--level:1;--indicator:var(--v-anchor-link-menu-indicator-size);--offset:var(--v-anchor-link-menu-indicator-offset);--indent:calc(var(--v-anchor-link-menu-indent-ratio)*(var(--level) - 1));--link:1fr;color:var(--v-link-foreground);display:grid;grid-auto-flow:row;grid-template-areas:"indicator indicator-offset indent link";grid-template-columns:var(--indicator) var(--offset) var(--indent) var(--link);position:relative;row-gap:var(--v-anchor-link-menu-gap)}.v-anchor-link-menu ul li:has(>.v-link[aria-current=true])>.v-link{--v-link-foreground:var(--palette-default-active)}.v-anchor-link-menu ul li:has(>.v-link[aria-current=true])>.v-link::before{opacity:1;visibility:visible}.v-anchor-link-menu ul li>.v-link{--typography-font-family:var(--typography-label-font-family);--typography-font-size:var(--typography-label-font-size);--typography-font-weight:var(--typography-label-font-weight);--typography-letter-spacing:var(--typography-label-letter-spacing);--typography-line-height:var(--typography-label-line-height);--typography-text-decoration:var(--typography-label-text-decoration);--typography-text-transform:var(--typography-label-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-link-active-background:var(--palette-default-transparent);--v-link-background:var(--palette-default-transparent);--v-link-border-radius:var(--size-rounded-medium);--v-link-focus-background:var(--palette-default-transparent);--v-link-foreground:var(--palette-default-text-subtle);--v-link-hover-background:var(--palette-default-transparent);--v-link-padding-block:var(--v-anchor-link-menu-item-padding-block);--v-link-padding-inline:var(--v-anchor-link-menu-item-padding-inline);--v-link-text-decoration:none;grid-area:link}.v-anchor-link-menu ul li>.v-link::before{border-inline-start-color:var(--v-anchor-link-menu-indicator-color);border-inline-start-style:var(--v-anchor-link-menu-indicator-style);border-inline-start-width:var(--v-anchor-link-menu-indicator-size);content:"";display:block;grid-area:indicator;inset-block:0;inset-inline-start:0;opacity:0;position:absolute;visibility:hidden}.v-anchor-link-menu ul ul li{--level:2}.v-anchor-link-menu ul ul ul li{--level:3}.v-anchor-link-menu ul ul ul ul li{--level:4}.v-anchor-link-menu ul ul ul ul ul li{--level:5}.v-anchor-link-menu ul ul ul ul ul ul li{--level:6}[dir=rtl] .v-anchor-link-menu{--v-anchor-link-menu-text-align:right}[dir=rtl] .v-anchor-link-menu-header{margin-inline-end:calc(var(--v-anchor-link-menu-indicator-offset) + var(--v-anchor-link-menu-indicator-size));margin-inline-start:0}}