@import "@aws-amplify/ui-react/styles.css";

/* src/global.css */
.handle-wrapper {
  position: absolute;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}
.handle-wrapper.visible {
  opacity: 1;
  pointer-events: all;
}
.handle-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #555;
  background: #2c2e33;
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.handle-wrapper:hover .handle-circle {
  transform: translate(-50%, -50%) scale(2);
}
.handle-circle.connected {
  border-color: #228be6;
  background: #33465f;
}
.handle-grab-area {
  width: 24px;
  height: 24px;
  background: transparent;
  border-radius: 50%;
  cursor: crosshair;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
.shake-animation {
  animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}
/*# sourceMappingURL=index.css.map */