/*
 * Esqueleto de carga del megamenu de criptomonedas.
 *
 * Primer CSS del mu-plugin: se escribe aqui una vez y lo sirven los tres
 * sitios. Las clases son nuevas, asi que no compiten con el shell de ningun
 * tema y no hay cascada que negociar.
 */

/* Cada fila copia la caja de .fz-coins__item para que la lista no salte al llegar los datos. */
.fz-coins__skeleton {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin: 0.25rem 0;
    padding: 0.5rem 1rem;
    gap: 0.75rem;
}

.fz-coins__skeleton-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.fz-coins__skeleton-lines {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.fz-coins__skeleton-figures {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
}

.fz-coins__skeleton-line {
    height: 0.625rem;
    border-radius: 4px;
}

/* Anchos desiguales: un bloque uniforme no se lee como texto en espera. */
.fz-coins__skeleton-line--name {
    width: 7rem;
}

.fz-coins__skeleton-line--ticker {
    width: 3rem;
}

.fz-coins__skeleton-line--price {
    width: 4.5rem;
}

.fz-coins__skeleton-line--variation {
    width: 3.25rem;
}

/* El brillo recorre un degradado mas claro sobre el tono base de la pieza. */
.fz-coins__skeleton-icon,
.fz-coins__skeleton-line {
    background-color: var(--fz-skeleton-base, #e8edf3);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        var(--fz-skeleton-shine, #f7f9fc),
        rgba(255, 255, 255, 0)
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: fz-coins-shimmer 1.4s ease-in-out infinite;
}

@keyframes fz-coins-shimmer {
    from {
        background-position: -150% 0;
    }

    to {
        background-position: 250% 0;
    }
}

/* Con el sistema pidiendo menos movimiento queda el bloque en reposo, sin brillo. */
@media (prefers-reduced-motion: reduce) {
    .fz-coins__skeleton-icon,
    .fz-coins__skeleton-line {
        background-image: none;
        animation: none;
    }
}

/* El aviso de carga para lectores de pantalla, fuera de la vista. */
.fz-coins__sr {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}