@visa/nova-styles/components/tabs/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-tabs-active-line-padding:var(--size-scalable-10);--v-tabs-border-bottom-size:0;--v-tabs-group-gap:var(--size-scalable-6);--v-tabs-padding-inline:var(--size-scalable-12);--v-tabs-vertical-active-line-padding:var(--size-scalable-8);--v-tabs-vertical-block-size:var(--size-scalable-40);--v-tabs-vertical-padding-block:calc(var(--size-scalable-11) - var(--v-button-default-border-size));--v-tabs-vertical-padding-inline-end:calc(var(--size-scalable-14) - var(--v-button-default-border-size));--v-tabs-vertical-padding-inline-start:calc(var(--size-scalable-10) - var(--v-button-default-border-size));--v-tabs-vertical-nested-count:0;--v-tabs-vertical-tab-indent:var(--size-scalable-14);--v-tabs-section-title-padding-block-start:var(--size-scalable-9);--v-tabs-section-title-padding-block-end:var(--size-scalable-3);--v-tabs-direction:row;--v-tabs-foreground-initial:var(--palette-default-text-subtle);--v-tabs-icon-color-initial:var(--palette-default-active);--v-tabs-gap:var(--size-scalable-8);--v-tabs-icon-size:1.2857142857rem;--v-tabs-default-highlight:var(--palette-default-transparent);--v-tabs-active-foreground:var(--palette-default-text);--v-tabs-selected-background:var(--palette-default-surface-3);--v-tabs-selected-highlight-border-size:var(--theme-border-size);--v-tabs-selected-highlight:var(--palette-default-active-hover);--v-tabs-expanded-icon-color:var(--palette-default-active-hover);--v-tabs-expanded-background:var(--palette-default-surface-lowlight);--v-tabs-expanded-foreground:var(--palette-default-text);--v-tabs-suffix-icon-size:1.1428571429rem;--v-tabs-suffix-icon-color:var(--palette-default-active-subtle);--v-tabs-stacked-block-size:calc(var(--v-button-default-stacked-icon-size) + var(--typography-label-large-line-height) + var(--v-tabs-gap) + var(--v-button-default-padding-block) * 2);--v-tabs-outline-offset:0px}}@layer components{.v-tab{--v-tabs-horizontal-padding-block-end:calc(var(--v-tabs-active-line-padding) + var(--v-tabs-selected-highlight-border-size));border-block-end-color:var(--v-tabs-default-highlight);border-block-end-style:solid;border-block-end-width:var(--v-tabs-border-bottom-size);display:inline-block;padding-block-end:var(--v-tabs-horizontal-padding-block-end)}.v-tab .v-button{--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);position:initial;--v-button-default-padding-inline:var(--v-tabs-padding-inline);--v-button-default-gap:var(--v-tabs-gap)}.v-tab .v-button,.v-tab .v-button-secondary,.v-tab .v-button-tertiary{--v-button-secondary-foreground:var(--v-tabs-foreground-initial);--v-button-tertiary-foreground:var(--v-tabs-foreground-initial)}.v-tab .v-button .v-icon,.v-tab .v-button-secondary .v-icon,.v-tab .v-button-tertiary .v-icon{--v-icon-primary:var(--v-tabs-icon-color-initial);--v-icon-secondary:var(--v-tabs-icon-color-initial)}.v-nav .v-button[aria-current=page],.v-tab .v-button[aria-current=page],.v-tab .v-button[aria-selected=true],.v-tab .v-button-secondary[aria-current=page],.v-tab .v-button-secondary[aria-selected=true],.v-tab .v-button-tertiary[aria-current=page],.v-tab .v-button-tertiary[aria-selected=true]{color:var(--v-tabs-active-foreground);--v-button-secondary-background:var(--v-tabs-selected-background);--v-button-tertiary-background:var(--v-tabs-selected-background)}.v-tab .v-button:hover,.v-tab .v-button:focus-visible,.v-tab .v-button:active,.v-tab .v-button-secondary:hover,.v-tab .v-button-secondary:focus-visible,.v-tab .v-button-secondary:active,.v-tab .v-button-tertiary:hover,.v-tab .v-button-tertiary:focus-visible,.v-tab .v-button-tertiary:active{--v-icon-primary:var(--v-button-default-foreground);--v-icon-secondary:var(--v-button-default-foreground)}.v-tab .v-button .v-tab-suffix,.v-tab .v-button-secondary .v-tab-suffix,.v-tab .v-button-tertiary .v-tab-suffix{--v-icon-primary:var(--v-tabs-suffix-icon-color);--v-icon-secondary:var(--v-tabs-suffix-icon-color)}.v-tab .v-button:disabled,.v-tab .v-button-secondary:disabled,.v-tab .v-button-tertiary:disabled{--v-tabs-active-foreground:var(--v-button-default-foreground)}.v-tab .v-button:disabled,.v-tab .v-button:disabled .v-icon,.v-tab .v-button:disabled .v-tab-suffix,.v-tab .v-button-secondary:disabled,.v-tab .v-button-secondary:disabled .v-icon,.v-tab .v-button-secondary:disabled .v-tab-suffix,.v-tab .v-button-tertiary:disabled,.v-tab .v-button-tertiary:disabled .v-icon,.v-tab .v-button-tertiary:disabled .v-tab-suffix{--v-icon-primary:currentColor;--v-icon-secondary:currentColor}.v-tab .v-button .v-tab-suffix{--v-icon-height:var(--v-tabs-suffix-icon-size);--v-icon-width:var(--v-tabs-suffix-icon-size);margin-inline-start:auto}.v-tab .v-button:focus-visible{--theme-focus-outline-offset:var(--v-tabs-outline-offset)}.v-nav .v-button[aria-current=page],.v-tab .v-button[aria-current=page],.v-tab .v-button[aria-selected=true]{--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-tab .v-button-stacked{--v-button-default-block-size:var(--v-tabs-stacked-block-size);--v-button-default-gap:var(--v-tabs-gap)}.v-tab .v-button-stacked:has(.v-badge){--v-button-default-badge-offset-x:-0.5;--v-button-default-badge-offset-y:-0.15;position:relative}.v-nav .v-tab:has(.v-button[aria-current=page]),.v-tab:has(.v-button[aria-current=page]),.v-tab:has(.v-button[aria-selected=true]){--v-tabs-default-highlight:var(--v-tabs-selected-highlight);--v-tabs-border-bottom-size:var(--v-tabs-selected-highlight-border-size);--v-tabs-horizontal-padding-block-end:var(--v-tabs-active-line-padding)}.v-tab:has(.v-button[disabled]){--v-tabs-default-highlight:rgba(0,0,0,0)}.v-tabs{display:flex;flex-direction:var(--v-tabs-direction);gap:var(--v-tabs-group-gap)}.v-tabs .v-tabs,.v-tabs.v-tabs,.v-tabs-horizontal .v-tabs,.v-tabs-horizontal.v-tabs,.v-nav-horizontal .v-tabs,.v-nav-horizontal.v-tabs,.v-nav:has(.v-tabs) .v-tabs,.v-nav:has(.v-tabs).v-tabs{flex-wrap:wrap}.v-tabs-vertical,.v-nav-vertical{--v-button-default-block-size:var(--v-tabs-vertical-block-size);--v-button-default-icon-size:var(--v-tabs-icon-size);--v-button-default-justify-content:flex-start;--v-button-default-padding-block:var(--v-tabs-vertical-padding-block);--v-tabs-direction:column;inline-size:100%;position:relative}.v-tabs-vertical .v-tab,.v-nav-vertical .v-tab{border-block-end:0;inline-size:100%;padding-block-end:0;--v-tabs-direction:row}.v-tabs-vertical .v-tab .v-button,.v-tabs-vertical .v-tab.v-tab-section-title,.v-nav-vertical .v-tab .v-button,.v-nav-vertical .v-tab.v-tab-section-title{--tabs-margin-inline-start:calc(var(--v-tabs-vertical-tab-indent)*var(--v-tabs-vertical-nested-count));inline-size:calc(100% - var(--tabs-margin-inline-start));margin-inline-start:var(--tabs-margin-inline-start);padding-inline-end:var(--v-tabs-vertical-padding-inline-end);padding-inline-start:var(--v-tabs-vertical-padding-inline-start)}.v-tabs-vertical .v-tab .v-button::before,.v-tabs-vertical .v-tab.v-tab-section-title::before,.v-nav-vertical .v-tab .v-button::before,.v-nav-vertical .v-tab.v-tab-section-title::before{content:"";position:absolute}.v-tabs-vertical .v-tab .v-button:has(.v-avatar) .v-avatar .v-icon,.v-tabs-vertical .v-tab .v-button:has(.v-avatar) .v-avatar.v-icon,.v-tabs-vertical .v-tab.v-tab-section-title:has(.v-avatar) .v-avatar .v-icon,.v-tabs-vertical .v-tab.v-tab-section-title:has(.v-avatar) .v-avatar.v-icon,.v-nav-vertical .v-tab .v-button:has(.v-avatar) .v-avatar .v-icon,.v-nav-vertical .v-tab .v-button:has(.v-avatar) .v-avatar.v-icon,.v-nav-vertical .v-tab.v-tab-section-title:has(.v-avatar) .v-avatar .v-icon,.v-nav-vertical .v-tab.v-tab-section-title:has(.v-avatar) .v-avatar.v-icon{--v-icon-height:var(--v-tabs-icon-size);--v-icon-width:var(--v-tabs-icon-size)}.v-tabs-vertical .v-tab .v-button[aria-current=page]::before,.v-tabs-vertical .v-tab .v-button[aria-selected=true]::before,.v-tabs-vertical .v-tab.v-tab-section-title[aria-current=page]::before,.v-tabs-vertical .v-tab.v-tab-section-title[aria-selected=true]::before,.v-nav-vertical .v-tab .v-button[aria-current=page]::before,.v-nav-vertical .v-tab .v-button[aria-selected=true]::before,.v-nav-vertical .v-tab.v-tab-section-title[aria-current=page]::before,.v-nav-vertical .v-tab.v-tab-section-title[aria-selected=true]::before{block-size:var(--v-tabs-vertical-block-size);border-inline-start:var(--v-tabs-selected-highlight-border-size) solid var(--v-tabs-default-highlight);content:"";left:0}.v-tabs-vertical .v-tab.v-tab-section-title,.v-nav-vertical .v-tab.v-tab-section-title{--typography-font-family:var(--typography-overline-font-family);--typography-font-size:var(--typography-overline-font-size);--typography-font-weight:var(--typography-overline-font-weight);--typography-letter-spacing:var(--typography-overline-letter-spacing);--typography-line-height:var(--typography-overline-line-height);--typography-text-decoration:var(--typography-overline-text-decoration);--typography-text-transform:var(--typography-overline-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);color:var(--v-tabs-foreground-initial);padding-block-end:var(--v-tabs-section-title-padding-block-end);padding-block-start:var(--v-tabs-section-title-padding-block-start)}.v-tabs-vertical{--v-tabs-vertical-nested-count:1}.v-tabs-vertical .v-tabs-vertical{margin-block-start:var(--v-tabs-group-gap);--v-tabs-vertical-nested-count:2}.v-tabs-vertical .v-tabs-vertical .v-tabs-vertical{--v-tabs-vertical-nested-count:3}.v-tabs-vertical .v-tabs-vertical .v-tabs-vertical .v-tab a{--tabs-margin-inline-start:calc(var(--v-tabs-vertical-tab-indent)*var(--v-tabs-vertical-nested-count));margin-inline-start:calc(var(--tabs-margin-inline-start) + 2px)}}