@use '../../theme/styles' as theme;

.wr-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  user-select: none;
  pointer-events: none;

  // Defaults — override on the host element for custom shapes.
  --wr-skeleton-height: 1lh;
  --wr-skeleton-radius: var(--wr-border-radius-base);

  width: 100%;
  height: var(--wr-skeleton-height);
  border-radius: var(--wr-skeleton-radius);

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    animation: none;
  }

  &--animated::after {
    animation: wr-skeleton-shimmer 2s infinite;
  }

  // Tint strength: 12.5% reads as "nothing" on a white card — the
  // placeholder has to be obviously present, so the base sits at 50%
  // with the shimmer band sweeping visibly above it.
  @each $name in theme.$colors {
    &--#{$name} {
      background: rgba(var(--wr-color-#{$name}-rgb), 0.5);

      &::after {
        background-image: linear-gradient(
          90deg,
          rgba(var(--wr-color-#{$name}-rgb), 0) 0,
          rgba(var(--wr-color-#{$name}-rgb), 0.4) 20%,
          rgba(var(--wr-color-#{$name}-rgb), 0.8) 60%,
          rgba(var(--wr-color-#{$name}-rgb), 0)
        );
      }
    }
  }
}

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