:host {
  display: block;
}

  :host * {
    box-sizing: border-box;
  }

.skeleton-box {
  position: relative;
  overflow: hidden;
  min-height: var(--s-font-size-sm);
  background-color: var(--s-surface-raised-hovered);
}

.skeleton-box:after {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 12%,
      var(--s-surface-raised-default) 50%,
      rgba(255, 255, 255, 0) 88%,
      rgba(255, 255, 255, 0) 100%
    );
    content: "";
    transform: translateX(-100%);
    animation: skeleton-box-shimmer 3s infinite;
  }

@keyframes skeleton-box-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-box--static:before {
    display: none;
  }

.skeleton-box--border-radius-pill {
  border-radius: 100rem;
}

.skeleton-box--border-radius-none {
  border-radius: 0;
}