daisyui/components/alert.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.alert{border-width:var(--border);border-color:var(--alert-border-color,var(--color-base-200));@layer daisyui.l1.l2.l3{--alert-border-color:var(--color-base-200);border-radius:var(--radius-box);color:var(--color-base-content);background-color:var(--alert-color,var(--color-base-200));text-align:start;background-size:auto, calc(var(--noise) * 33%);background-image:none, var(--fx-noise);box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color,var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));border-style:solid;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;place-items:center start;gap:1rem;padding-block:.75rem;padding-inline:1rem;font-size:.875rem;line-height:1.25rem;display:grid;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}.alert-info{@layer daisyui.l1.l2{color:var(--color-info-content);--alert-border-color:var(--color-info);--alert-color:var(--color-info)}}.alert-success{@layer daisyui.l1.l2{color:var(--color-success-content);--alert-border-color:var(--color-success);--alert-color:var(--color-success)}}.alert-warning{@layer daisyui.l1.l2{color:var(--color-warning-content);--alert-border-color:var(--color-warning);--alert-color:var(--color-warning)}}.alert-error{@layer daisyui.l1.l2{color:var(--color-error-content);--alert-border-color:var(--color-error);--alert-color:var(--color-error)}}.alert-soft{@layer daisyui.l1{color:var(--alert-color,var(--color-base-content));background:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 8%, var(--color-base-100));--alert-border-color:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 10%, var(--color-base-100));box-shadow:none;background-image:none}}.alert-outline{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none}}.alert-dash{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none;border-style:dashed}}.alert-vertical{@layer daisyui.l1.l2{text-align:center;grid-template-columns:auto;grid-auto-flow:row;justify-content:center;justify-items:center;&:has(:nth-child(2)){grid-template-columns:auto}}}.alert-horizontal{@layer daisyui.l1.l2{text-align:start;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;justify-items:start;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}@media (width>=640px){.sm\:alert{border-width:var(--border);border-color:var(--alert-border-color,var(--color-base-200));@layer daisyui.l1.l2.l3{--alert-border-color:var(--color-base-200);border-radius:var(--radius-box);color:var(--color-base-content);background-color:var(--alert-color,var(--color-base-200));text-align:start;background-size:auto, calc(var(--noise) * 33%);background-image:none, var(--fx-noise);box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color,var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));border-style:solid;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;place-items:center start;gap:1rem;padding-block:.75rem;padding-inline:1rem;font-size:.875rem;line-height:1.25rem;display:grid;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}.sm\:alert-info{@layer daisyui.l1.l2{color:var(--color-info-content);--alert-border-color:var(--color-info);--alert-color:var(--color-info)}}.sm\:alert-success{@layer daisyui.l1.l2{color:var(--color-success-content);--alert-border-color:var(--color-success);--alert-color:var(--color-success)}}.sm\:alert-warning{@layer daisyui.l1.l2{color:var(--color-warning-content);--alert-border-color:var(--color-warning);--alert-color:var(--color-warning)}}.sm\:alert-error{@layer daisyui.l1.l2{color:var(--color-error-content);--alert-border-color:var(--color-error);--alert-color:var(--color-error)}}.sm\:alert-soft{@layer daisyui.l1{color:var(--alert-color,var(--color-base-content));background:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 8%, var(--color-base-100));--alert-border-color:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 10%, var(--color-base-100));box-shadow:none;background-image:none}}.sm\:alert-outline{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none}}.sm\:alert-dash{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none;border-style:dashed}}.sm\:alert-vertical{@layer daisyui.l1.l2{text-align:center;grid-template-columns:auto;grid-auto-flow:row;justify-content:center;justify-items:center;&:has(:nth-child(2)){grid-template-columns:auto}}}.sm\:alert-horizontal{@layer daisyui.l1.l2{text-align:start;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;justify-items:start;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}}@media (width>=768px){.md\:alert{border-width:var(--border);border-color:var(--alert-border-color,var(--color-base-200));@layer daisyui.l1.l2.l3{--alert-border-color:var(--color-base-200);border-radius:var(--radius-box);color:var(--color-base-content);background-color:var(--alert-color,var(--color-base-200));text-align:start;background-size:auto, calc(var(--noise) * 33%);background-image:none, var(--fx-noise);box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color,var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));border-style:solid;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;place-items:center start;gap:1rem;padding-block:.75rem;padding-inline:1rem;font-size:.875rem;line-height:1.25rem;display:grid;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}.md\:alert-info{@layer daisyui.l1.l2{color:var(--color-info-content);--alert-border-color:var(--color-info);--alert-color:var(--color-info)}}.md\:alert-success{@layer daisyui.l1.l2{color:var(--color-success-content);--alert-border-color:var(--color-success);--alert-color:var(--color-success)}}.md\:alert-warning{@layer daisyui.l1.l2{color:var(--color-warning-content);--alert-border-color:var(--color-warning);--alert-color:var(--color-warning)}}.md\:alert-error{@layer daisyui.l1.l2{color:var(--color-error-content);--alert-border-color:var(--color-error);--alert-color:var(--color-error)}}.md\:alert-soft{@layer daisyui.l1{color:var(--alert-color,var(--color-base-content));background:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 8%, var(--color-base-100));--alert-border-color:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 10%, var(--color-base-100));box-shadow:none;background-image:none}}.md\:alert-outline{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none}}.md\:alert-dash{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none;border-style:dashed}}.md\:alert-vertical{@layer daisyui.l1.l2{text-align:center;grid-template-columns:auto;grid-auto-flow:row;justify-content:center;justify-items:center;&:has(:nth-child(2)){grid-template-columns:auto}}}.md\:alert-horizontal{@layer daisyui.l1.l2{text-align:start;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;justify-items:start;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}}@media (width>=1024px){.lg\:alert{border-width:var(--border);border-color:var(--alert-border-color,var(--color-base-200));@layer daisyui.l1.l2.l3{--alert-border-color:var(--color-base-200);border-radius:var(--radius-box);color:var(--color-base-content);background-color:var(--alert-color,var(--color-base-200));text-align:start;background-size:auto, calc(var(--noise) * 33%);background-image:none, var(--fx-noise);box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color,var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));border-style:solid;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;place-items:center start;gap:1rem;padding-block:.75rem;padding-inline:1rem;font-size:.875rem;line-height:1.25rem;display:grid;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}.lg\:alert-info{@layer daisyui.l1.l2{color:var(--color-info-content);--alert-border-color:var(--color-info);--alert-color:var(--color-info)}}.lg\:alert-success{@layer daisyui.l1.l2{color:var(--color-success-content);--alert-border-color:var(--color-success);--alert-color:var(--color-success)}}.lg\:alert-warning{@layer daisyui.l1.l2{color:var(--color-warning-content);--alert-border-color:var(--color-warning);--alert-color:var(--color-warning)}}.lg\:alert-error{@layer daisyui.l1.l2{color:var(--color-error-content);--alert-border-color:var(--color-error);--alert-color:var(--color-error)}}.lg\:alert-soft{@layer daisyui.l1{color:var(--alert-color,var(--color-base-content));background:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 8%, var(--color-base-100));--alert-border-color:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 10%, var(--color-base-100));box-shadow:none;background-image:none}}.lg\:alert-outline{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none}}.lg\:alert-dash{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none;border-style:dashed}}.lg\:alert-vertical{@layer daisyui.l1.l2{text-align:center;grid-template-columns:auto;grid-auto-flow:row;justify-content:center;justify-items:center;&:has(:nth-child(2)){grid-template-columns:auto}}}.lg\:alert-horizontal{@layer daisyui.l1.l2{text-align:start;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;justify-items:start;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}}@media (width>=1280px){.xl\:alert{border-width:var(--border);border-color:var(--alert-border-color,var(--color-base-200));@layer daisyui.l1.l2.l3{--alert-border-color:var(--color-base-200);border-radius:var(--radius-box);color:var(--color-base-content);background-color:var(--alert-color,var(--color-base-200));text-align:start;background-size:auto, calc(var(--noise) * 33%);background-image:none, var(--fx-noise);box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color,var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));border-style:solid;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;place-items:center start;gap:1rem;padding-block:.75rem;padding-inline:1rem;font-size:.875rem;line-height:1.25rem;display:grid;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}.xl\:alert-info{@layer daisyui.l1.l2{color:var(--color-info-content);--alert-border-color:var(--color-info);--alert-color:var(--color-info)}}.xl\:alert-success{@layer daisyui.l1.l2{color:var(--color-success-content);--alert-border-color:var(--color-success);--alert-color:var(--color-success)}}.xl\:alert-warning{@layer daisyui.l1.l2{color:var(--color-warning-content);--alert-border-color:var(--color-warning);--alert-color:var(--color-warning)}}.xl\:alert-error{@layer daisyui.l1.l2{color:var(--color-error-content);--alert-border-color:var(--color-error);--alert-color:var(--color-error)}}.xl\:alert-soft{@layer daisyui.l1{color:var(--alert-color,var(--color-base-content));background:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 8%, var(--color-base-100));--alert-border-color:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 10%, var(--color-base-100));box-shadow:none;background-image:none}}.xl\:alert-outline{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none}}.xl\:alert-dash{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none;border-style:dashed}}.xl\:alert-vertical{@layer daisyui.l1.l2{text-align:center;grid-template-columns:auto;grid-auto-flow:row;justify-content:center;justify-items:center;&:has(:nth-child(2)){grid-template-columns:auto}}}.xl\:alert-horizontal{@layer daisyui.l1.l2{text-align:start;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;justify-items:start;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}}@media (width>=1536px){.\32 xl\:alert{border-width:var(--border);border-color:var(--alert-border-color,var(--color-base-200));@layer daisyui.l1.l2.l3{--alert-border-color:var(--color-base-200);border-radius:var(--radius-box);color:var(--color-base-content);background-color:var(--alert-color,var(--color-base-200));text-align:start;background-size:auto, calc(var(--noise) * 33%);background-image:none, var(--fx-noise);box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color,var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));border-style:solid;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;place-items:center start;gap:1rem;padding-block:.75rem;padding-inline:1rem;font-size:.875rem;line-height:1.25rem;display:grid;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}.\32 xl\:alert-info{@layer daisyui.l1.l2{color:var(--color-info-content);--alert-border-color:var(--color-info);--alert-color:var(--color-info)}}.\32 xl\:alert-success{@layer daisyui.l1.l2{color:var(--color-success-content);--alert-border-color:var(--color-success);--alert-color:var(--color-success)}}.\32 xl\:alert-warning{@layer daisyui.l1.l2{color:var(--color-warning-content);--alert-border-color:var(--color-warning);--alert-color:var(--color-warning)}}.\32 xl\:alert-error{@layer daisyui.l1.l2{color:var(--color-error-content);--alert-border-color:var(--color-error);--alert-color:var(--color-error)}}.\32 xl\:alert-soft{@layer daisyui.l1{color:var(--alert-color,var(--color-base-content));background:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 8%, var(--color-base-100));--alert-border-color:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 10%, var(--color-base-100));box-shadow:none;background-image:none}}.\32 xl\:alert-outline{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none}}.\32 xl\:alert-dash{@layer daisyui.l1{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none;border-style:dashed}}.\32 xl\:alert-vertical{@layer daisyui.l1.l2{text-align:center;grid-template-columns:auto;grid-auto-flow:row;justify-content:center;justify-items:center;&:has(:nth-child(2)){grid-template-columns:auto}}}.\32 xl\:alert-horizontal{@layer daisyui.l1.l2{text-align:start;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;justify-items:start;&:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}}}}}