@import "tailwindcss";
@reference "../../../globals.css";

.ProseMirror {
  @apply px-4 pt-0 pb-0 min-h-96 text-foreground;
  .react-renderer {
    background: transparent !important;
  }
}

.prose {
  color: var(--dw-editor-foreground);
}

 .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--dw-editor-foreground);
  pointer-events: none;
  height: 0;
  opacity: 0.5;
} 

.ProseMirror p.is-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--dw-editor-foreground);
  pointer-events: none;
  height: 0;
  opacity: 0.5;
} 

.tippy-box {
  max-width: 400px !important;
  &[data-animation="slide"][data-state="visible"] {
    opacity: 0;
    animation-name: slide-up;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    opacity: 1;
  }
  &[data-animation="cmd-slide-down"][data-state="visible"] {
    opacity: 0;
    animation-name: cmd-slide-down;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    opacity: 1;
  }

  &[data-animation="cmd-slide-down"][data-state="visible"][data-placement="top-start"] {
    opacity: 0;
    animation-name: cmd-slide-up;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    opacity: 1;
  }
}

.ProseMirror:not(.dragging) .ProseMirror-selectednode {
  outline: none !important;
  @apply bg-primary/10;
  transition: background-color 0.2s;
  box-shadow: none;
  border-radius: 8px;
}

@keyframes slide-down {
  0% {
    transform: translateY(-10%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}



@keyframes slide-up {
  0% {
    transform: translateY(10%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes cmd-slide-up {
  0% {
    transform: translateY(8px);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes cmd-slide-down {
  0% {
    transform: translateY(-8px);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}


.command-view-container::-webkit-scrollbar {
  width: 6px;
}

.command-view-container::-webkit-scrollbar-track {
  overflow: hidden;
}

.command-view-container::-webkit-scrollbar-thumb {
  @apply bg-secondary/75;
  border-radius: 0.3em;
}

.command-view-container::-webkit-scrollbar-thumb:hover {
  @apply bg-secondary;
}

.command-view {
  div[data-slot=command-input-wrapper] {
    display: none;
  }
}
