:host {
  display: block;
  background: linear-gradient(
    90deg,
    var(--bg-secondary, #f4f4f5) 25%,
    var(--border-color, #e4e4e7) 50%,
    var(--bg-secondary, #f4f4f5) 75%
  );
  background-size: 200% 100%;
  animation: app-skeleton-shimmer 1.4s ease-in-out infinite;
}

:host.app-skeleton--text {
  height: 1em;
  border-radius: var(--radius-sm, 4px);
}

:host.app-skeleton--circle {
  border-radius: 50%;
}

:host.app-skeleton--rect {
  border-radius: var(--radius-md, 6px);
}

@keyframes app-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :host {
    animation: none;
    background: var(--bg-secondary, #f4f4f5);
  }
}
