@volverjs/style/dist/components/vv-badge.css

@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.

:where(:host,:root,.theme){--vv-badge-border-width:0;--vv-badge-background-color:var(--color-brand);--vv-badge-border-color:var(--color-brand);--vv-badge-color:var(--color-white);--vv-badge-border-style:solid;--vv-badge-border-radius:.5em;--vv-badge-min-height:2em;--vv-badge-min-width:2em;--vv-badge-padding:0 .5em;--vv-badge-display:inline-flex;--vv-badge-justify-content:center;--vv-badge-align-items:center;--vv-badge-gap:.5ch;--vv-badge-white-space:nowrap;--vv-badge-font-family:var(--font-sans);--vv-badge-font-weight:var(--font-normal);--vv-badge-text-shadow:none;--vv-badge-line-height:var(--leading-none);--vv-badge-overflow:hidden;--vv-badge-flex-shrink:0;--vv-badge-vertical-align:middle;--vv-badge-state-empty-font-size:inherit;--vv-badge-state-empty-min-width:0;--vv-badge-state-empty-min-height:0;--vv-badge-state-empty-padding:0;--vv-badge-state-focus-within-outline-offset:var(--spacing-4);--vv-badge-state-focus-within-outline:var(--spacing-px) solid currentcolor;--vv-badge-element-button-cursor:pointer;--vv-badge-element-button-padding:0 .5em;--vv-badge-element-button-margin:0 -.5em;--vv-badge-element-button-min-height:2em;--vv-badge-element-button-transition:var(--transition-colors);--vv-badge-element-button-state-hover-background-color:var(--color-alpha-3);--vv-badge-element-button-state-active-background-color:var(--color-alpha-5);--vv-badge-modifier-action-gap:calc(.5ch + .5em);--vv-badge-modifier-rounded-border-radius:1em;--vv-badge-modifier-white-background-color:color-mix(in srgb, var(--color-white), transparent 20%);--vv-badge-modifier-white-color:var(--color-black);--vv-badge-modifier-black-background-color:color-mix(in srgb, var(--color-black), transparent 20%);--vv-badge-modifier-black-color:var(--color-white);--vv-badge-modifier-danger-background-color:var(--color-danger);--vv-badge-modifier-success-background-color:var(--color-success);--vv-badge-modifier-warning-background-color:var(--color-warning-darken-5);--vv-badge-modifier-info-background-color:var(--color-info-darken-5);--vv-badge-modifier-accent-background-color:var(--color-accent);--vv-badge-modifier-gray-background-color:var(--color-gray-darken-1);--vv-badge-modifier-outline-border-width:var(--border);--vv-badge-modifier-outline-color:var(--color-brand);--vv-badge-modifier-outline-border-color:currentcolor;--vv-badge-modifier-outline-background-color:transparent;--vv-badge-modifier-outline-modifier-danger-color:var(--color-danger);--vv-badge-modifier-outline-modifier-success-color:var(--color-success);--vv-badge-modifier-outline-modifier-warning-color:var(--color-warning-darken-5);--vv-badge-modifier-outline-modifier-info-color:var(--color-info-darken-5);--vv-badge-modifier-outline-modifier-accent-color:var(--color-accent);--vv-badge-modifier-outline-modifier-gray-color:var(--color-gray-darken-1);--vv-badge-modifier-ghost-background-color:transparent;--vv-badge-modifier-ghost-color:var(--color-brand);--vv-badge-modifier-ghost-modifier-danger-color:var(--color-danger);--vv-badge-modifier-ghost-modifier-success-color:var(--color-success);--vv-badge-modifier-ghost-modifier-warning-color:var(--color-warning-darken-5);--vv-badge-modifier-ghost-modifier-info-color:var(--color-info-darken-5);--vv-badge-modifier-ghost-modifier-accent-color:var(--color-accent);--vv-badge-modifier-ghost-modifier-gray-color:var(--color-gray-darken-1)}:where(.vv-badge){--badge-font-size:.7rem;font-size:var(--badge-font-size);border-width:var(--vv-badge-border-width);background-color:var(--vv-badge-background-color);border-color:var(--vv-badge-border-color);color:var(--vv-badge-color);border-style:var(--vv-badge-border-style);border-radius:var(--vv-badge-border-radius);min-height:var(--vv-badge-min-height);min-width:var(--vv-badge-min-width);padding:var(--vv-badge-padding);display:var(--vv-badge-display);justify-content:var(--vv-badge-justify-content);align-items:var(--vv-badge-align-items);gap:var(--vv-badge-gap);white-space:var(--vv-badge-white-space);font-family:var(--vv-badge-font-family);font-weight:var(--vv-badge-font-weight);text-shadow:var(--vv-badge-text-shadow);line-height:var(--vv-badge-line-height);overflow:var(--vv-badge-overflow);flex-shrink:var(--vv-badge-flex-shrink);vertical-align:var(--vv-badge-vertical-align)}:where(.vv-badge__button,.vv-badge>button){cursor:var(--vv-badge-element-button-cursor);padding:var(--vv-badge-element-button-padding);margin:var(--vv-badge-element-button-margin);min-height:var(--vv-badge-element-button-min-height);transition:var(--vv-badge-element-button-transition)}:where(.vv-badge__button--hover,.vv-badge__button.hover,.vv-badge>button.hover,.vv-badge__button:not([disabled]):hover,.vv-badge>button:not([disabled]):hover){background-color:var(--vv-badge-element-button-state-hover-background-color)}:where(.vv-badge__button--active,.vv-badge__button.active,.vv-badge>button.active,.vv-badge__button:not([disabled]):active,.vv-badge>button:not([disabled]):active){background-color:var(--vv-badge-element-button-state-active-background-color)}:where(.vv-badge--empty,.vv-badge.empty,.vv-badge:not([disabled]):empty){font-size:var(--vv-badge-state-empty-font-size);--vv-badge-min-width:var(--vv-badge-state-empty-min-width);--vv-badge-min-height:var(--vv-badge-state-empty-min-height);width:var(--badge-font-size);height:var(--badge-font-size);border-radius:calc(var(--badge-font-size) * .5);--vv-badge-padding:var(--vv-badge-state-empty-padding)}:where(.vv-badge--focus-within,.vv-badge.focus-within,.vv-badge:not([disabled]):focus-within){outline-offset:var(--vv-badge-state-focus-within-outline-offset);outline:var(--vv-badge-state-focus-within-outline)}:where(.vv-badge--action.vv-badge){--vv-badge-gap:var(--vv-badge-modifier-action-gap)}:where(.vv-badge--sm.vv-badge){--badge-font-size:.6rem}:where(.vv-badge--rounded.vv-badge){--vv-badge-border-radius:var(--vv-badge-modifier-rounded-border-radius)}:where(.vv-badge--white.vv-badge){--vv-badge-background-color:var(--vv-badge-modifier-white-background-color);--vv-badge-color:var(--vv-badge-modifier-white-color)}:where(.vv-badge--black.vv-badge){--vv-badge-background-color:var(--vv-badge-modifier-black-background-color);--vv-badge-color:var(--vv-badge-modifier-black-color)}:where(.vv-badge--danger.vv-badge){--vv-badge-background-color:var(--vv-badge-modifier-danger-background-color)}:where(.vv-badge--success.vv-badge){--vv-badge-background-color:var(--vv-badge-modifier-success-background-color)}:where(.vv-badge--warning.vv-badge){--vv-badge-background-color:var(--vv-badge-modifier-warning-background-color)}:where(.vv-badge--info.vv-badge){--vv-badge-background-color:var(--vv-badge-modifier-info-background-color)}:where(.vv-badge--accent.vv-badge){--vv-badge-background-color:var(--vv-badge-modifier-accent-background-color)}:where(.vv-badge--gray.vv-badge){--vv-badge-background-color:var(--vv-badge-modifier-gray-background-color)}:where(.vv-badge--outline.vv-badge){--vv-badge-border-width:var(--vv-badge-modifier-outline-border-width);--vv-badge-color:var(--vv-badge-modifier-outline-color);--vv-badge-border-color:var(--vv-badge-modifier-outline-border-color);--vv-badge-background-color:var(--vv-badge-modifier-outline-background-color)}:where(.vv-badge--outline.vv-badge--danger.vv-badge){--vv-badge-modifier-outline-color:var(--vv-badge-modifier-outline-modifier-danger-color)}:where(.vv-badge--outline.vv-badge--success.vv-badge){--vv-badge-modifier-outline-color:var(--vv-badge-modifier-outline-modifier-success-color)}:where(.vv-badge--outline.vv-badge--warning.vv-badge){--vv-badge-modifier-outline-color:var(--vv-badge-modifier-outline-modifier-warning-color)}:where(.vv-badge--outline.vv-badge--info.vv-badge){--vv-badge-modifier-outline-color:var(--vv-badge-modifier-outline-modifier-info-color)}:where(.vv-badge--outline.vv-badge--accent.vv-badge){--vv-badge-modifier-outline-color:var(--vv-badge-modifier-outline-modifier-accent-color)}:where(.vv-badge--outline.vv-badge--gray.vv-badge){--vv-badge-modifier-outline-color:var(--vv-badge-modifier-outline-modifier-gray-color)}:where(.vv-badge--ghost.vv-badge){--vv-badge-background-color:var(--vv-badge-modifier-ghost-background-color);--vv-badge-color:var(--vv-badge-modifier-ghost-color)}:where(.vv-badge--ghost.vv-badge--danger.vv-badge){--vv-badge-modifier-ghost-color:var(--vv-badge-modifier-ghost-modifier-danger-color)}:where(.vv-badge--ghost.vv-badge--success.vv-badge){--vv-badge-modifier-ghost-color:var(--vv-badge-modifier-ghost-modifier-success-color)}:where(.vv-badge--ghost.vv-badge--warning.vv-badge){--vv-badge-modifier-ghost-color:var(--vv-badge-modifier-ghost-modifier-warning-color)}:where(.vv-badge--ghost.vv-badge--info.vv-badge){--vv-badge-modifier-ghost-color:var(--vv-badge-modifier-ghost-modifier-info-color)}:where(.vv-badge--ghost.vv-badge--accent.vv-badge){--vv-badge-modifier-ghost-color:var(--vv-badge-modifier-ghost-modifier-accent-color)}:where(.vv-badge--ghost.vv-badge--gray.vv-badge){--vv-badge-modifier-ghost-color:var(--vv-badge-modifier-ghost-modifier-gray-color)}