frutjam/dist/components/alert.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 */.alert{--radius-alert:calc(var(--border-radius)*2);--color-alert:var(--color-base-soft);--color-on-alert:var(--color-on-base);--color-alert-active:var(--color-base-active);--color-alert-soft:var(--color-base-soft);--color-on-alert-soft:var(--color-on-base);--alert-variant-text:var(--color-on-base);background-color:var(--color-alert);color:var(--color-on-alert);padding-inline:var(--alert--padding-inline,.75rem);padding-block:var(--alert--padding-block,.375rem);font-size:var(--alert--font-size,.875rem);line-height:calc(var(--alert--font-size, .875rem)*var(--alert--line-height, 1.5));outline-width:var(--alert--outline-width);outline-style:var(--alert--outline-style);outline-color:var(--alert--outline-color);display:grid;gap:1rem;border-radius:var(--alert--radius,var(--radius-alert));justify-content:start;justify-items:start;align-items:center;grid-auto-flow:column;grid-template-columns:auto;vertical-align:middle;text-align:start;width:var(--alert--width,-moz-fit-content);width:var(--alert--width,fit-content);height:var(--alert--height);&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}:where(&) :where(p,li){color:inherit}}.alert-horizontal{justify-content:start;justify-items:start;grid-auto-flow:column;grid-template-columns:auto;text-align:start;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}.alert-vertical{justify-content:center;justify-items:center;grid-auto-flow:row;grid-template-columns:auto;text-align:center;&:has(:nth-child(2)){grid-template-columns:auto}}.alert-dashed{outline-style:dashed}.alert-dashed,.alert-outline{background-color:transparent;color:var(--alert-variant-text);outline-color:var(--color-alert);outline-width:1px}.alert-outline{outline-style:solid}.alert-ghost{background-color:transparent;color:var(--alert-variant-text)}.alert-soft{background-color:var(--color-alert-soft);color:var(--color-on-alert-soft)}.alert-accent{--color-alert:var(--color-accent);--color-alert-active:var(--color-accent-active);--color-on-alert:var(--color-on-accent);--color-alert-soft:var(--color-accent-soft);--color-on-alert-soft:light-dark(var(--color-accent-800),var(--color-accent-400));--alert-variant-text:light-dark(var(--color-accent-800),var(--color-accent-400))}.alert-error{--color-alert:var(--color-error);--color-alert-active:var(--color-error-active);--color-on-alert:var(--color-on-error);--color-alert-soft:var(--color-error-soft);--color-on-alert-soft:light-dark(var(--color-error-800),var(--color-error-400));--alert-variant-text:light-dark(var(--color-error-800),var(--color-error-400))}.alert-info{--color-alert:var(--color-info);--color-alert-active:var(--color-info-active);--color-on-alert:var(--color-on-info);--color-alert-soft:var(--color-info-soft);--color-on-alert-soft:light-dark(var(--color-info-800),var(--color-info-400));--alert-variant-text:light-dark(var(--color-info-800),var(--color-info-400))}.alert-neutral{--color-alert:var(--color-neutral);--color-alert-active:var(--color-neutral-active);--color-on-alert:var(--color-on-neutral);--color-alert-soft:var(--color-neutral-soft);--color-on-alert-soft:light-dark(var(--color-neutral-800),var(--color-neutral-400));--alert-variant-text:light-dark(var(--color-neutral-800),var(--color-neutral-400))}.alert-primary{--color-alert:var(--color-primary);--color-alert-active:var(--color-primary-active);--color-on-alert:var(--color-on-primary);--color-alert-soft:var(--color-primary-soft);--color-on-alert-soft:light-dark(var(--color-primary-800),var(--color-primary));--alert-variant-text:light-dark(var(--color-primary-800),var(--color-primary-400))}.alert-secondary{--color-alert:var(--color-secondary);--color-alert-active:var(--color-secondary-active);--color-on-alert:var(--color-on-secondary);--color-alert-soft:var(--color-secondary-soft);--color-on-alert-soft:light-dark(var(--color-secondary-800),var(--color-secondary-400));--alert-variant-text:light-dark(var(--color-secondary-800),var(--color-secondary-400))}.alert-success{--color-alert:var(--color-success);--color-alert-active:var(--color-success-active);--color-on-alert:var(--color-on-success);--color-alert-soft:var(--color-success-soft);--color-on-alert-soft:light-dark(var(--color-success-800),var(--color-success-400));--alert-variant-text:light-dark(var(--color-success-800),var(--color-success-400))}.alert-warning{--color-alert:var(--color-warning);--color-alert-active:var(--color-warning-active);--color-on-alert:var(--color-on-warning);--color-alert-soft:var(--color-warning-soft);--color-on-alert-soft:light-dark(var(--color-warning-800),var(--color-warning-400));--alert-variant-text:light-dark(var(--color-warning-800),var(--color-warning-400))}.alert-lg{--alert--padding-inline:1rem;--alert--padding-block:0.5rem;--alert--font-size:1rem}.alert-md{--alert--padding-inline:0.75rem;--alert--padding-block:0.375rem;--alert--font-size:0.875rem}.alert-sm{--alert--padding-inline:0.625rem;--alert--padding-block:0.3125rem;--alert--font-size:0.8125rem}.alert-xs{--alert--padding-inline:0.5rem;--alert--padding-block:0.25rem;--alert--font-size:0.75rem}.alert-pill{--alert--radius:9999px}.alert-rounded{--alert--radius:calc(infinity*1px)}