/*
 * Skeleton global
 * Usa as variáveis já existentes no site.
 */
:root {
  --sg-skeleton-base: var(
    --grey-100,
    var(--background-neutral-tertiary, #f4f4f4)
  );

  --sg-skeleton-highlight: var(
    --background-neutral-primary,
    #ffffff
  );

  --sg-skeleton-duration: 1200ms;
}

/*
 * Abrange:
 * - fotografias criadas com u-bg-thumbnail;
 * - capas dos vídeos;
 * - imagens raster normais.
 *
 * u-bg-neutral-primary exclui os containers dos ícones.
 */
html.sg-skeleton-enabled
:is(
  .u-bg-thumbnail:not(.u-bg-neutral-primary),
  lite-youtube.ee-video
).sg-is-loading,
html.sg-skeleton-enabled img.sg-is-loading {
  background-color: var(--sg-skeleton-base) !important;

  background-image: linear-gradient(
    90deg,
    var(--sg-skeleton-base) 0%,
    var(--sg-skeleton-base) 35%,
    var(--sg-skeleton-highlight) 50%,
    var(--sg-skeleton-base) 65%,
    var(--sg-skeleton-base) 100%
  ) !important;

  background-repeat: no-repeat !important;
  background-size: 220% 100% !important;

  animation:
    sg-skeleton-shimmer
    var(--sg-skeleton-duration)
    ease-in-out
    infinite !important;
}

@keyframes sg-skeleton-shimmer {
  from {
    background-position: 200% 0;
  }

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

/* Respeita a preferência de acessibilidade do utilizador. */
@media (prefers-reduced-motion: reduce) {
  html.sg-skeleton-enabled
  :is(
    .u-bg-thumbnail:not(.u-bg-neutral-primary),
    lite-youtube.ee-video
  ).sg-is-loading,
  html.sg-skeleton-enabled img.sg-is-loading {
    animation: none !important;
    background-image: none !important;
  }
}

/* Não imprimir o skeleton. */
@media print {
  html.sg-skeleton-enabled .sg-is-loading {
    animation: none !important;
    background: transparent !important;
  }
}