daisyui/components/badge.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.badge{border-radius:var(--radius-selector);vertical-align:middle;color:var(--badge-fg);border:var(--border) solid var(--badge-color,var(--color-base-200));background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);background-color:var(--badge-bg);--badge-bg:var(--badge-color,var(--color-base-100));--badge-fg:var(--color-base-content);--size:calc(var(--size-selector,.25rem) * 6);width:fit-content;height:var(--size);padding-inline:calc(var(--size) / 2 - var(--border));justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.badge-outline{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-color:currentColor}.badge-dash{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-style:dashed;border-color:currentColor}.badge-soft{color:var(--badge-color,var(--color-base-content));background-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 8%, var(--color-base-100));border-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 10%, var(--color-base-100));background-image:none}.badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.badge-neutral{--badge-color:var(--color-neutral);--badge-fg:var(--color-neutral-content)}.badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.badge-ghost{border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content);background-image:none}.badge-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.badge-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.badge-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.badge-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.badge-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:badge{border-radius:var(--radius-selector);vertical-align:middle;color:var(--badge-fg);border:var(--border) solid var(--badge-color,var(--color-base-200));background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);background-color:var(--badge-bg);--badge-bg:var(--badge-color,var(--color-base-100));--badge-fg:var(--color-base-content);--size:calc(var(--size-selector,.25rem) * 6);width:fit-content;height:var(--size);padding-inline:calc(var(--size) / 2 - var(--border));justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.sm\:badge-outline{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-color:currentColor}.sm\:badge-dash{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-style:dashed;border-color:currentColor}.sm\:badge-soft{color:var(--badge-color,var(--color-base-content));background-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 8%, var(--color-base-100));border-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 10%, var(--color-base-100));background-image:none}.sm\:badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.sm\:badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.sm\:badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.sm\:badge-neutral{--badge-color:var(--color-neutral);--badge-fg:var(--color-neutral-content)}.sm\:badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.sm\:badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.sm\:badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.sm\:badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.sm\:badge-ghost{border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content);background-image:none}.sm\:badge-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.sm\:badge-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.sm\:badge-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.sm\:badge-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.sm\:badge-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:badge{border-radius:var(--radius-selector);vertical-align:middle;color:var(--badge-fg);border:var(--border) solid var(--badge-color,var(--color-base-200));background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);background-color:var(--badge-bg);--badge-bg:var(--badge-color,var(--color-base-100));--badge-fg:var(--color-base-content);--size:calc(var(--size-selector,.25rem) * 6);width:fit-content;height:var(--size);padding-inline:calc(var(--size) / 2 - var(--border));justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.md\:badge-outline{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-color:currentColor}.md\:badge-dash{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-style:dashed;border-color:currentColor}.md\:badge-soft{color:var(--badge-color,var(--color-base-content));background-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 8%, var(--color-base-100));border-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 10%, var(--color-base-100));background-image:none}.md\:badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.md\:badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.md\:badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.md\:badge-neutral{--badge-color:var(--color-neutral);--badge-fg:var(--color-neutral-content)}.md\:badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.md\:badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.md\:badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.md\:badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.md\:badge-ghost{border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content);background-image:none}.md\:badge-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.md\:badge-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.md\:badge-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.md\:badge-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.md\:badge-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:badge{border-radius:var(--radius-selector);vertical-align:middle;color:var(--badge-fg);border:var(--border) solid var(--badge-color,var(--color-base-200));background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);background-color:var(--badge-bg);--badge-bg:var(--badge-color,var(--color-base-100));--badge-fg:var(--color-base-content);--size:calc(var(--size-selector,.25rem) * 6);width:fit-content;height:var(--size);padding-inline:calc(var(--size) / 2 - var(--border));justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.lg\:badge-outline{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-color:currentColor}.lg\:badge-dash{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-style:dashed;border-color:currentColor}.lg\:badge-soft{color:var(--badge-color,var(--color-base-content));background-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 8%, var(--color-base-100));border-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 10%, var(--color-base-100));background-image:none}.lg\:badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.lg\:badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.lg\:badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.lg\:badge-neutral{--badge-color:var(--color-neutral);--badge-fg:var(--color-neutral-content)}.lg\:badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.lg\:badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.lg\:badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.lg\:badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.lg\:badge-ghost{border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content);background-image:none}.lg\:badge-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.lg\:badge-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.lg\:badge-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.lg\:badge-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.lg\:badge-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:badge{border-radius:var(--radius-selector);vertical-align:middle;color:var(--badge-fg);border:var(--border) solid var(--badge-color,var(--color-base-200));background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);background-color:var(--badge-bg);--badge-bg:var(--badge-color,var(--color-base-100));--badge-fg:var(--color-base-content);--size:calc(var(--size-selector,.25rem) * 6);width:fit-content;height:var(--size);padding-inline:calc(var(--size) / 2 - var(--border));justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.xl\:badge-outline{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-color:currentColor}.xl\:badge-dash{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-style:dashed;border-color:currentColor}.xl\:badge-soft{color:var(--badge-color,var(--color-base-content));background-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 8%, var(--color-base-100));border-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 10%, var(--color-base-100));background-image:none}.xl\:badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.xl\:badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.xl\:badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.xl\:badge-neutral{--badge-color:var(--color-neutral);--badge-fg:var(--color-neutral-content)}.xl\:badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.xl\:badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.xl\:badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.xl\:badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.xl\:badge-ghost{border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content);background-image:none}.xl\:badge-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.xl\:badge-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.xl\:badge-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.xl\:badge-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.xl\:badge-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:badge{border-radius:var(--radius-selector);vertical-align:middle;color:var(--badge-fg);border:var(--border) solid var(--badge-color,var(--color-base-200));background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);background-color:var(--badge-bg);--badge-bg:var(--badge-color,var(--color-base-100));--badge-fg:var(--color-base-content);--size:calc(var(--size-selector,.25rem) * 6);width:fit-content;height:var(--size);padding-inline:calc(var(--size) / 2 - var(--border));justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.\32 xl\:badge-outline{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-color:currentColor}.\32 xl\:badge-dash{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-style:dashed;border-color:currentColor}.\32 xl\:badge-soft{color:var(--badge-color,var(--color-base-content));background-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 8%, var(--color-base-100));border-color:color-mix(in oklab, var(--badge-color,var(--color-base-content)) 10%, var(--color-base-100));background-image:none}.\32 xl\:badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.\32 xl\:badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.\32 xl\:badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.\32 xl\:badge-neutral{--badge-color:var(--color-neutral);--badge-fg:var(--color-neutral-content)}.\32 xl\:badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.\32 xl\:badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.\32 xl\:badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.\32 xl\:badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.\32 xl\:badge-ghost{border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content);background-image:none}.\32 xl\:badge-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.\32 xl\:badge-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.\32 xl\:badge-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.\32 xl\:badge-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.\32 xl\:badge-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}}}