/* Nastro ANSA sotto il menu.
   Il giro continuo e' fatto con due liste identiche affiancate, ognuna delle
   quali scorre di tutta la propria larghezza: quando la prima e' uscita, la
   seconda si trova esattamente dove era partita la prima, e il giro ricomincia
   senza scatti. La durata la scrive lo script, cosi' la velocita' resta la
   stessa che i titoli siano pochi o molti. */

.sgrnet-ansa {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-top: 0.9rem;
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--bordo);
  border-radius: 4px;
  overflow: hidden;
}

.sgrnet-ansa[hidden] { display: none; }

/* La sigla dell'agenzia: e' anche la citazione della fonte, quindi e' un link
   e non un'etichetta muta. */
.sgrnet-ansa__fonte {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: 0 0.75rem;
  background: var(--wp--preset--color--primario);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.sgrnet-ansa__fonte a {
  color: #fff;
  text-decoration: none;
}

.sgrnet-ansa__fonte a:hover,
.sgrnet-ansa__fonte a:focus-visible { text-decoration: underline; }

/* La finestra: quel che esce di qui non si vede. La sfumatura ai due bordi
   evita che i titoli vengano tranciati di netto mentre entrano ed escono. */
.sgrnet-ansa__pista {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.6rem, #000 calc(100% - 1.6rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 1.6rem, #000 calc(100% - 1.6rem), transparent 100%);
}

.sgrnet-ansa__nastro {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: sgrnet-ansa-scorri var(--sgrnet-ansa-durata, 60s) linear infinite;
}

@keyframes sgrnet-ansa-scorri {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Si ferma da solo mentre lo si legge o lo si attraversa da tastiera. */
.sgrnet-ansa:hover .sgrnet-ansa__nastro,
.sgrnet-ansa:focus-within .sgrnet-ansa__nastro,
.sgrnet-ansa[data-pausa] .sgrnet-ansa__nastro { animation-play-state: paused; }

.sgrnet-ansa__voce {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.sgrnet-ansa__voce::after {
  content: "•";
  padding: 0 0.7rem;
  color: var(--wp--preset--color--testo-tenue);
}

.sgrnet-ansa__titolo {
  padding: 0.5rem 0;
  color: var(--wp--preset--color--testo);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.sgrnet-ansa__titolo:hover,
.sgrnet-ansa__titolo:focus-visible {
  color: var(--wp--preset--color--primario);
  text-decoration: underline;
}

/* Il tasto per fermarlo. Nasce nascosto e lo mostra lo script: senza
   JavaScript non farebbe nulla, e un tasto che non fa nulla e' peggio che
   non averlo. */
.sgrnet-ansa__tasto {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--wp--preset--color--bordo);
  color: var(--wp--preset--color--testo-secondario);
  cursor: pointer;
}

.sgrnet-ansa__tasto::before {
  content: "";
  width: 7px;
  height: 9px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

/* In pausa il tasto diventa "riparti", quindi mostra un triangolo. */
.sgrnet-ansa__tasto[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right: 0;
  border-left: 8px solid currentColor;
}

.sgrnet-ansa__tasto:hover { color: var(--wp--preset--color--primario); }

.sgrnet-ansa__tasto-testo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 599px) {
  .sgrnet-ansa { margin-top: 0.7rem; }
  .sgrnet-ansa__fonte { padding: 0 0.6rem; font-size: 0.7rem; }
  .sgrnet-ansa__titolo { font-size: 0.8125rem; }
}

/* Chi ha chiesto meno animazioni non vede nulla muoversi: una sola lista,
   che si scorre a mano. */
@media (prefers-reduced-motion: reduce) {
  .sgrnet-ansa__nastro { animation: none; }
  .sgrnet-ansa__pista { overflow-x: auto; }
  [data-sgrnet-ansa-copia] { display: none; }
}