@import "Beam";
@import "mixins";


:root {
  --oulineColorLow: rgba(137, 194, 109, 0.1);
  --oulineColorHigh: rgba(137, 194, 109, 1);
  --outlineWidth: 3px;
}

.#{$prefix} {
  font-family: sans-serif;
  font-size: 16px;
}

.#{$prefix}-point {
  @include topLevel();

  outline: var(--outlineWidth) solid rgba(37, 194, 109, 0.5) !important;
  -webkit-backdrop-filter: brightness(1.1) contrast(1.1) !important;
}

.#{$prefix}-shoot {
  @include topLevel();

  outline: var(--outlineWidth) solid rgba(37, 194, 109, 1) !important;
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-2rem);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

##{$prefix}-status {
  position: absolute;
}

##{$prefix}-backdrop {
  @include topLevel();

  display: block;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
 // background-color: lightgray;
 // opacity: 0.5;
}

##{$prefix}-overlay {
  @include topLevel();

  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}
