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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.CQ2Document-editor .ProseMirror p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.CQ2Document-editor .ProseMirror {
  padding-top: 0.5rem;
  padding-bottom: 0.4rem;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  min-height: 2.5rem;
  max-height: 12rem;
  overflow-y: auto;
}

.CQ2-thread-resolution-editor
  .ProseMirror
  p.is-editor-empty:first-child::before {
  color: #4ca858;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.CQ2-thread-resolution-editor .ProseMirror {
  padding-top: 0.5rem;
  padding-bottom: 0.4rem;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  min-height: 2.5rem;
  max-height: 12rem;
  overflow-y: auto;
}

.new-CQ2Document-editor .ProseMirror p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.new-CQ2Document-editor .ProseMirror {
  min-height: 24rem;
  overflow-y: auto;
  padding-right: 0.5rem;
  color: #37362f;
  scrollbar-gutter: stable;
}

.latest-version-CQ2Document-editor .ProseMirror {
  min-height: 24rem;
  overflow-y: auto;
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  padding-left: 1rem;
  padding-right: 0.5rem;
  color: #37362f;
  scrollbar-gutter: stable;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 0.4rem;
  height: 0.4rem;
}

::-webkit-scrollbar-thumb {
  background: #e2e2e2;
  border-radius: 1rem;
}

#cq2-logo-svg-path {
  transition: 0.2s;
}

.CQ2Document-child-thread {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mover {
  0% {
    transform: translateY(24px);
  }
  100% {
    transform: translateY(-0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}

.new-comment {
  animation:
    fadeIn 0.2s ease-in,
    mover 0.2s ease-in;
}

.new-thread-popup-btn {
  box-shadow:
    rgba(17, 17, 26, 0.1) 0px 4px 16px,
    rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px;
  animation: fadeIn 0.1s ease-in;
}

.cq2-hover-card {
  box-shadow:
    rgba(17, 17, 26, 0.1) 0px 4px 16px,
    rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.comment-info {
  box-shadow:
    rgba(17, 17, 26, 0.1) 0px 4px 16px,
    rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.beacon {
  background-color: #2463eb;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  display: block;
  z-index: 1;
  position: relative;
  left: 0.75rem;
  top: 0;
}

.beacon::before {
  background-color: #2463eb;
  content: "";
  top: calc(50% - 0.35rem);
  left: calc(50% - 0.35rem);
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0.5;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
}

.cq2-tree-ul li {
  margin-left: 2rem;
}

.cq2-tree-ul,
.cq2-tree-ul li {
  position: relative;
}

.cq2-tree-ul {
  list-style: none;
}

.cq2-tree-ul li::before,
.cq2-tree-ul li::after {
  content: "";
  position: absolute;
  left: -12px;
}

.cq2-tree-ul li::before {
  border-top: 1px solid #d2d2d2;
  top: 22px;
  width: 8px;
  height: 0;
}

.cq2-tree-ul li::after {
  border-left: 1px solid #d2d2d2;
  height: 100%;
  width: 0px;
  top: 2px;
}

.cq2-tree-ul > li:last-child::after {
  height: 20px;
}

.cq2-highlight-span-inactive {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  background-color: #fff9e8;
  text-decoration-color: #ffe9ac;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  animation-duration: 100ms;
  mix-blend-mode: multiply;
}

.cq2-highlight-span-inactive-hover {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  background-color: #fff2d2;
  text-decoration-color: #ffcb00;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  animation-duration: 100ms;
  mix-blend-mode: multiply;
}

.cq2-highlight-span-active {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  background-color: rgb(255 79 0 / 0.1);
  text-decoration-color: rgb(255 79 0 / 0.7);
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  animation-duration: 100ms;
  mix-blend-mode: multiply;
}

.cq2-highlight-disabled-span {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  background-color: #fff9e8;
  text-decoration-color: #ffe9ac;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  animation-duration: 100ms;
  mix-blend-mode: multiply;
}

.thread-info-comment-container {
  font-weight: 400;
}

.thread-info-comment-container code {
  font-size: 0.7rem;
  line-height: 0rem;
}

code:empty {
  display: none;
}

code {
  white-space: pre-wrap !important;
}

.cq2-title-h1[placeHolder]:empty:before {
  content: attr(placeHolder);
  color: rgb(209 213 219);
}

/* .tiptap {
  :first-child {
    margin-top: 0;
  }

  ul,
  ol {
    padding: 0 1rem;
    margin: 1.25rem 1rem 1.25rem 0.4rem;

    li p {
      margin-top: 0.25em;
      margin-bottom: 0.25em;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.1;
    margin-top: 2.5rem;
    text-wrap: pretty;
  }

  h1,
  h2 {
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
  }

  h1 {
    font-size: 1.4rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  h4,
  h5,
  h6 {
    font-size: 1rem;
  }

  code {
    background-color: #fff;
    border-radius: 0.4rem;
    color: var(--black);
    font-size: 0.85rem;
    padding: 0.25em 0.3em;
  }

  pre {
    background: #000;
    border-radius: 0.5rem;
    color: #fff;
    font-family: "JetBrainsMono", monospace;
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;

    code {
      background: none;
      color: inherit;
      font-size: 0.8rem;
      padding: 0;
    }
  }

  blockquote {
    border-left: 3px solid #fff;
    margin: 1.5rem 0;
    padding-left: 1rem;
  }

  hr {
    border: none;
    border-top: 1px solid #fff;
    margin: 2rem 0;
  }
} */
