@layer components {
  .rs-skeleton {
    display: block;
    min-block-size: var(--rs-unit-x5);
    border-radius: var(--rs-radius-small);
    background: var(--rs-color-background-disabled);
    animation: rs-skeleton-pulse 2.4s ease-in-out infinite;
  }

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

  .rs-skeleton[data-shape="circle"] {
    aspect-ratio: 1;
    border-radius: var(--rs-radius-circular);
  }

  .rs-skeleton[data-width="wide"] {
    inline-size: 70%;
  }

  .rs-skeleton[data-width="short"] {
    inline-size: 45%;
  }
}