@layer components {
  .alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
  }

  .alert--success {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;

    [data-theme="dark"] & { background-color: #052e16; color: #bbf7d0; border-color: #14532d; }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) & { background-color: #052e16; color: #bbf7d0; border-color: #14532d; }
    }
  }

  .alert--error {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;

    [data-theme="dark"] & { background-color: #450a0a; color: #fecaca; border-color: #7f1d1d; }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) & { background-color: #450a0a; color: #fecaca; border-color: #7f1d1d; }
    }
  }

  .alert--warning {
    background-color: #fefce8;
    color: #854d0e;
    border: 1px solid #fef08a;

    [data-theme="dark"] & { background-color: #422006; color: #fef08a; border-color: #713f12; }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) & { background-color: #422006; color: #fef08a; border-color: #713f12; }
    }
  }

  .alert--info {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;

    [data-theme="dark"] & { background-color: #172554; color: #bfdbfe; border-color: #1e3a8a; }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) & { background-color: #172554; color: #bfdbfe; border-color: #1e3a8a; }
    }
  }
}