:host {
  display: block;
  width: 100%;
  margin: auto 0;
  --ux-skeleton-height: 35px;
  --ux-skeleton-width: 100%;
  --ux-skeleton-margin-bottom: 10px;
  --ux-skeleton-animation-duration: 2s;
  --ux-skeleton-animation-duration-reduced: 10s;
}

@media (prefers-reduced-motion) {
  .item {
    animation-duration: var(--ux-skeleton-animation-duration-reduced);
  }
}
.item {
  height: var(--ux-skeleton-height);
  --loader-background-color: #EEEEEE;
  --loader-highlight-color: #DEDEDE;
  background: linear-gradient(90deg, var(--loader-background-color) 25%, var(--loader-highlight-color) 50%, var(--loader-background-color) 75%);
  background-size: 200% 100%;
  animation: loading var(--ux-skeleton-animation-duration) infinite ease-in-out;
  width: var(--ux-skeleton-width);
  margin-bottom: var(--ux-skeleton-margin-bottom);
}
.item:last-of-type {
  margin-bottom: unset;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}