:root {
  --tiptap-object-bg: #eee;
  --tiptap-object-fg: #111;
  --tiptap-active-bg: #ddd;
  --tiptap-active-fg: #111;
}

.tiptap {
  outline: none;
  min-height: 0;
  height: 100%;
}

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

.tiptap pre code {
  display: block;
  max-width: 100%;
  overflow: auto;
  padding: 0.25rem;
  background-color: var(--tiptap-object-bg);
  color: var(--tiptap-object-fg);
}

.tiptap .tiptap-object,
.tiptap p code,
.tiptap [tag] {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 3px;
  padding: 0 0.25rem;
  background-color: var(--tiptap-object-bg);
  color: var(--tiptap-object-fg);
}

.tiptap .tiptap-active {
  background-color: var(--tiptap-active-bg);
  color: var(--tiptap-active-fg);
}

.tiptap .tiptap-uploading {
  animation: tiptapFileUpload 1.5s infinite;
}

.tiptap-suggestions {
  margin-top: 0.5rem;
  max-height: 350px;
}

.tiptap-suggestions__content {
  border-radius: 3px;
  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  overflow-x: hidden;
}

.tiptap-suggestions__create,
.tiptap-suggestions__item {
  white-space: nowrap;
  display: block;
  width: 100%;
  min-width: 0px;
  cursor: pointer;
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding: 0.5rem 1rem;
  text-align: left;
  transition-duration: 100ms;
  transition-property: color, background-color;
  background-color: var(--tiptap-object-bg);
  color: var(--tiptap-object-fg);
}

.tiptap-suggestions__selected,
.tiptap-suggestions__create:hover,
.tiptap-suggestions__item:hover {
  background-color: var(--tiptap-active-bg);
  color: var(--tiptap-active-fg);
}

.tiptap-suggestions__empty {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}

@keyframes tiptapFileUpload {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}