/* Progressive guidance based on the supplied btn-shine effect. */
.gf-guidance-shine {
  --shine-color:rgba(255,255,255,.85);
  --shine-width:30px;
  --shine-duration:3s;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
}

.gf-guidance-shine::before {
  content:""!important;
  position:absolute!important;
  z-index:2;
  top:-180px!important;
  left:0!important;
  width:var(--shine-width)!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background:var(--shine-color)!important;
  box-shadow:none!important;
  pointer-events:none!important;
  animation:gf-guidance-shine-sweep var(--shine-duration) ease-in-out infinite!important;
}

/* Selectors have a light background, so their sweep needs more contrast. */
.variations td.value.gf-guidance-shine {
  --shine-color:rgba(48,115,157,.22);
  border-radius:12px;
}

@keyframes gf-guidance-shine-sweep {
  0% {transform:scale(0) rotate(45deg);opacity:0}
  80% {transform:scale(0) rotate(45deg);opacity:.5}
  81% {transform:scale(4) rotate(45deg);opacity:1}
  100% {transform:scale(50) rotate(45deg);opacity:0}
}

@media (prefers-reduced-motion:reduce) {
  .gf-guidance-shine::before {display:none!important;animation:none!important}
}