frutjam/dist/components/badge.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.badge{--radius-badge:calc(var(--border-radius)*2);--color-badge:var(--color-base-soft);--color-on-badge:var(--color-on-base);--color-badge-active:var(--color-base-active);--color-badge-soft:var(--color-base-soft);--color-on-badge-soft:var(--color-on-base);--badge-variant-text:var(--color-on-base);background-color:var(--color-badge);color:var(--color-on-badge);padding-inline:var(--badge--padding-inline,.75rem);padding-block:var(--badge--padding-block,.375rem);font-size:var(--badge--font-size,.875rem);line-height:calc(var(--badge--font-size, .875rem)*var(--badge--line-height, 1.5));outline-width:var(--badge--outline-width);outline-style:var(--badge--outline-style);outline-color:var(--badge--outline-color);display:inline-flex;gap:.5rem;border-radius:var(--badge--radius,var(--radius-badge));align-items:center;justify-content:center;vertical-align:middle;text-align:center;text-decoration:none;width:var(--badge--width,-moz-fit-content);width:var(--badge--width,fit-content);height:var(--badge--height)}.badge-dashed{outline-style:dashed}.badge-dashed,.badge-outline{background-color:transparent;color:var(--badge-variant-text);outline-color:var(--color-badge);outline-width:1px}.badge-outline{outline-style:solid}.badge-ghost{background-color:transparent;color:var(--badge-variant-text)}.badge-soft{background-color:var(--color-badge-soft);color:var(--color-on-badge-soft)}.badge-2xl{--badge--padding-inline:1.125rem;--badge--padding-block:0.75rem;--badge--font-size:1.25rem;--badge--line-height:1.2;--badge-square--padding-block:0.75rem;--badge-circle--padding-block:0.75rem}.badge-accent{--color-badge:var(--color-accent);--color-badge-active:var(--color-accent-active);--color-on-badge:var(--color-on-accent);--color-badge-soft:var(--color-accent-soft);--color-on-badge-soft:light-dark(var(--color-accent-800),var(--color-accent-400));--badge-variant-text:light-dark(var(--color-accent-800),var(--color-accent-400))}.badge-error{--color-badge:var(--color-error);--color-badge-active:var(--color-error-active);--color-on-badge:var(--color-on-error);--color-badge-soft:var(--color-error-soft);--color-on-badge-soft:light-dark(var(--color-error-800),var(--color-error-400));--badge-variant-text:light-dark(var(--color-error-800),var(--color-error-400))}.badge-info{--color-badge:var(--color-info);--color-badge-active:var(--color-info-active);--color-on-badge:var(--color-on-info);--color-badge-soft:var(--color-info-soft);--color-on-badge-soft:light-dark(var(--color-info-800),var(--color-info-400));--badge-variant-text:light-dark(var(--color-info-800),var(--color-info-400))}.badge-lg{--badge--padding-inline:0.875rem;--badge--padding-block:0.5rem;--badge--font-size:1rem;--badge--line-height:1.2;--badge-square--padding-block:0.5rem;--badge-circle--padding-block:0.5rem}.badge-md{--badge--padding-inline:0.75rem;--badge--padding-block:0.375rem;--badge--font-size:0.875rem;--badge--line-height:1.3;--badge-square--padding-block:0.375rem;--badge-circle--padding-block:0.375rem}.badge-neutral{--color-badge:var(--color-neutral);--color-badge-active:var(--color-neutral-active);--color-on-badge:var(--color-on-neutral);--color-badge-soft:var(--color-neutral-soft);--color-on-badge-soft:light-dark(var(--color-neutral-800),var(--color-neutral-400));--badge-variant-text:light-dark(var(--color-neutral-800),var(--color-neutral-400))}.badge-primary{--color-badge:var(--color-primary);--color-badge-active:var(--color-primary-active);--color-on-badge:var(--color-on-primary);--color-badge-soft:var(--color-primary-soft);--color-on-badge-soft:light-dark(var(--color-primary-800),var(--color-primary));--badge-variant-text:light-dark(var(--color-primary-800),var(--color-primary-400))}.badge-secondary{--color-badge:var(--color-secondary);--color-badge-active:var(--color-secondary-active);--color-on-badge:var(--color-on-secondary);--color-badge-soft:var(--color-secondary-soft);--color-on-badge-soft:light-dark(var(--color-secondary-800),var(--color-secondary-400));--badge-variant-text:light-dark(var(--color-secondary-800),var(--color-secondary-400))}.badge-sm{--badge--padding-inline:0.625rem;--badge--padding-block:0.25rem;--badge--font-size:0.75rem;--badge--line-height:1.3;--badge-square--padding-block:0.25rem;--badge-circle--padding-block:0.25rem}.badge-success{--color-badge:var(--color-success);--color-badge-active:var(--color-success-active);--color-on-badge:var(--color-on-success);--color-badge-soft:var(--color-success-soft);--color-on-badge-soft:light-dark(var(--color-success-800),var(--color-success-400));--badge-variant-text:light-dark(var(--color-success-800),var(--color-success-400))}.badge-warning{--color-badge:var(--color-warning);--color-badge-active:var(--color-warning-active);--color-on-badge:var(--color-on-warning);--color-badge-soft:var(--color-warning-soft);--color-on-badge-soft:light-dark(var(--color-warning-800),var(--color-warning-400));--badge-variant-text:light-dark(var(--color-warning-800),var(--color-warning-400))}.badge-xl{--badge--padding-inline:1rem;--badge--padding-block:0.625rem;--badge--font-size:1.125rem;--badge--line-height:1.2;--badge-square--padding-block:0.625rem;--badge-circle--padding-block:0.625rem}.badge-xs{--badge--padding-inline:0.5rem;--badge--padding-block:0.125rem;--badge--font-size:0.625rem;--badge--line-height:1.3;--badge-square--padding-block:0.125rem;--badge-circle--padding-block:0.125rem}.badge-square{--badge--padding-inline:var(--badge-square--padding-block,0.375rem);--badge--padding-block:var(--badge-square--padding-block,0.375rem);--badge--width:var(--badge-square--padding-block);--badge--height:var(--badge-square--padding-block)}.badge-circle{--badge--padding-inline:var(--badge-circle--padding-block,0.375rem);--badge--padding-block:var(--badge-circle--padding-block,0.375rem)}.badge-circle,.badge-pill,.badge-rounded{--badge--radius:calc(infinity*1px)}