@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body,
#__next {
  width: 100%;
  height: 100%;
}

/* MW scroll bounce 제거 */
html,
body {
  position: fixed;
  overflow: hidden;
}
#__next {
  overflow-y: scroll;
  position: relative;
}

* {
  user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*::-webkit-scrollbar {
  display: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: #eeeeee;
    background: black;
  }
}

/* dnd match */

.text-shadow {
  text-shadow: -1px 0 #ececec, 0 1px #ececec, 1px 0 #ececec, 0 -1px #ececec;
}

@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: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* confetti */

@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }

  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}

@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }

  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}

@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }

  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}

.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;
}
.confetti--animation-slow {
  animation: confetti-slow 2.25s linear 1 forwards;
}
.confetti--animation-medium {
  animation: confetti-medium 1.75s linear 1 forwards;
}
.confetti--animation-fast {
  animation: confetti-fast 1.25s linear 1 forwards;
}

/* dnd styling */

.todo .dnd-item {
  @apply border border-transparent;
}

.todo .dnd-item.placeholder {
  @apply border border-blue-500 opacity-50 ring-2 ring-blue-400;
}

.todo .dnd-item:not(.ghost) {
  @apply cursor-grab shadow;
}

/* .dnd-item.ghost {
  @apply pointer-events-none cursor-grabbing border-2 border-blue-400;
} */
