@visa/nova-styles/components/badge/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-badge-background:var(--palette-default-transparent);--v-badge-block-size:fit-content;--v-badge-border-radius:var(--size-rounded-small);--v-badge-border-width:0px;--v-badge-border-color:var(--palette-default-border);--v-badge-ellipse-color:var(--palette-messaging-graphics-info);--v-badge-foreground:var(--palette-default-text);--v-badge-gap:var(--size-scalable-2);--v-badge-icon-color:var(--palette-messaging-graphics-info);--v-badge-icon-size:var(--size-scalable-14);--v-badge-icon-only-size:var(--size-scalable-10);--v-badge-padding-block:var(--size-scalable-4);--v-badge-padding-inline:var(--size-scalable-4);--v-badge-hover-background:var(--palette-default-surface-highlight);--v-badge-active-background:var(--palette-messaging-lowlight-negative);--v-badge-disabled-background:var(--palette-default-disabled);--v-badge-ellipse-border-radius:var(--size-rounded-pill);--v-badge-ellipse-size:var(--size-scalable-8);--v-badge-neutral-background:var(--palette-messaging-highlight-info);--v-badge-neutral-icon-color:var(--palette-messaging-text-info);--v-badge-neutral-hover-background:var(--palette-default-surface-highlight);--v-badge-neutral-active-background:var(--palette-default-surface-lowlight);--v-badge-stable-background:var(--palette-messaging-surface-positive);--v-badge-stable-icon-color:var(--palette-messaging-text-positive);--v-badge-stable-hover-background:var(--palette-messaging-highlight-positive);--v-badge-stable-active-background:var(--palette-messaging-lowlight-positive);--v-badge-warning-background:var(--palette-messaging-highlight-warning);--v-badge-warning-icon-color:var(--palette-messaging-text-warning);--v-badge-warning-hover-background:var(--palette-messaging-highlight-warning);--v-badge-warning-active-background:var(--palette-messaging-highlight-warning);--v-badge-error-background:var(--palette-messaging-surface-negative);--v-badge-error-icon-color:var(--palette-messaging-text-negative);--v-badge-error-hover-background:var(--palette-messaging-highlight-negative);--v-badge-error-active-background:var(--palette-messaging-lowlight-negative);--v-badge-subtle-background:var(--palette-default-border);--v-badge-subtle-icon-color:var(--palette-default-text-subtle);--v-badge-subtle-hover-background:var(--palette-default-disabled);--v-badge-subtle-active-background:var(--palette-default-overlay);--v-badge-icon-active-background:var(--palette-messaging-highlight-info);--v-badge-icon-active-icon-color:var(--palette-default-active);--v-badge-icon-active-hover-background:var(--palette-default-surface-highlight);--v-badge-icon-active-active-background:var(--palette-default-surface-lowlight);--v-badge-number-background:var(--palette-messaging-text-negative);--v-badge-number-block-size:var(--v-badge-number-size);--v-badge-number-foreground:var(--palette-default-surface-1);--v-badge-number-max-inline:fit-content;--v-badge-number-padding-inline:var(--size-scalable-4);--v-badge-number-radius:var(--size-rounded-pill);--v-badge-number-size:1.1428571429rem;--v-badge-number-clean-border-width:1px;--v-badge-icon-foreground:var(--palette-default-text-on-active);--v-badge-icon-clear-border-width:1px}}@layer components{.v-badge{--typography-font-family:var(--typography-label-small-font-family);--typography-font-size:var(--typography-label-small-font-size);--typography-font-weight:var(--typography-label-small-font-weight);--typography-letter-spacing:var(--typography-label-small-letter-spacing);--typography-line-height:var(--typography-label-small-line-height);--typography-text-decoration:var(--typography-label-small-text-decoration);--typography-text-transform:var(--typography-label-small-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:center;background-color:var(--v-badge-background);border-color:var(--v-badge-border-color);border-radius:var(--v-badge-border-radius);border-style:solid;border-width:var(--v-badge-border-width);color:var(--v-badge-foreground);display:inline-flex;flex-direction:row;gap:var(--v-badge-gap);min-block-size:var(--v-badge-block-size);padding-block:var(--v-badge-padding-block);padding-inline:var(--v-badge-padding-inline);--v-icon-primary:var(--v-badge-icon-color);--v-icon-secondary:var(--v-badge-icon-color)}@media(forced-colors: active){.v-badge:not(.v-badge-clear){border-width:1px;border-color:rgba(0,0,0,0)}.v-badge .v-badge-ellipse{outline:1px solid currentColor;outline-offset:-1px;border-radius:50%;margin-inline:-1px 1px}}.v-badge:has(.v-icon) .v-icon{--v-icon-height:var(--v-badge-icon-size);--v-icon-width:var(--v-badge-icon-size)}.v-badge-critical{--v-badge-background:var(--v-badge-error-background);--v-badge-ellipse-color:var(--v-badge-error-icon-color);--v-icon-primary:var(--v-badge-error-icon-color);--v-icon-secondary:var(--v-badge-error-icon-color)}.v-badge-neutral{--v-badge-background:var(--v-badge-neutral-background);--v-badge-ellipse-color:var(--v-badge-neutral-icon-color);--v-icon-primary:var(--v-badge-neutral-icon-color);--v-icon-secondary:var(--v-badge-neutral-icon-color)}.v-badge-stable{--v-badge-background:var(--v-badge-stable-background);--v-badge-ellipse-color:var(--v-badge-stable-icon-color);--v-icon-primary:var(--v-badge-stable-icon-color);--v-icon-secondary:var(--v-badge-stable-icon-color)}.v-badge-warning{--v-badge-background:var(--v-badge-warning-background);--v-badge-ellipse-color:var(--v-badge-warning-icon-color);--v-icon-primary:var(--v-badge-warning-icon-color);--v-icon-secondary:var(--v-badge-warning-icon-color)}.v-badge-subtle{--v-badge-background:var(--v-badge-subtle-background);--v-badge-ellipse-color:var(--v-badge-subtle-icon-color);--v-icon-primary:var(--v-badge-subtle-icon-color);--v-icon-secondary:var(--v-badge-subtle-icon-color)}a[href]:is(.v-badge),button:is(.v-badge){cursor:pointer}a[href]:is(.v-badge):hover,button:is(.v-badge):hover{--v-badge-background:var(--v-badge-neutral-hover-background)}a[href]:is(.v-badge):active,button:is(.v-badge):active{--v-badge-background:var(--v-badge-neutral-active-background)}a[href]:is(.v-badge).v-badge-critical:hover,button:is(.v-badge).v-badge-critical:hover{--v-badge-background:var(--v-badge-error-hover-background)}a[href]:is(.v-badge).v-badge-critical:active,button:is(.v-badge).v-badge-critical:active{--v-badge-background:var(--v-badge-error-active-background)}a[href]:is(.v-badge).v-badge-neutral:hover,button:is(.v-badge).v-badge-neutral:hover{--v-badge-background:var(--v-badge-neutral-hover-background)}a[href]:is(.v-badge).v-badge-neutral:active,button:is(.v-badge).v-badge-neutral:active{--v-badge-background:var(--v-badge-neutral-active-background)}a[href]:is(.v-badge).v-badge-stable:hover,button:is(.v-badge).v-badge-stable:hover{--v-badge-background:var(--v-badge-stable-hover-background)}a[href]:is(.v-badge).v-badge-stable:active,button:is(.v-badge).v-badge-stable:active{--v-badge-background:var(--v-badge-stable-active-background)}a[href]:is(.v-badge).v-badge-warning:hover,button:is(.v-badge).v-badge-warning:hover{--v-badge-background:var(--v-badge-warning-hover-background)}a[href]:is(.v-badge).v-badge-warning:active,button:is(.v-badge).v-badge-warning:active{--v-badge-background:var(--v-badge-warning-active-background)}a[href]:is(.v-badge).v-badge-subtle:hover,button:is(.v-badge).v-badge-subtle:hover{--v-badge-background:var(--v-badge-subtle-hover-background)}a[href]:is(.v-badge).v-badge-subtle:active,button:is(.v-badge).v-badge-subtle:active{--v-badge-background:var(--v-badge-subtle-active-background)}a[href]:is(.v-badge):hover{--typography-text-decoration:var(--v-link-text-decoration)}a[href]:is(.v-badge):disabled{--v-badge-background:var(--v-badge-disabled-background)}a:not([href]) .v-badge:not(.v-badge-clear),button:disabled .v-badge:not(.v-badge-clear),.v-link:not([href]) .v-badge:not(.v-badge-clear),.v-button[disabled] .v-badge:not(.v-badge-clear){--v-badge-background:var(--v-badge-disabled-background)}a:not([href]) .v-badge.v-badge-clear,button:disabled .v-badge.v-badge-clear,.v-link:not([href]) .v-badge.v-badge-clear,.v-button[disabled] .v-badge.v-badge-clear{--v-badge-border-color:var(--v-badge-disabled-background);--v-badge-ellipse-color:var(--v-badge-disabled-background);--v-badge-foreground:var(--v-badge-disabled-background);--v-badge-icon-color:var(--v-badge-disabled-background)}.v-alternate.v-nav,.v-alternate .v-nav{--v-badge-number-foreground: var(--palette-default-active-accent)}.v-badge-number,.v-badge-icon{--v-badge-border-radius:var(--v-badge-number-radius);--v-badge-padding-block:none;--v-badge-padding-inline:var(--v-badge-number-padding-inline);--v-badge-block-size:var(--v-badge-number-block-size);box-sizing:content-box;inline-size:fit-content;justify-content:center;max-inline-size:var(--v-badge-number-max-inline);min-inline-size:calc(var(--v-badge-number-size) - var(--v-badge-number-padding-inline)*2);overflow:hidden;text-align:center}.v-badge-number.v-badge-clear,.v-badge-icon.v-badge-clear{--v-badge-block-size:calc(var(--v-badge-number-block-size) - var(--v-badge-icon-clear-border-width)*2);--v-badge-border-width:var(--v-badge-icon-clear-border-width)}.v-badge-number.v-badge-subtle:not(.v-badge-clear),.v-badge-icon.v-badge-subtle:not(.v-badge-clear){--v-badge-background:var(--v-badge-subtle-icon-color);--v-badge-foreground:var(--v-badge-icon-foreground)}.v-badge-number.v-badge-subtle.v-badge-clear,.v-badge-icon.v-badge-subtle.v-badge-clear{--v-badge-foreground:var(--v-badge-subtle-icon-color);--v-badge-border-color:var(--v-badge-subtle-icon-color)}.v-badge-number.v-badge-neutral:not(.v-badge-clear),.v-badge-icon.v-badge-neutral:not(.v-badge-clear){--v-badge-background:var(--v-badge-neutral-icon-color);--v-badge-foreground:var(--v-badge-icon-foreground)}.v-badge-number.v-badge-neutral.v-badge-clear,.v-badge-icon.v-badge-neutral.v-badge-clear{--v-badge-foreground:var(--v-badge-neutral-icon-color);--v-badge-border-color:var(--v-badge-neutral-icon-color)}.v-badge-number.v-badge-stable:not(.v-badge-clear),.v-badge-icon.v-badge-stable:not(.v-badge-clear){--v-badge-background:var(--v-badge-stable-icon-color);--v-badge-foreground:var(--v-badge-icon-foreground)}.v-badge-number.v-badge-stable.v-badge-clear,.v-badge-icon.v-badge-stable.v-badge-clear{--v-badge-foreground:var(--v-badge-stable-icon-color);--v-badge-border-color:var(--v-badge-stable-icon-color)}.v-badge-number.v-badge-warning:not(.v-badge-clear),.v-badge-icon.v-badge-warning:not(.v-badge-clear){--v-badge-background:var(--v-badge-warning-icon-color);--v-badge-foreground:var(--v-badge-icon-foreground)}.v-badge-number.v-badge-warning.v-badge-clear,.v-badge-icon.v-badge-warning.v-badge-clear{--v-badge-foreground:var(--v-badge-warning-icon-color);--v-badge-border-color:var(--v-badge-warning-icon-color)}.v-badge-number.v-badge-critical:not(.v-badge-clear),.v-badge-icon.v-badge-critical:not(.v-badge-clear){--v-badge-background:var(--v-badge-error-icon-color);--v-badge-foreground:var(--v-badge-icon-foreground)}.v-badge-number.v-badge-critical.v-badge-clear,.v-badge-icon.v-badge-critical.v-badge-clear{--v-badge-foreground:var(--v-badge-error-icon-color);--v-badge-border-color:var(--v-badge-error-icon-color)}.v-badge-number.v-badge-active:not(.v-badge-clear),.v-badge-icon.v-badge-active:not(.v-badge-clear){--v-badge-background:var(--v-badge-icon-active-icon-color);--v-badge-foreground:var(--v-badge-icon-foreground)}.v-badge-number.v-badge-active.v-badge-clear,.v-badge-icon.v-badge-active.v-badge-clear{--v-badge-foreground:var(--v-badge-icon-active-icon-color);--v-badge-border-color:var(--v-badge-icon-active-icon-color)}.v-badge-number{--v-badge-background:var(--v-badge-number-background);--v-badge-foreground:var(--v-badge-number-foreground)}.v-badge-number.v-badge-clear{--v-badge-foreground:var(--v-badge-number-background);--v-badge-border-color:var(--v-badge-number-background)}.v-badge-icon{--v-badge-padding-inline:0px;--v-badge-foreground:var(--v-badge-icon-foreground);block-size:var(--v-badge-block-size);inline-size:var(--v-badge-block-size);max-block-size:var(--v-badge-block-size);max-inline-size:var(--v-badge-block-size);--v-icon-primary:var(--v-badge-foreground);--v-icon-secondary:var(--v-badge-foreground)}.v-badge-icon .v-icon{--v-badge-icon-size:var(--v-badge-icon-only-size)}.v-badge-clear{--v-badge-background:var(--palette-default-transparent)}@media(forced-colors: active){.v-badge.v-badge-icon:not(.v-badge-clear){--v-badge-background:CanvasText;--v-badge-foreground:Canvas;outline:1px solid currentColor}.v-badge.v-badge-number:not(.v-badge-clear){--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.v-badge-number:not(.v-badge-clear){--v-badge-background:#000;--v-badge-foreground:#fff;outline:1px solid #fff}}}