/*
 * Cintillo de precios.
 *
 * El desplazamiento infinito es CSS puro: la pista lleva la lista dos veces y se
 * anima hasta -50%, punto en el que la segunda copia esta donde empezo la
 * primera. No hace falta ninguna libreria ni medir nada en JavaScript.
 *
 * Se anima transform y no left ni margin: transform va en el hilo compositor y
 * no provoca repintado.
 */

.fzw-ticker {
  height: var(--fz-ticker-height);
  overflow: hidden;
  background: var(--fz-footer-bg);
  color: var(--fz-footer-text);
  border-bottom: 1px solid var(--fz-footer-divider);
}

.fzw-ticker__viewport {
  height: 100%;
  overflow: hidden;
}

.fzw-ticker__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: fzw-ticker-scroll var(--fzw-ticker-duration, 60s) linear infinite;
}

/* Pausa al pasar el raton o al entrar con el teclado, para poder leer un precio. */
.fzw-ticker:hover .fzw-ticker__track,
.fzw-ticker:focus-within .fzw-ticker__track {
  animation-play-state: paused;
}

.fzw-ticker__set {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fzw-ticker__item {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.fzw-ticker__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-inline: 0.875rem;
  color: inherit;
  font-size: var(--fz-font-size-xxs);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--fz-transition);
}

.fzw-ticker__link:hover,
.fzw-ticker__link:focus-visible {
  color: var(--fz-text-inverse);
  text-decoration: none;
}

.fzw-ticker__icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
}

.fzw-ticker__symbol {
  font-weight: var(--fz-font-weight-semibold);
}

.fzw-ticker__price {
  font-variant-numeric: tabular-nums;
}

/* Los numeros cambian en caliente, asi que el ancho se fija con tabular-nums
   para que el cintillo no se reacomode en cada refresco. */
.fzw-ticker__variation {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fz-font-weight-medium);
}

.fzw-ticker__variation--up {
  color: var(--fz-positive);
}

.fzw-ticker__variation--down {
  color: var(--fz-negative);
}

@keyframes fzw-ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/*
 * Sin animacion para quien pide menos movimiento. La franja pasa a desplazarse a
 * mano, porque detener la pista sin mas dejaria las ultimas monedas fuera de
 * pantalla y sin ninguna forma de alcanzarlas.
 */
@media (prefers-reduced-motion: reduce) {
  .fzw-ticker__viewport {
    overflow-x: auto;
  }

  .fzw-ticker__track {
    animation: none;
  }

  .fzw-ticker__set[aria-hidden='true'] {
    display: none;
  }
}