@layer components {
  .alert {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    margin-block: var(--space-md);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);

    @media (min-width: 1024px) {
      font-size: var(--text-small);
    }
  }

  .alert--warning {
    background-color: var(--color-accent-light);
    border: 0.5px solid var(--color-accent-border);
    color: var(--color-accent-text);

    & strong { color: var(--color-accent-text-dark); }
  }

  .alert--info {
    background-color: var(--color-info-light);
    border: 0.5px solid var(--color-info-border);
    color: var(--color-info);
  }

  .alert--success {
    background-color: var(--color-success-light);
    border: 0.5px solid var(--color-success-border);
    color: var(--color-success);
  }

  .flash {
    padding: 0.6rem var(--main-padding);
    text-align: center;
    font-weight: 600;
    font-size: var(--text-small);
    animation: flash-slide-in var(--duration-normal) var(--ease-out);
  }

  .flash--notice {
    background: var(--color-primary);
    color: white;
  }

  .flash--alert {
    background: var(--color-danger);
    color: white;
  }

  @keyframes flash-slide-in {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
  }
}