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

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(60px);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(130px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

@keyframes tab-enter {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tab-leave {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-tab-enter {
  animation: tab-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-tab-leave {
  animation: tab-leave 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

html,
body {
  overscroll-behavior: none;
}

@layer components {
  .tiptap p {
    @apply my-1;
  }

  .tiptap ul[data-type="taskList"] {
    @apply list-none pl-0;
  }

  .tiptap ul[data-type="taskList"] li {
    @apply flex gap-2 items-center my-1;
  }
}