:host {
  display: flex;
}

.telia-skeleton {
  border-radius: calc(0.2rem * var(--voca-rem-multiplier));
  background-color: rgba(0, 0, 0, 0.5);
  align-items: stretch;
  opacity: 0.3;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.telia-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, transparent);
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transform: translateX(-100%);
  width: 100vw;
}
@media (prefers-reduced-motion: no-preference) {
  .telia-skeleton::after {
    animation: loading 2s infinite;
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.7, 0.4);
  }
}
.telia-skeleton--round {
  border-radius: calc(99.9rem * var(--voca-rem-multiplier));
}

@keyframes loading {
  100% {
    transform: translateX(100%);
  }
}