@layer payload-default {
  .shimmer-effect {
    --shine-bg: var(--theme-elevation-50);
    --shine-fg: var(--theme-elevation-150);

    position: relative;
    overflow: hidden;
    background-color: var(--shine-bg);

    &__shine {
      position: absolute;
      scale: 1.5;
      width: 100%;
      height: 100%;
      transform: translateX(-100%);
      animation: shimmer 1.75s infinite;
      opacity: 0.75;
      background: linear-gradient(
        100deg,
        var(--shine-bg) 0%,
        var(--shine-bg) 15%,
        var(--shine-fg) 50%,
        var(--shine-bg) 85%,
        var(--shine-bg) 100%
      );
    }

    &--transparent {
      --shine-bg: transparent;
      --shine-fg: var(--theme-elevation-100);
    }
  }

  @keyframes shimmer {
    100% {
      transform: translate3d(100%, 0, 0);
    }
  }
}