@visa/nova-styles/patterns/wizard/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 patterns{:root,.v-alternate{--v-wizard-flex-direction:row;--v-wizard-step-background-color:var(--v-action-secondary-background);--v-wizard-step-border-width:0;--v-wizard-step-border-color:var(--palette-default-transparent);--v-wizard-step-color:var(--palette-default-text-subtle);--v-wizard-step-font-weight:var(--typography-body-2-font-weight);--v-wizard-step-gap:var(--size-scalable-8);--v-wizard-step-padding-block:var(--size-scalable-14);--v-wizard-step-padding-inline:var(--size-scalable-12);--v-wizard-step-max-inline-size:226px;--v-wizard-step-max-inline-size-md:603px;--v-wizard-step-icon-color:var(--palette-default-active-subtle);--v-wizard-vertical-flex-direction:column;--v-wizard-vertical-max-inline-size:235px;--v-wizard-compact-gap:var(--size-scalable-40);--v-wizard-compact-step-block-size:var(--size-scalable-20);--v-wizard-compact-step-rail-color:var(--palette-default-active-subtle)}}@layer patterns{.v-wizard{inline-size:100%}.v-wizard:not(:has(.v-accordion)){display:flex;flex-direction:var(--v-wizard-flex-direction);flex-wrap:wrap}.v-wizard:not(:has(.v-accordion)).v-wizard-compact{flex-wrap:nowrap}.v-wizard-vertical{--v-wizard-flex-direction:var(--v-wizard-vertical-flex-direction);max-inline-size:var(--v-wizard-vertical-max-inline-size)}.v-wizard .v-accordion-toggle-icon-closed{--v-accordion-icon-color:var(--v-wizard-step-icon-color)}.v-wizard-step{--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);display:flex}.v-wizard-step:not(:has(.v-button)):not(.v-wizard-compact .v-wizard-step),.v-wizard-step>.v-button:not(.v-accordion-heading){gap:var(--v-wizard-step-gap);padding-block:var(--v-wizard-step-padding-block);padding-inline:var(--v-wizard-step-padding-inline)}.v-wizard-step:not(:has(.v-button)):not(.v-wizard-compact .v-wizard-step):not(.v-wizard-vertical *),.v-wizard-step>.v-button:not(.v-accordion-heading):not(.v-wizard-vertical *){align-items:flex-start}.v-wizard-step:not(.v-wizard-step>.v-button):not(.v-wizard-step.v-accordion):not(:has(.v-badge-stable)):not(:has(.v-badge-critical)){color:var(--v-wizard-step-color)}.v-wizard-step .v-accordion-heading:not([open]):not([aria-expanded=true]):not(.v-wizard-step .v-accordion-heading:not([open]):not([aria-expanded=true])[disabled]):not(.v-wizard-step .v-accordion-heading:not([open]):not([aria-expanded=true])[aria-disabled=true]){--v-accordion-foreground-initial:var(--palette-default-text-subtle)}.v-wizard-step .v-accordion-heading:not([open]):not([aria-expanded=true]) .v-typography-color-subtle .v-badge-subtle:not(.v-badge-active){--v-badge-border-color: var(--palette-default-text-subtle);--v-badge-foreground: var(--palette-default-text-subtle)}.v-wizard-step .v-accordion-heading:not([open]):not([aria-expanded=true]):hover:not(:has(.v-badge-critical)):not(:has(.v-badge-stable)) .v-badge:not(.v-badge-critical):not(.v-badge-stable):not(.v-badge-active),.v-wizard-step .v-accordion-heading:not([open]):not([aria-expanded=true]):focus-visible:not(:has(.v-badge-critical)):not(:has(.v-badge-stable)) .v-badge:not(.v-badge-critical):not(.v-badge-stable):not(.v-badge-active){--v-badge-foreground:var(--palette-default-active-hover);--v-badge-border-color:var(--palette-default-active-hover)}.v-wizard-step .v-accordion-heading:not([open]):not([aria-expanded=true]):hover:not(:has(.v-badge-critical)):not(:has(.v-badge-stable)) .v-accordion-toggle-icon,.v-wizard-step .v-accordion-heading:not([open]):not([aria-expanded=true]):focus-visible:not(:has(.v-badge-critical)):not(:has(.v-badge-stable)) .v-accordion-toggle-icon{--v-accordion-icon-color:var(--palette-default-active-hover)}.v-wizard-step .v-accordion-heading:not([open]):not([aria-expanded=true]):active:not(:has(.v-badge-critical)):not(:has(.v-badge-stable)) .v-badge:not(.v-badge-critical):not(.v-badge-stable):not(.v-badge-active){--v-badge-foreground:var(--palette-default-active-pressed);--v-badge-border-color:var(--palette-default-active-pressed)}.v-wizard-step .v-accordion-heading:not([open]):not([aria-expanded=true]):active:not(:has(.v-badge-critical)):not(:has(.v-badge-stable)) .v-accordion-toggle-icon{--v-accordion-icon-color:var(--palette-default-active-pressed)}.v-wizard-step.v-accordion[open]>.v-accordion-heading:not(.v-wizard-step.v-accordion[open]>.v-accordion-heading[disabled],.v-wizard-step.v-accordion>.v-accordion-heading[aria-expanded=true][disabled]):not(.v-wizard-step.v-accordion[open]>.v-accordion-heading[aria-disabled=true],.v-wizard-step.v-accordion>.v-accordion-heading[aria-expanded=true][aria-disabled=true]),.v-wizard-step.v-accordion>.v-accordion-heading[aria-expanded=true]:not(.v-wizard-step.v-accordion[open]>.v-accordion-heading[disabled],.v-wizard-step.v-accordion>.v-accordion-heading[aria-expanded=true][disabled]):not(.v-wizard-step.v-accordion[open]>.v-accordion-heading[aria-disabled=true],.v-wizard-step.v-accordion>.v-accordion-heading[aria-expanded=true][aria-disabled=true]){--v-accordion-foreground-initial:var(--palette-default-active)}.v-wizard-step.v-accordion[open]>.v-accordion-heading:has(.v-badge-critical),.v-wizard-step.v-accordion>.v-accordion-heading[aria-expanded=true]:has(.v-badge-critical){color:var(--palette-default-text)}.v-wizard-step.v-accordion[open]>.v-accordion-heading:has(.v-badge-critical) .v-badge,.v-wizard-step.v-accordion>.v-accordion-heading[aria-expanded=true]:has(.v-badge-critical) .v-badge{--v-badge-background:var(--v-badge-error-icon-color);--v-badge-foreground:var(--v-badge-icon-foreground)}.v-wizard-step.v-accordion[open]>.v-accordion-heading:has(.v-badge-critical) .v-accordion-toggle-icon-open,.v-wizard-step.v-accordion>.v-accordion-heading[aria-expanded=true]:has(.v-badge-critical) .v-accordion-toggle-icon-open{--v-icon-primary:var(--palette-default-active-subtle);--v-icon-secondary:var(--palette-default-active-subtle)}.v-wizard-step.v-accordion[open]>.v-accordion-heading:has(.v-badge-stable),.v-wizard-step.v-accordion>.v-accordion-heading[aria-expanded=true]:has(.v-badge-stable){color:var(--palette-default-text)}.v-wizard-step.v-accordion[open]>.v-accordion-heading:has(.v-badge-stable) .v-badge,.v-wizard-step.v-accordion>.v-accordion-heading[aria-expanded=true]:has(.v-badge-stable) .v-badge{--v-badge-background:var(--v-badge-stable-icon-color);--v-badge-foreground:var(--v-badge-icon-foreground)}.v-wizard-step.v-accordion[open]>.v-accordion-heading:has(.v-badge-stable) .v-accordion-toggle-icon-open,.v-wizard-step.v-accordion>.v-accordion-heading[aria-expanded=true]:has(.v-badge-stable) .v-accordion-toggle-icon-open{--v-icon-primary:var(--palette-default-active-subtle);--v-icon-secondary:var(--palette-default-active-subtle)}.v-wizard-step:not(.v-accordion):not(.v-wizard-compact>.v-wizard-step):not(.v-wizard-vertical .v-wizard-step),.v-wizard-step>.v-button:not(.v-accordion-heading):not(:is(.v-wizard-vertical>.v-wizard-step>.v-button)){justify-content:space-between;max-inline-size:var(--v-wizard-step-max-inline-size);block-size:fit-content;text-align:left}.v-wizard-step:not(.v-accordion):not(.v-wizard-compact>.v-wizard-step):not(.v-wizard-vertical .v-wizard-step) .v-badge,.v-wizard-step>.v-button:not(.v-accordion-heading):not(:is(.v-wizard-vertical>.v-wizard-step>.v-button)) .v-badge{transform-origin:top}.v-wizard-step:not(.v-accordion):not(.v-wizard-compact>.v-wizard-step):not(.v-wizard-vertical .v-wizard-step):not(:has(>.v-button)){flex:1 0 0}.v-wizard-step>.v-icon,.v-wizard-step>.v-button:not(.v-accordion-heading)>.v-icon{--v-icon-primary:var(--v-wizard-step-icon-color);--v-icon-secondary:var(--v-wizard-step-icon-color)}.v-wizard-step:has(>.v-button:not(.v-accordion-heading)){display:contents}.v-wizard-step>.v-button:not(.v-accordion-heading){--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-wizard-step>.v-button{display:flex;flex:1;align-items:flex-start;block-size:unset;inline-size:unset;padding-block:var(--v-wizard-step-padding-block);padding-inline:var(--v-wizard-step-padding-inline)}.v-wizard-step>.v-button:not(:has(.v-accordion-toggle-icon)){color:var(--v-wizard-step-color)}.v-wizard-step>.v-button:hover,.v-wizard-step>.v-button:focus-visible{color:var(--palette-default-active-hover)}.v-wizard-step>.v-button:hover .v-badge:not(.v-badge-critical):not(.v-badge-stable):not(.v-badge-active),.v-wizard-step>.v-button:focus-visible .v-badge:not(.v-badge-critical):not(.v-badge-stable):not(.v-badge-active){--v-badge-foreground:var(--palette-default-active-hover);--v-badge-border-color:var(--palette-default-active-hover)}.v-wizard-step>.v-button:active{color:var(--palette-default-active-pressed)}.v-wizard-step>.v-button:active .v-badge:not(.v-badge-critical):not(.v-badge-stable):not(.v-badge-active){--v-badge-foreground:var(--palette-default-active-pressed);--v-badge-border-color:var(--palette-default-active-pressed)}.v-wizard-step>.v-button[disabled],.v-wizard-step>.v-button[aria-disabled=true]{--v-accordion-border-color:var(--palette-default-border)}.v-wizard-step .v-badge{line-height:0px}.v-wizard-vertical .v-wizard-step,.v-wizard-vertical .v-wizard-step>.v-button:not(.v-accordion-heading){justify-content:flex-start;align-items:center}.v-wizard-compact .v-wizard-step{flex:1;align-items:center;position:relative;max-inline-size:calc(var(--v-wizard-compact-step-block-size) + var(--size-scalable-72))}.v-wizard-compact .v-wizard-step .v-badge{box-sizing:border-box;max-block-size:var(--v-wizard-compact-step-block-size);max-inline-size:var(--v-wizard-compact-step-block-size);min-block-size:var(--v-wizard-compact-step-block-size);min-inline-size:var(--v-wizard-compact-step-block-size)}.v-wizard-compact .v-wizard-step:not(:last-child)::after{background-color:var(--v-wizard-compact-step-rail-color);content:"";display:inline-block;height:2px;flex:1;min-inline-size:var(--size-scalable-12)}.v-wizard-compact .v-wizard-step:last-child{flex:0 0 var(--v-wizard-compact-step-block-size)}@media(max-width: 767px){.v-wizard:not(.v-wizard-compact):not(.v-wizard-vertical):not(:has(.v-accordion)){--v-wizard-flex-direction: column;--v-wizard-step-max-inline-size: var(--v-wizard-step-max-inline-size-md);max-inline-size:var(--v-wizard-step-max-inline-size-md);padding-inline:calc(var(--size-scalable-48) - var(--v-wizard-step-padding-inline))}}@media(forced-colors: active){.v-badge:not(.v-badge-clear):not(:has(.v-icon)){--v-badge-background:#fff;--v-badge-foreground:#000;outline:1px solid #000;forced-color-adjust:none}}@media(forced-colors: active)and (prefers-color-scheme: light){.v-badge:not(.v-badge-clear):not(:has(.v-icon)){--v-badge-background:#000;--v-badge-foreground:#fff;outline:1px solid #fff}}}