@visa/nova-styles/components/wizard/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-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-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 components{.v-wizard:not(:has(.v-accordion)){display:flex;flex-direction:var(--v-wizard-flex-direction);flex-wrap:wrap}.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-compact{gap:var(--v-wizard-compact-gap)}.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)){align-items:center;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>.v-icon{--v-icon-primary:var(--v-wizard-step-icon-color);--v-icon-secondary:var(--v-wizard-step-icon-color)}.v-wizard-step.v-button,.v-wizard-step>.v-button{block-size:unset;inline-size:unset;padding-block:var(--v-wizard-step-padding-block);padding-inline:var(--v-wizard-step-padding-inline)}.v-wizard-vertical .v-wizard-step{justify-content:flex-start}.v-wizard-vertical .v-wizard-step.v-button,.v-wizard-vertical .v-wizard-step>.v-button{flex-grow:1}.v-wizard-compact .v-wizard-step{flex-basis:var(--v-wizard-compact-step-block-size);justify-content:center;overflow:visible;padding-block:unset;padding-inline:unset;position:relative}.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;left:0px;position:absolute;translate:calc(var(--v-wizard-compact-step-block-size) + 1px);width:calc(var(--v-wizard-compact-gap) - 1px)}@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}}}