@visa/nova-styles/components/link/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-link-display:inline-flex;--v-link-padding-block:var(--size-scalable-0);--v-link-padding-inline:var(--size-scalable-0);--v-link-icon-gap:0.2857142857rem;--v-link-icon-top:3px;--v-link-icon-transformation:translateY(3px);--v-link-text-decoration:underline;--v-link-background:var(--palette-default-transparent);--v-link-border-color:var(--palette-default-transparent);--v-link-border-radius:var(--size-rounded-none);--v-link-border-size:calc(var(--theme-border-size) * 0);--v-link-border-style:solid;--v-link-foreground:var(--palette-default-active);--v-link-hover-background:var(--palette-default-surface-highlight);--v-link-hover-border-color:var(--palette-default-transparent);--v-link-hover-foreground:var(--palette-default-active-hover);--v-link-focus-background:var(--palette-default-surface-highlight);--v-link-focus-border-color:var(--palette-default-transparent);--v-link-focus-foreground:var(--palette-default-active-hover);--v-link-active-background:var(--palette-default-surface-lowlight);--v-link-active-border-color:var(--palette-default-transparent);--v-link-active-foreground:var(--palette-default-active-pressed);--v-link-disabled-background:var(--palette-default-surface-1);--v-link-disabled-border-color:var(--palette-default-transparent);--v-link-disabled-foreground:var(--palette-default-disabled)}}@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-link{--typography-font-family:var(--typography-body-2-link-font-family);--typography-font-size:var(--typography-body-2-link-font-size);--typography-font-weight:var(--typography-body-2-link-font-weight);--typography-letter-spacing:var(--typography-body-2-link-letter-spacing);--typography-line-height:var(--typography-body-2-link-line-height);--typography-text-decoration:var(--typography-body-2-link-text-decoration);--typography-text-transform:var(--typography-body-2-link-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);align-items:baseline;background-color:var(--v-link-background);border-color:var(--v-link-border-color);border-radius:var(--v-link-border-radius);border-style:var(--v-link-border-style);border-width:var(--v-link-border-size);color:var(--v-link-foreground);cursor:pointer;display:var(--v-link-display);gap:var(--v-link-icon-gap);padding-block:var(--v-link-padding-block);padding-inline:var(--v-link-padding-inline);text-decoration:var(--v-link-text-decoration)}.v-link:hover{background-color:var(--v-link-hover-background);border-color:var(--v-link-hover-border-color);color:var(--v-link-hover-foreground)}.v-link:focus-visible{background-color:var(--v-link-focus-background);border-color:var(--v-link-focus-border-color);color:var(--v-link-focus-foreground)}.v-link:active{background-color:var(--v-link-active-background);border-color:var(--v-link-active-border-color);color:var(--v-link-active-foreground)}button.v-link[disabled],.v-link[role=link][aria-disabled=true]{--v-link-foreground:var(--palette-default-disabled);pointer-events:none}.v-link-no-underline{text-decoration:none}.v-link>.v-icon{--v-icon-primary:currentColor;--v-icon-secondary:currentColor;top:var(--v-link-icon-top);transform:var(--v-link-icon-transformation)}.v-link:has(>.v-icon){--v-link-display:inline}.v-link:has(>.v-icon)>.v-icon{margin-left:var(--v-link-icon-gap)}.v-link.v-link-no-underline:has(>.v-icon)>.v-icon{margin-left:calc(var(--v-link-icon-gap)*.3025)}}