:host {
  /**
   * @prop --background: Background
   * @prop --border-radius: Text color
   */
  --background: rgba(var(--background-rgb, var(--bkkr-text-color-rgb, 0, 0, 0)), 0.04);
  --border-radius: 12px;
  border-radius: var(--border-radius, inherit);
  display: block;
  width: 100%;
  height: inherit;
  margin-top: 4px;
  margin-bottom: 4px;
  background: var(--background);
  font-size: inherit;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

:host(.skeleton-animated) {
  position: relative;
  background: linear-gradient(to right, rgba(var(--background-rgb, var(--bkkr-text-color-rgb, 0, 0, 0)), 0.04) 8%, rgba(var(--background-rgb, var(--bkkr-text-color-rgb, 0, 0, 0)), 0.135) 18%, rgba(var(--background-rgb, var(--bkkr-text-color-rgb, 0, 0, 0)), 0.04) 33%);
  background-size: 800px 104px;
  animation-name: shimmer;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}