@layer components {
  /* Flash messages, tinted by meaning */
  .alerts {
    display: grid;
    gap: 0.75rem;
    margin-block-end: 1.5rem;
  }

  .alert {
    --alert-color: var(--color-blue);

    align-items: flex-start;
    background-color: color-mix(in oklch, var(--alert-color) 6%, white);
    border: 1px solid color-mix(in oklch, var(--alert-color) 25%, white);
    border-radius: var(--radius);
    color: color-mix(in oklch, var(--alert-color) 70%, black);
    display: flex;
    font-size: var(--text-small);
    gap: 0.75rem;
    line-height: 1.25rem;
    padding: 0.75rem 1rem;

    p {
      font-weight: 500;
    }
  }

  .alert--positive { --alert-color: var(--color-emerald); }
  .alert--warning { --alert-color: var(--color-amber); }
  .alert--negative { --alert-color: var(--color-red); }

  .alert__icon {
    block-size: 1.25rem;
    color: color-mix(in oklch, var(--alert-color) 85%, white);
    flex-shrink: 0;
    inline-size: 1.25rem;
    margin-block-start: 0.125rem;
  }

  .alert__link {
    font-weight: 600;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}