.flash-overlay,
.smoke-overlay {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  opacity: 0;
  pointer-events: none;
}
.drag-overlay {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  opacity: 0;
}

.flash-overlay {
  color-scheme: light; /* In order to get the light-theme background color */
  background-color: Canvas;

  animation: detonate 3s ease-in-out;

  .flash-negative-flash {
    position: fixed;
    top: calc(var(--mouse-event-y) - 25px);
    left: calc(var(--mouse-event-x) - 25px);

    height: 50px;
    width: 50px;
    background-color: black;
    border-radius: 50%;
    border: black 1px solid;
  }
}

@keyframes detonate {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.smoke-overlay {
  color-scheme: dark; /* In order to get the dark-theme background color */
  background: radial-gradient(
    circle at var(--mouse-event-x) var(--mouse-event-y),
    Canvas var(--inner-edge-smoke),
    rgba(0, 0, 0, 0) var(--outer-edge-smoke)
  );

  animation: smokeExpand 2s cubic-bezier(0, 0, 0, 1);

  &.smoke-fade {
    animation: smokeFade 3s ease-in-out;
  }
}

@property --inner-edge-smoke {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --outer-edge-smoke {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes smokeExpand {
  0% {
    opacity: 1;
    --inner-edge-smoke: 0%;
    --outer-edge-smoke: 0%;
  }
  100% {
    opacity: 1;
    --inner-edge-smoke: 100%;
    --outer-edge-smoke: 500%; /* Faster expansion of the front of the smoke */
  }
}

@keyframes smokeFade {
  0% {
    opacity: 1;
    --inner-edge-smoke: 100%;
    --outer-edge-smoke: 100%;
  }
  100% {
    opacity: 0;
    --inner-edge-smoke: 100%;
    --outer-edge-smoke: 100%;
  }
}

@property --mouse-event-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 100px;
}

@property --mouse-event-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 100px;
}