sparkle-overlay {
  --sparkle-z-index-xl: 500;
  --sparkle-transition-fast: 0.3s;
  --sparkle-color-light-base: 197, 209, 218;
  --sparkle-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.sparkle-overlay {
  -ms-flex-align: center;
  align-items: center;
  display: flex;
  visibility: hidden;
  -ms-flex-pack: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  -ms-touch-action: none;
  touch-action: none;
  opacity: 0;
  z-index: var(--sparkle-z-index-xl);
}
.sparkle-overlay,
.sparkle-overlay.opened {
  -webkit-transition: all var(--sparkle-transition-fast) ease-in-out;
  transition: all var(--sparkle-transition-fast) ease-in-out;
}
.sparkle-overlay.opened {
  visibility: visible;
  opacity: 1;
}
.sparkle-overlay.opened .content {
  -webkit-transition: all var(--sparkle-transition-fast) ease-in-out;
  transition: all var(--sparkle-transition-fast) ease-in-out;
}
.sparkle-overlay.light {
  background-color: rgba(var(--sparkle-color-light-base), 0.6);
}
.sparkle-overlay.dark {
  background-color: rgba(var(--sparkle-color-dark-base), 0.6);
}
.sparkle-overlay.absolute {
  position: absolute;
}
.sparkle-overlay .scrim {
  border-radius: inherit;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: inherit;
  transition: inherit;
  width: 100%;
  will-change: opacity;
}
.sparkle-overlay .content {
  position: relative;
  outline: none;
  -webkit-box-shadow: var(--sparkle-shadow-xl);
  box-shadow: var(--sparkle-shadow-xl);
  -webkit-transition: all var(--sparkle-transition-fast) ease-in-out;
  transition: all var(--sparkle-transition-fast) ease-in-out;
}
