@layer lotek {
  .lt-skeleton {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    block-size: var(--lt-skeleton-height, var(--lt-spacing-4));
    border-radius: var(--lt-skeleton-radius, var(--lt-spacing-1));
    background: var(--lt-color-neutral-surface);
    /* The shimmer is a gradient moving across the surface, not an opacity
       that pulses. The contrast against the page surface then stays the
       same all the way. */
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      var(--lt-color-neutral-canvas) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: lt-skeleton-shimmer 1600ms ease-in-out infinite;
  }

  /* The text lines are low, so the default radius is smaller. The variable
     applies here too. */
  .lt-skeleton[data-variant="text"] {
    block-size: var(--lt-font-size-m);
    border-radius: var(--lt-skeleton-radius, var(--lt-spacing-0-5));
  }

  .lt-skeleton[data-variant="circle"] {
    inline-size: var(--lt-skeleton-height, var(--lt-spacing-10));
    block-size: var(--lt-skeleton-height, var(--lt-spacing-10));
    border-radius: 50%;
  }

  @keyframes lt-skeleton-shimmer {
    from {
      background-position: 150% 0;
    }
    to {
      background-position: -50% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .lt-skeleton {
      animation: none;
      background-image: none;
    }
  }

  /* High contrast: the surface and the shimmer are backgrounds, and both are
     forced to the page surface colour. Without a border the placeholder was
     invisible. */
  @media (forced-colors: active) {
    .lt-skeleton {
      border: 1px solid GrayText;
      animation: none;
      background-image: none;
    }
  }
}