/** Django-Messages. Der Typ steht als Text im Element, nicht nur als Farbe. */
@layer components {
  .messages {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .messages__item {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-label);
    border: var(--border-width-thin) solid var(--theme-card-border);
    border-inline-start: var(--border-width-thick) solid var(--border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--theme-card-bg);
    transition:
      opacity var(--motion-duration-message) var(--motion-ease),
      transform var(--motion-duration-message) var(--motion-ease);
  }

  @starting-style {
    .messages__item {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    @starting-style {
      .messages__item {
        transform: translateY(-0.25rem);
      }
    }
  }

  .messages__item--success {
    border-inline-start-color: var(--theme-badge-done-text);
  }

  .messages__item--error {
    border-inline-start-color: var(--theme-error-border);
  }

  .messages__item--warning {
    border-inline-start-color: var(--theme-warning-text);
  }

  .messages__item--info {
    border-inline-start-color: var(--theme-badge-in-progress-text);
  }
}