/* Il micro-copy delle notifiche e il campanello.

   Entra da destra, in basso a destra della pagina, e la pila cresce verso
   l'alto. Non e' un modale: non ha velo, non prende il fuoco, non blocca
   niente. Se la persona sta lavorando puo' ignorarlo — per quello esiste il
   campanello, che le tiene da parte e le rimostra quando lo si preme. */

.bl-toast-stack {
  position: fixed;
  /* In basso a destra, non in alto: l'angolo alto e' della barra — ricerca,
     campanello, ruolo — e un avviso li' copre proprio i comandi. In basso lo
     spazio e' libero, e la pila cresce verso l'alto senza spostare la prima
     carta sotto agli occhi di chi la sta leggendo. */
  bottom: var(--bl-space-4);
  right: var(--bl-space-4);
  z-index: var(--bl-z-toast);
  display: flex;
  flex-direction: column;
  /* La piu' recente in fondo, cioe' piu' vicina all'angolo: si legge dal
     basso, dove cade l'occhio quando qualcosa compare da li'. */
  justify-content: flex-end;
  gap: var(--bl-space-2);
  width: min(22rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 6rem);
  /* La pila non deve intercettare i click nei suoi vuoti: solo le carte. */
  pointer-events: none;
}

.bl-toast {
  position: relative;
  pointer-events: auto;
  padding: var(--bl-space-3);
  /* Bordo uniforme e neutro, senza accento su un lato (aCSS.003): una barra
     colorata a sinistra e' decorazione che finge di essere uno stato. Qui lo
     stato non c'e' — una notifica e' una notifica — e a distinguerla bastano
     la posizione e il titolo. */
  border: var(--bl-line-width) solid var(--bl-color-border-soft);
  border-radius: var(--bl-radius-card);
  background-color: var(--bl-color-surface-raised);
  box-shadow: var(--bl-shadow-panel);
  /* Fuori a destra e trasparente: la classe is-in lo porta a posto. */
  opacity: 0;
  transform: translateX(1.5rem);
  transition:
    opacity var(--bl-motion-base) var(--bl-easing),
    transform var(--bl-motion-base) var(--bl-easing);
}

.bl-toast.is-in {
  opacity: 1;
  transform: translateX(0);
}

.bl-toast.is-out {
  opacity: 0;
  transform: translateX(1.5rem);
}

.bl-toast-head {
  /* Spazio a destra per l'icona, che sta nell'angolo e non in fila: il titolo
     va a capo prima di finirci sotto. */
  padding-right: var(--bl-space-5);
}

.bl-toast-title {
  font-family: var(--bl-font-serif);
  font-size: var(--bl-text-small);
  font-weight: 600;
  line-height: 1.3;
}

.bl-toast-body {
  margin-top: var(--bl-space-1);
  color: var(--bl-color-text-muted);
  font-size: var(--bl-text-tiny);
  line-height: 1.45;
}

/* La chiusura non e' decorazione: e' il gesto che dice "letta". Angolo in alto
   a destra, dove si cerca, e bersaglio pieno — non la sola area del glifo. */
.bl-toast-close {
  position: absolute;
  top: var(--bl-space-2);
  right: var(--bl-space-2);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--bl-radius-button);
  background-color: transparent;
  color: var(--bl-color-text-faint);
  line-height: 1;
  cursor: pointer;
}


.bl-toast-close:hover {
  background-color: var(--bl-color-surface-sunken);
  color: var(--bl-color-text);
}

@media (prefers-reduced-motion: reduce) {
  .bl-toast {
    transition: opacity var(--bl-motion-fast) var(--bl-easing);
    transform: none;
  }

  .bl-toast.is-out {
    transform: none;
  }
}

/* --- il campanello ------------------------------------------------------- */

.bl-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: var(--bl-line-width) solid transparent;
  border-radius: var(--bl-radius-button);
  background-color: transparent;
  color: var(--bl-color-text-muted);
  cursor: pointer;
}

.bl-bell:hover {
  background-color: var(--bl-color-surface-sunken);
  color: var(--bl-color-text);
}

.bl-bell.is-ringing {
  color: var(--bl-color-accent);
}

/* Il numero sta sull'icona, non accanto: la barra in alto e' stretta e una
   pastiglia in fila ruberebbe spazio al campo di ricerca. */
.bl-bell-count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1rem;
  padding: 0 0.2rem;
  /* Non una pastiglia: raggio del prodotto (aCSS.001). Pillole e cerchi sono
     un'altra lingua visiva. */
  border-radius: var(--bl-radius-chip);
  background-color: var(--bl-color-danger);
  color: var(--bl-cream);
  font-size: var(--bl-text-micro);
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}