/* L'avviso (components/_snackbar), dal frame «Snackbar» di Figma: raggio 8, 8 px sopra e sotto,
   16 a sinistra, icona 24 px, titolo 600 14 px nel colore del tipo, riga sotto 500 12 px nel
   grigio Paragraph, a destra il bottone Small «Text» (raggio 4, 600 12 px, solo scritta) e la X. */

.snackbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.snackbar__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

.snackbar__text {
  flex: 1;
  min-width: 0;
}

.snackbar__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.snackbar__desc {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--app-muted);
}

.snackbar__action {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 2rem;
  padding: 0 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

.snackbar__action:hover {
  background: color-mix(in srgb, var(--app-surface) 60%, transparent);
}

.snackbar__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
  background: transparent;
}

.snackbar__close .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.snackbar--info {
  color: var(--app-accent);
  background: var(--app-accent-light);
}

.snackbar--success {
  border-color: var(--app-success);
  color: var(--app-success);
  background: var(--app-success-faint);
}

.snackbar--error {
  color: var(--app-danger);
  background: var(--app-danger-faint);
}

.snackbar--warning {
  border-color: var(--app-warning);
  color: var(--app-warning);
  background: var(--app-warning-faint);
}

/* Il promemoria viola delle schermate iPad (#7C3AED su #EDE9FE). */
.snackbar--reminder {
  color: var(--app-purple);
  background: var(--app-purple-faint);
}