:host {
  --wcs-skeleton-width: 100%;
  --wcs-skeleton-height: 100%;
  --wcs-skeleton-min-height: 1rem;
  --wcs-skeleton-background-color: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);
  --wcs-skeleton-animation-duration: var(--wcs-semantic-motion-duration-animation-base);
  display: block;
  position: relative;
  overflow: hidden;
}
:host span {
  display: flex;
  flex: 1 1 auto;
  height: var(--wcs-skeleton-height);
  width: var(--wcs-skeleton-width);
  min-height: var(--wcs-skeleton-min-height);
  background: var(--wcs-skeleton-background-color);
  background-size: 400% 100%;
}

:host([animation=glide]) span {
  animation: glide var(--wcs-skeleton-animation-duration) ease-in-out infinite;
}

:host([animation=pulse]) {
  animation: pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite;
}

@keyframes glide {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
:host {
  --wcs-skeleton-border-radius: 0rem;
}
:host span {
  border-radius: var(--wcs-skeleton-border-radius);
}

:host([rounded]) {
  --wcs-skeleton-border-radius: var(--wcs-semantic-border-radius-base);
}