@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
:root {
  /****************** 
  Basics
  ******************/
  overflow-wrap: break-word;
  text-size-adjust: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /****************** 
  Colors variables
  ******************/
  /* Gray alpha (light mode) */
  --tt-gray-light-a-50: rgba(56, 56, 56, 0.04);
  --tt-gray-light-a-100: rgba(15, 22, 36, 0.05);
  --tt-gray-light-a-200: rgba(37, 39, 45, 0.1);
  --tt-gray-light-a-300: rgba(47, 50, 55, 0.2);
  --tt-gray-light-a-400: rgba(40, 44, 51, 0.42);
  --tt-gray-light-a-500: rgba(52, 55, 60, 0.64);
  --tt-gray-light-a-600: rgba(36, 39, 46, 0.78);
  --tt-gray-light-a-700: rgba(35, 37, 42, 0.87);
  --tt-gray-light-a-800: rgba(30, 32, 36, 0.95);
  --tt-gray-light-a-900: rgba(29, 30, 32, 0.98);
  /* Gray (light mode) */
  --tt-gray-light-50: rgba(250, 250, 250, 1);
  --tt-gray-light-100: rgba(244, 244, 245, 1);
  --tt-gray-light-200: rgba(234, 234, 235, 1);
  --tt-gray-light-300: rgba(213, 214, 215, 1);
  --tt-gray-light-400: rgba(166, 167, 171, 1);
  --tt-gray-light-500: rgba(125, 127, 130, 1);
  --tt-gray-light-600: rgba(83, 86, 90, 1);
  --tt-gray-light-700: rgba(64, 65, 69, 1);
  --tt-gray-light-800: rgba(44, 45, 48, 1);
  --tt-gray-light-900: rgba(34, 35, 37, 1);
  /* Gray alpha (dark mode) */
  --tt-gray-dark-a-50: rgba(232, 232, 253, 0.05);
  --tt-gray-dark-a-100: rgba(231, 231, 243, 0.07);
  --tt-gray-dark-a-200: rgba(238, 238, 246, 0.11);
  --tt-gray-dark-a-300: rgba(239, 239, 245, 0.22);
  --tt-gray-dark-a-400: rgba(244, 244, 255, 0.37);
  --tt-gray-dark-a-500: rgba(236, 238, 253, 0.5);
  --tt-gray-dark-a-600: rgba(247, 247, 253, 0.64);
  --tt-gray-dark-a-700: rgba(251, 251, 254, 0.75);
  --tt-gray-dark-a-800: rgba(253, 253, 253, 0.88);
  --tt-gray-dark-a-900: rgba(255, 255, 255, 0.96);
  /* Gray (dark mode) */
  --tt-gray-dark-50: rgba(25, 25, 26, 1);
  --tt-gray-dark-100: rgba(32, 32, 34, 1);
  --tt-gray-dark-200: rgba(45, 45, 47, 1);
  --tt-gray-dark-300: rgba(70, 70, 73, 1);
  --tt-gray-dark-400: rgba(99, 99, 105, 1);
  --tt-gray-dark-500: rgba(124, 124, 131, 1);
  --tt-gray-dark-600: rgba(163, 163, 168, 1);
  --tt-gray-dark-700: rgba(192, 192, 195, 1);
  --tt-gray-dark-800: rgba(224, 224, 225, 1);
  --tt-gray-dark-900: rgba(245, 245, 245, 1);
  /* Brand colors */
  --tt-brand-color-50: rgba(239, 238, 255, 1);
  --tt-brand-color-100: rgba(222, 219, 255, 1);
  --tt-brand-color-200: rgba(195, 189, 255, 1);
  --tt-brand-color-300: rgba(157, 138, 255, 1);
  --tt-brand-color-400: rgba(122, 82, 255, 1);
  --tt-brand-color-500: rgba(98, 41, 255, 1);
  --tt-brand-color-600: rgba(84, 0, 229, 1);
  --tt-brand-color-700: rgba(75, 0, 204, 1);
  --tt-brand-color-800: rgba(56, 0, 153, 1);
  --tt-brand-color-900: rgba(43, 25, 102, 1);
  --tt-brand-color-950: hsla(257, 100%, 9%, 1);
  /* Green */
  --tt-color-green-inc-5: hsla(129, 100%, 97%, 1);
  --tt-color-green-inc-4: hsla(129, 100%, 92%, 1);
  --tt-color-green-inc-3: hsla(131, 100%, 86%, 1);
  --tt-color-green-inc-2: hsla(133, 98%, 78%, 1);
  --tt-color-green-inc-1: hsla(137, 99%, 70%, 1);
  --tt-color-green-base: hsla(147, 99%, 50%, 1);
  --tt-color-green-dec-1: hsla(147, 97%, 41%, 1);
  --tt-color-green-dec-2: hsla(146, 98%, 32%, 1);
  --tt-color-green-dec-3: hsla(146, 100%, 24%, 1);
  --tt-color-green-dec-4: hsla(144, 100%, 16%, 1);
  --tt-color-green-dec-5: hsla(140, 100%, 9%, 1);
  /* Yellow */
  --tt-color-yellow-inc-5: hsla(50, 100%, 97%, 1);
  --tt-color-yellow-inc-4: hsla(50, 100%, 91%, 1);
  --tt-color-yellow-inc-3: hsla(50, 100%, 84%, 1);
  --tt-color-yellow-inc-2: hsla(50, 100%, 77%, 1);
  --tt-color-yellow-inc-1: hsla(50, 100%, 68%, 1);
  --tt-color-yellow-base: hsla(52, 100%, 50%, 1);
  --tt-color-yellow-dec-1: hsla(52, 100%, 41%, 1);
  --tt-color-yellow-dec-2: hsla(52, 100%, 32%, 1);
  --tt-color-yellow-dec-3: hsla(52, 100%, 24%, 1);
  --tt-color-yellow-dec-4: hsla(51, 100%, 16%, 1);
  --tt-color-yellow-dec-5: hsla(50, 100%, 9%, 1);
  /* Red */
  --tt-color-red-inc-5: hsla(11, 100%, 96%, 1);
  --tt-color-red-inc-4: hsla(11, 100%, 88%, 1);
  --tt-color-red-inc-3: hsla(10, 100%, 80%, 1);
  --tt-color-red-inc-2: hsla(9, 100%, 73%, 1);
  --tt-color-red-inc-1: hsla(7, 100%, 64%, 1);
  --tt-color-red-base: hsla(7, 100%, 54%, 1);
  --tt-color-red-dec-1: hsla(7, 100%, 41%, 1);
  --tt-color-red-dec-2: hsla(5, 100%, 32%, 1);
  --tt-color-red-dec-3: hsla(4, 100%, 24%, 1);
  --tt-color-red-dec-4: hsla(3, 100%, 16%, 1);
  --tt-color-red-dec-5: hsla(1, 100%, 9%, 1);
  /* Basic colors */
  --white: rgba(255, 255, 255, 1);
  --black: rgba(14, 14, 17, 1);
  --transparent: rgba(255, 255, 255, 0);
  /****************** 
  Shadow variables
  ******************/
  /* Shadows Light */
  --tt-shadow-elevated-md:
    0px 16px 48px 0px rgba(17, 24, 39, 0.04),
    0px 12px 24px 0px rgba(17, 24, 39, 0.04),
    0px 6px 8px 0px rgba(17, 24, 39, 0.02),
    0px 2px 3px 0px rgba(17, 24, 39, 0.02);
  /************************************************** 
       Radius variables 
    **************************************************/
  --tt-radius-xxs: 0.125rem; /* 2px */
  --tt-radius-xs: 0.25rem; /* 4px */
  --tt-radius-sm: 0.375rem; /* 6px */
  --tt-radius-md: 0.5rem; /* 8px */
  --tt-radius-lg: 0.75rem; /* 12px */
  --tt-radius-xl: 1rem; /* 16px */
  /************************************************** 
       Transition variables 
    **************************************************/
  --tt-transition-duration-short: 0.1s;
  --tt-transition-duration-default: 0.2s;
  --tt-transition-duration-long: 0.64s;
  --tt-transition-easing-default: cubic-bezier(0.46, 0.03, 0.52, 0.96);
  --tt-transition-easing-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
  --tt-transition-easing-quart: cubic-bezier(0.77, 0, 0.18, 1);
  --tt-transition-easing-circ: cubic-bezier(0.79, 0.14, 0.15, 0.86);
  --tt-transition-easing-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  /****************** 
  Contrast variables
  ******************/
  --tt-accent-contrast: 8%;
  --tt-destructive-contrast: 8%;
  --tt-foreground-contrast: 8%;
}
:root,
:root *,
:root ::before,
:root ::after {
  box-sizing: border-box;
  transition: none var(--tt-transition-duration-default) var(--tt-transition-easing-default);
}

:root {
  /************************************************** 
      Global colors 
  **************************************************/
  /* Global colors - Light mode */
  --tt-bg-color: var(--white);
  --tt-border-color: var(--tt-gray-light-a-200);
  --tt-border-color-tint: var(--tt-gray-light-a-100);
  --tt-sidebar-bg-color: var(--tt-gray-light-100);
  --tt-scrollbar-color: var(--tt-gray-light-a-200);
  --tt-cursor-color: var(--tt-brand-color-500);
  --tt-selection-color: rgba(157, 138, 255, 0.2);
  --tt-card-bg-color: var(--white);
  --tt-card-border-color: var(--tt-gray-light-a-100);
}

/* Global colors - Dark mode */
.dark {
  --tt-bg-color: var(--black);
  --tt-border-color: var(--tt-gray-dark-a-200);
  --tt-border-color-tint: var(--tt-gray-dark-a-100);
  --tt-sidebar-bg-color: var(--tt-gray-dark-100);
  --tt-scrollbar-color: var(--tt-gray-dark-a-200);
  --tt-cursor-color: var(--tt-brand-color-400);
  --tt-selection-color: rgba(122, 82, 255, 0.2);
  --tt-card-bg-color: var(--tt-gray-dark-50);
  --tt-card-border-color: var(--tt-gray-dark-a-50);
  --tt-shadow-elevated-md:
    0px 16px 48px 0px rgba(0, 0, 0, 0.5), 0px 12px 24px 0px rgba(0, 0, 0, 0.24),
    0px 6px 8px 0px rgba(0, 0, 0, 0.22), 0px 2px 3px 0px rgba(0, 0, 0, 0.12);
}

/* Text colors */
:root {
  --tt-color-text-gray: hsl(45, 2%, 46%);
  --tt-color-text-brown: hsl(19, 31%, 47%);
  --tt-color-text-orange: hsl(30, 89%, 45%);
  --tt-color-text-yellow: hsl(38, 62%, 49%);
  --tt-color-text-green: hsl(148, 32%, 39%);
  --tt-color-text-blue: hsl(202, 54%, 43%);
  --tt-color-text-purple: hsl(274, 32%, 54%);
  --tt-color-text-pink: hsl(328, 49%, 53%);
  --tt-color-text-red: hsl(2, 62%, 55%);
  --tt-color-text-gray-contrast: hsla(39, 26%, 26%, 0.15);
  --tt-color-text-brown-contrast: hsla(18, 43%, 69%, 0.35);
  --tt-color-text-orange-contrast: hsla(24, 73%, 55%, 0.27);
  --tt-color-text-yellow-contrast: hsla(44, 82%, 59%, 0.39);
  --tt-color-text-green-contrast: hsla(126, 29%, 60%, 0.27);
  --tt-color-text-blue-contrast: hsla(202, 54%, 59%, 0.27);
  --tt-color-text-purple-contrast: hsla(274, 37%, 64%, 0.27);
  --tt-color-text-pink-contrast: hsla(331, 60%, 71%, 0.27);
  --tt-color-text-red-contrast: hsla(8, 79%, 79%, 0.4);
}

.dark {
  --tt-color-text-gray: hsl(0, 0%, 61%);
  --tt-color-text-brown: hsl(18, 35%, 58%);
  --tt-color-text-orange: hsl(25, 53%, 53%);
  --tt-color-text-yellow: hsl(36, 54%, 55%);
  --tt-color-text-green: hsl(145, 32%, 47%);
  --tt-color-text-blue: hsl(202, 64%, 52%);
  --tt-color-text-purple: hsl(270, 55%, 62%);
  --tt-color-text-pink: hsl(329, 57%, 58%);
  --tt-color-text-red: hsl(1, 69%, 60%);
  --tt-color-text-gray-contrast: hsla(0, 0%, 100%, 0.09);
  --tt-color-text-brown-contrast: hsla(17, 45%, 50%, 0.25);
  --tt-color-text-orange-contrast: hsla(27, 82%, 53%, 0.2);
  --tt-color-text-yellow-contrast: hsla(35, 49%, 47%, 0.2);
  --tt-color-text-green-contrast: hsla(151, 55%, 39%, 0.2);
  --tt-color-text-blue-contrast: hsla(202, 54%, 43%, 0.2);
  --tt-color-text-purple-contrast: hsla(271, 56%, 60%, 0.18);
  --tt-color-text-pink-contrast: hsla(331, 67%, 58%, 0.22);
  --tt-color-text-red-contrast: hsla(0, 67%, 60%, 0.25);
}

/* Highlight colors */
:root {
  --tt-color-highlight-yellow: #fef9c3;
  --tt-color-highlight-green: #dcfce7;
  --tt-color-highlight-blue: #e0f2fe;
  --tt-color-highlight-purple: #f3e8ff;
  --tt-color-highlight-red: #ffe4e6;
  --tt-color-highlight-gray: rgb(248, 248, 247);
  --tt-color-highlight-brown: rgb(244, 238, 238);
  --tt-color-highlight-orange: rgb(251, 236, 221);
  --tt-color-highlight-pink: rgb(252, 241, 246);
  --tt-color-highlight-yellow-contrast: #fbe604;
  --tt-color-highlight-green-contrast: #c7fad8;
  --tt-color-highlight-blue-contrast: #ceeafd;
  --tt-color-highlight-purple-contrast: #e4ccff;
  --tt-color-highlight-red-contrast: #ffccd0;
  --tt-color-highlight-gray-contrast: rgba(84, 72, 49, 0.15);
  --tt-color-highlight-brown-contrast: rgba(210, 162, 141, 0.35);
  --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
  --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
}

.dark {
  --tt-color-highlight-yellow: #6b6524;
  --tt-color-highlight-green: #509568;
  --tt-color-highlight-blue: #6e92aa;
  --tt-color-highlight-purple: #583e74;
  --tt-color-highlight-red: #743e42;
  --tt-color-highlight-gray: rgb(47, 47, 47);
  --tt-color-highlight-brown: rgb(74, 50, 40);
  --tt-color-highlight-orange: rgb(92, 59, 35);
  --tt-color-highlight-pink: rgb(78, 44, 60);
  --tt-color-highlight-yellow-contrast: #58531e;
  --tt-color-highlight-green-contrast: #47855d;
  --tt-color-highlight-blue-contrast: #5e86a1;
  --tt-color-highlight-purple-contrast: #4c3564;
  --tt-color-highlight-red-contrast: #643539;
  --tt-color-highlight-gray-contrast: rgba(255, 255, 255, 0.094);
  --tt-color-highlight-brown-contrast: rgba(184, 101, 69, 0.25);
  --tt-color-highlight-orange-contrast: rgba(233, 126, 37, 0.2);
  --tt-color-highlight-pink-contrast: rgba(220, 76, 145, 0.22);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomIn {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoomOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}
@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideFromTop {
  from {
    transform: translateY(-0.5rem);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideFromRight {
  from {
    transform: translateX(0.5rem);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideFromLeft {
  from {
    transform: translateX(-0.5rem);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideFromBottom {
  from {
    transform: translateY(0.5rem);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
body {
  --tt-toolbar-height: 44px;
  --tt-theme-text: var(--tt-gray-light-900);
}
.dark body {
  --tt-theme-text: var(--tt-gray-dark-900);
}

body {
  font-family: "Inter", sans-serif;
  color: var(--tt-theme-text);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  padding: 0;
}

html,
body,
#root,
#app {
  height: 100%;
}

::-webkit-scrollbar {
  width: 0.25rem;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--tt-gray-light-300) transparent;
}

.dark * {
  scrollbar-color: var(--tt-gray-dark-300) transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--tt-gray-light-300);
  border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
  background-color: var(--tt-gray-dark-300);
}

::-webkit-scrollbar-track {
  background: transparent;
}

.tiptap.ProseMirror {
  font-family: "DM Sans", sans-serif;
}

.notion-like-editor-wrapper {
  display: flex;
  flex-direction: column;
}

.notion-like-editor-content {
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.notion-like-editor-content .tiptap.ProseMirror.notion-like-editor {
  flex: 1;
  padding: 3rem 3rem 30vh;
}

@media screen and (max-width: 480px) {
  .notion-like-editor-content .tiptap.ProseMirror.notion-like-editor {
    padding: 1.5rem 1.5rem 30vh;
  }
}
.spinner-container {
  width: 100%;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spinner-container .spinner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.spinner-container .spinner-content svg {
  animation: spin 1s linear infinite;
  height: 1.25rem;
  width: 1.25rem;
}
.spinner-container .spinner-content svg circle {
  opacity: 0.25;
  stroke: currentColor;
  stroke-width: 4;
}
.spinner-container .spinner-content svg path {
  opacity: 0.75;
  fill: currentColor;
}
.spinner-container .spinner-content .spinner-loading-text {
  text-align: center;
}

.notion-like-editor .ProseMirror table {
  border-collapse: collapse;
  margin: 1rem 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--tt-gray-light-200);
}
.dark .notion-like-editor .ProseMirror table {
  border-color: var(--tt-gray-dark-200);
}
.notion-like-editor .ProseMirror td,
.notion-like-editor .ProseMirror th {
  border: 1px solid var(--tt-gray-light-200);
  box-sizing: border-box;
  min-width: 1em;
  padding: 8px 12px;
  position: relative;
  vertical-align: top;
}
.dark .notion-like-editor .ProseMirror td,
.dark .notion-like-editor .ProseMirror th {
  border-color: var(--tt-gray-dark-200);
}
.notion-like-editor .ProseMirror td > *,
.notion-like-editor .ProseMirror th > * {
  margin-bottom: 0;
}
.notion-like-editor .ProseMirror th {
  background-color: var(--tt-gray-light-50);
  font-weight: 600;
  text-align: left;
}
.dark .notion-like-editor .ProseMirror th {
  background-color: var(--tt-gray-dark-50);
}
.notion-like-editor .ProseMirror .selectedCell:after {
  background: rgba(59, 130, 246, 0.15);
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.notion-like-editor .ProseMirror .column-resize-handle {
  background-color: var(--tt-primary-color);
  bottom: -2px;
  position: absolute;
  right: -2px;
  top: 0;
  width: 4px;
  cursor: col-resize;
}
.notion-like-editor .ProseMirror .column-resize-handle:hover {
  background-color: var(--tt-primary-color-hover);
}
.notion-like-editor .ProseMirror .tableWrapper {
  margin: 1.5rem 0;
  overflow-x: auto;
}
.notion-like-editor .ProseMirror.resize-cursor {
  cursor: col-resize;
}

:root {
  --tt-notion-like-editor-header-border: var(--tt-gray-light-a-200);
  --tt-notion-like-editor-header-bg: var(--white);
}

.dark {
  --tt-notion-like-editor-header-border: var(--tt-gray-dark-a-200);
  --tt-notion-like-editor-header-bg: var(--black);
}

.notion-like-editor-header {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  height: 3rem;
  padding: 0.5rem 0.75rem;
  z-index: 50;
  background-color: var(--tt-notion-like-editor-header-bg);
  border-bottom: 1px solid var(--tt-notion-like-editor-header-border);
}
.notion-like-editor-header-actions {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.5rem;
}

:root {
  --tiptap-avatar-border-color: var(--white);
  --tiptap-avatar-fallback-bg-color: var(--tt-gray-light-200);
  --tiptap-avatar-item-bg-color: var(--tt-gray-light-200);
  --tiptap-avatar-fallback-text-color: var(--tt-gray-light-a-600);
}

.dark {
  --tiptap-avatar-border-color: var(--tt-gray-dark-200);
  --tiptap-avatar-fallback-bg-color: var(--tt-gray-dark-200);
  --tiptap-avatar-item-bg-color: var(--tt-gray-dark-300);
  --tiptap-avatar-fallback-text-color: var(--tt-gray-dark-a-600);
}

.tiptap-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  overflow: hidden;
  user-select: none;
  flex-shrink: 0;
}
.tiptap-avatar[data-size=default] {
  width: 1.5rem;
  height: 1.5rem;
}
.tiptap-avatar[data-size=default] .tiptap-avatar-fallback {
  font-size: 0.5rem;
}
.tiptap-avatar[data-size=sm] {
  width: 1.25rem;
  height: 1.25rem;
}
.tiptap-avatar[data-size=sm] .tiptap-avatar-fallback {
  font-size: 0.4375rem;
}
.tiptap-avatar[data-size=lg] {
  width: 1.75rem;
  height: 1.75rem;
}
.tiptap-avatar[data-size=lg] .tiptap-avatar-fallback {
  font-size: 0.625rem;
}
.tiptap-avatar[data-size=xl] {
  width: 2.25rem;
  height: 2.25rem;
}
.tiptap-avatar[data-size=xl] .tiptap-avatar-fallback {
  font-size: 0.75rem;
}

.tiptap-avatar-item {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background-color: var(--dynamic-user-color, var(--tiptap-avatar-item-bg-color));
  border-radius: 50%;
}

.tiptap-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.tiptap-avatar-fallback {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--tiptap-avatar-fallback-text-color);
  border-radius: 50%;
  font-weight: 600;
}

.tiptap-avatar-bg {
  position: absolute;
  inset: 0;
  background-color: var(--dynamic-user-color, var(--tiptap-avatar-item-bg-color));
  border-radius: 50%;
}

.tiptap-avatar-group {
  display: inline-flex;
  align-items: center;
}
.tiptap-avatar-group .tiptap-avatar-image,
.tiptap-avatar-group .tiptap-avatar-fallback {
  border: 2px solid var(--tiptap-avatar-border-color);
}
.tiptap-avatar-group .tiptap-avatar:not(:first-child) {
  margin-left: -0.5rem;
}

.tiptap-badge {
  font-size: 0.625rem;
  font-weight: 700;
  font-feature-settings: "salt" on, "cv01" on;
  line-height: 1.15;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px;
  border-radius: var(--tt-radius-sm, 0.375rem);
  transition-property: background, color, opacity;
  transition-duration: var(--tt-transition-duration-default);
  transition-timing-function: var(--tt-transition-easing-default);
  /* button size large */
  /* button size small */
  /* trim / expand text of the button */
  /* standard icon, what is used */
}
.tiptap-badge[data-size=large] {
  font-size: 0.75rem;
  height: 1.5rem;
  min-width: 1.5rem;
  padding: 0.375rem;
  border-radius: var(--tt-radius-md, 0.375rem);
}
.tiptap-badge[data-size=small] {
  height: 1rem;
  min-width: 1rem;
  padding: 0.125rem;
  border-radius: var(--tt-radius-xs, 0.25rem);
}
.tiptap-badge .tiptap-badge-text {
  padding: 0 0.125rem;
  flex-grow: 1;
  text-align: left;
}
.tiptap-badge[data-text-trim=on] .tiptap-badge-text {
  text-overflow: ellipsis;
  overflow: hidden;
}
.tiptap-badge .tiptap-badge-icon {
  pointer-events: none;
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
}
.tiptap-badge[data-size=large] .tiptap-badge-icon {
  width: 0.75rem;
  height: 0.75rem;
}

/* --------------------------------------------
----------- BADGE COLOR SETTINGS -------------
-------------------------------------------- */
.tiptap-badge {
  background-color: var(--tt-badge-bg-color);
  border-color: var(--tt-badge-border-color);
  color: var(--tt-badge-text-color);
  /* Emphasized */
  /* Subdued */
}
.tiptap-badge .tiptap-badge-icon {
  color: var(--tt-badge-icon-color);
}
.tiptap-badge[data-appearance=emphasized] {
  background-color: var(--tt-badge-bg-color-emphasized);
  border-color: var(--tt-badge-border-color-emphasized);
  color: var(--tt-badge-text-color-emphasized);
}
.tiptap-badge[data-appearance=emphasized] .tiptap-badge-icon {
  color: var(--tt-badge-icon-color-emphasized);
}
.tiptap-badge[data-appearance=subdued] {
  background-color: var(--tt-badge-bg-color-subdued);
  border-color: var(--tt-badge-border-color-subdued);
  color: var(--tt-badge-text-color-subdued);
}
.tiptap-badge[data-appearance=subdued] .tiptap-badge-icon {
  color: var(--tt-badge-icon-color-subdued);
}

.tiptap-badge {
  /************************************************** 
    Default 
  **************************************************/
  /* Light mode */
  --tt-badge-border-color: var(--tt-gray-light-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-light-a-600);
  --tt-badge-text-color: var(--tt-gray-light-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-text-color-emphasized: var(
    --tt-gray-light-a-600
  );
  --tt-badge-bg-color: var(--white);
  --tt-badge-bg-color-subdued: var(--white);
  --tt-badge-bg-color-emphasized: var(--white);
  --tt-badge-icon-color: var(--tt-gray-light-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-600
  );
  /* Dark mode */
  /************************************************** 
    Ghost 
  **************************************************/
  /************************************************** 
    Gray 
  **************************************************/
  /************************************************** 
    Green 
  **************************************************/
  /************************************************** 
    Yellow 
  **************************************************/
  /************************************************** 
    Red 
  **************************************************/
  /************************************************** 
    Brand 
  **************************************************/
}
.dark .tiptap-badge {
  --tt-badge-border-color: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
  --tt-badge-text-color: var(--tt-gray-dark-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-text-color-emphasized: var(
    --tt-gray-dark-a-600
  );
  --tt-badge-bg-color: var(--black);
  --tt-badge-bg-color-subdued: var(--black);
  --tt-badge-bg-color-emphasized: var(--black);
  --tt-badge-icon-color: var(--tt-gray-dark-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-400
  );
}
.tiptap-badge[data-style=ghost] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-gray-light-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-light-a-600);
  --tt-badge-text-color: var(--tt-gray-light-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-text-color-emphasized: var(
    --tt-gray-light-a-600
  );
  --tt-badge-bg-color: var(--transparent);
  --tt-badge-bg-color-subdued: var(--transparent);
  --tt-badge-bg-color-emphasized: var(--transparent);
  --tt-badge-icon-color: var(--tt-gray-light-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-600
  );
  /* Dark mode */
}
.dark .tiptap-badge[data-style=ghost] {
  --tt-badge-border-color: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
  --tt-badge-text-color: var(--tt-gray-dark-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-text-color-emphasized: var(
    --tt-gray-dark-a-600
  );
  --tt-badge-bg-color: var(--transparent);
  --tt-badge-bg-color-subdued: var(--transparent);
  --tt-badge-bg-color-emphasized: var(--transparent);
  --tt-badge-icon-color: var(--tt-gray-dark-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-400
  );
}
.tiptap-badge[data-style=gray] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-gray-light-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-light-a-500);
  --tt-badge-text-color: var(--tt-gray-light-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-text-color-emphasized: var(--white);
  --tt-badge-bg-color: var(--tt-gray-light-a-100);
  --tt-badge-bg-color-subdued: var(
    --tt-gray-light-a-50
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-gray-light-a-700
  );
  --tt-badge-icon-color: var(--tt-gray-light-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-icon-color-emphasized: var(--white);
  /* Dark mode */
}
.dark .tiptap-badge[data-style=gray] {
  --tt-badge-border-color: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
  --tt-badge-text-color: var(--tt-gray-dark-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-text-color-emphasized: var(--black);
  --tt-badge-bg-color: var(--tt-gray-dark-a-100);
  --tt-badge-bg-color-subdued: var(
    --tt-gray-dark-a-50
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-gray-dark-a-800
  );
  --tt-badge-icon-color: var(--tt-gray-dark-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-icon-color-emphasized: var(--black);
}
.tiptap-badge[data-style=green] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-color-green-inc-2);
  --tt-badge-border-color-subdued: var(--tt-color-green-inc-3);
  --tt-badge-border-color-emphasized: var(--tt-color-green-dec-2);
  --tt-badge-text-color: var(--tt-color-green-dec-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-green-dec-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-green-inc-5
  );
  --tt-badge-bg-color: var(--tt-color-green-inc-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-green-inc-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-green-dec-1
  );
  --tt-badge-icon-color: var(--tt-color-green-dec-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-green-dec-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-green-inc-5
  );
  /* Dark mode */
}
.dark .tiptap-badge[data-style=green] {
  --tt-badge-border-color: var(--tt-color-green-dec-2);
  --tt-badge-border-color-subdued: var(--tt-color-green-dec-3);
  --tt-badge-border-color-emphasized: var(--tt-color-green-base);
  --tt-badge-text-color: var(--tt-color-green-inc-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-green-inc-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-green-dec-5
  );
  --tt-badge-bg-color: var(--tt-color-green-dec-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-green-dec-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-green-inc-1
  );
  --tt-badge-icon-color: var(--tt-color-green-inc-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-green-inc-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-green-dec-5
  );
}
.tiptap-badge[data-style=yellow] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-color-yellow-inc-2);
  --tt-badge-border-color-subdued: var(--tt-color-yellow-inc-3);
  --tt-badge-border-color-emphasized: var(--tt-color-yellow-dec-1);
  --tt-badge-text-color: var(--tt-color-yellow-dec-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-yellow-dec-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-yellow-dec-3
  );
  --tt-badge-bg-color: var(--tt-color-yellow-inc-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-yellow-inc-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-yellow-base
  );
  --tt-badge-icon-color: var(--tt-color-yellow-dec-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-yellow-dec-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-yellow-dec-3
  );
  /* Dark mode */
}
.dark .tiptap-badge[data-style=yellow] {
  --tt-badge-border-color: var(--tt-color-yellow-dec-2);
  --tt-badge-border-color-subdued: var(--tt-color-yellow-dec-3);
  --tt-badge-border-color-emphasized: var(--tt-color-yellow-inc-1);
  --tt-badge-text-color: var(--tt-color-yellow-inc-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-yellow-inc-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-yellow-dec-3
  );
  --tt-badge-bg-color: var(--tt-color-yellow-dec-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-yellow-dec-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-yellow-base
  );
  --tt-badge-icon-color: var(--tt-color-yellow-inc-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-yellow-inc-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-yellow-dec-3
  );
}
.tiptap-badge[data-style=red] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-color-red-inc-2);
  --tt-badge-border-color-subdued: var(--tt-color-red-inc-3);
  --tt-badge-border-color-emphasized: var(--tt-color-red-dec-2);
  --tt-badge-text-color: var(--tt-color-red-dec-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-red-dec-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-red-inc-5
  );
  --tt-badge-bg-color: var(--tt-color-red-inc-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-red-inc-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-red-dec-1
  );
  --tt-badge-icon-color: var(--tt-color-red-dec-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-red-dec-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-red-inc-5
  );
  /* Dark mode */
}
.dark .tiptap-badge[data-style=red] {
  --tt-badge-border-color: var(--tt-color-red-dec-2);
  --tt-badge-border-color-subdued: var(--tt-color-red-dec-3);
  --tt-badge-border-color-emphasized: var(--tt-color-red-base);
  --tt-badge-text-color: var(--tt-color-red-inc-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-red-inc-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-red-dec-5
  );
  --tt-badge-bg-color: var(--tt-color-red-dec-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-red-dec-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-red-inc-1
  );
  --tt-badge-icon-color: var(--tt-color-red-inc-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-red-inc-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-red-dec-5
  );
}
.tiptap-badge[data-style=brand] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-brand-color-300);
  --tt-badge-border-color-subdued: var(--tt-brand-color-200);
  --tt-badge-border-color-emphasized: var(--tt-brand-color-600);
  --tt-badge-text-color: var(--tt-brand-color-800);
  --tt-badge-text-color-subdued: var(
    --tt-brand-color-700
  );
  --tt-badge-text-color-emphasized: var(
    --tt-brand-color-50
  );
  --tt-badge-bg-color: var(--tt-brand-color-100);
  --tt-badge-bg-color-subdued: var(
    --tt-brand-color-50
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-brand-color-600
  );
  --tt-badge-icon-color: var(--tt-brand-color-800);
  --tt-badge-icon-color-subdued: var(
    --tt-brand-color-700
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-100
  );
  /* Dark mode */
}
.dark .tiptap-badge[data-style=brand] {
  --tt-badge-border-color: var(--tt-brand-color-700);
  --tt-badge-border-color-subdued: var(--tt-brand-color-800);
  --tt-badge-border-color-emphasized: var(--tt-brand-color-400);
  --tt-badge-text-color: var(--tt-brand-color-200);
  --tt-badge-text-color-subdued: var(
    --tt-brand-color-300
  );
  --tt-badge-text-color-emphasized: var(
    --tt-brand-color-950
  );
  --tt-badge-bg-color: var(--tt-brand-color-900);
  --tt-badge-bg-color-subdued: var(
    --tt-brand-color-950
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-brand-color-400
  );
  --tt-badge-icon-color: var(--tt-brand-color-200);
  --tt-badge-icon-color-subdued: var(
    --tt-brand-color-300
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-900
  );
}

.tiptap-badge-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tiptap-badge-group [data-orientation=vertical] {
  flex-direction: column;
}
.tiptap-badge-group [data-orientation=horizontal] {
  flex-direction: row;
}

.tiptap-button {
  font-size: 0.875rem;
  font-weight: 500;
  font-feature-settings: "salt" on, "cv01" on;
  line-height: 1.15;
  height: 2rem;
  min-width: 2rem;
  border: none;
  padding: 0.5rem;
  gap: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tt-radius-lg, 0.75rem);
  transition-property: background, color, opacity;
  transition-duration: var(--tt-transition-duration-default);
  transition-timing-function: var(--tt-transition-easing-default);
  /* button size large */
  /* button size small */
  /* trim / expand text of the button */
  /* global icon settings */
  /* standard icon, what is used */
  /* if 2 icons are used and this icon should be more subtle */
  /* dropdown menus or arrows that are slightly smaller */
  /* dropdown menu for icon buttons only */
  /* button only has icons */
  /* button only has 2 icons and one of them is dropdown small */
  /* Emoji is used in a button */
}
.tiptap-button:focus-visible {
  outline: none;
}
.tiptap-button[data-highlighted=true], .tiptap-button[data-focus-visible=true] {
  background-color: var(--tt-button-hover-bg-color);
  color: var(--tt-button-hover-text-color);
}
.tiptap-button[data-weight=small] {
  width: 1.5rem;
  min-width: 1.5rem;
  padding-right: 0;
  padding-left: 0;
}
.tiptap-button[data-size=large] {
  font-size: 0.9375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  padding: 0.625rem;
}
.tiptap-button[data-size=small] {
  font-size: 0.75rem;
  line-height: 1.2;
  height: 1.5rem;
  min-width: 1.5rem;
  padding: 0.3125rem;
  border-radius: var(--tt-radius-md, 0.5rem);
}
.tiptap-button .tiptap-button-text {
  padding: 0 0.125rem;
  flex-grow: 1;
  text-align: left;
  line-height: 1.5rem;
}
.tiptap-button[data-text-trim=on] .tiptap-button-text {
  text-overflow: ellipsis;
  overflow: hidden;
}
.tiptap-button .tiptap-button-icon,
.tiptap-button .tiptap-button-icon-sub,
.tiptap-button .tiptap-button-dropdown-arrows,
.tiptap-button .tiptap-button-dropdown-small {
  flex-shrink: 0;
}
.tiptap-button .tiptap-button-icon {
  width: 1rem;
  height: 1rem;
}
.tiptap-button[data-size=large] .tiptap-button-icon {
  width: 1.125rem;
  height: 1.125rem;
}
.tiptap-button[data-size=small] .tiptap-button-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.tiptap-button .tiptap-button-icon-sub {
  width: 1rem;
  height: 1rem;
}
.tiptap-button[data-size=large] .tiptap-button-icon-sub {
  width: 1.125rem;
  height: 1.125rem;
}
.tiptap-button[data-size=small] .tiptap-button-icon-sub {
  width: 0.875rem;
  height: 0.875rem;
}
.tiptap-button .tiptap-button-dropdown-arrows {
  width: 0.75rem;
  height: 0.75rem;
}
.tiptap-button[data-size=large] .tiptap-button-dropdown-arrows {
  width: 0.875rem;
  height: 0.875rem;
}
.tiptap-button[data-size=small] .tiptap-button-dropdown-arrows {
  width: 0.625rem;
  height: 0.625rem;
}
.tiptap-button .tiptap-button-dropdown-small {
  width: 0.625rem;
  height: 0.625rem;
}
.tiptap-button[data-size=large] .tiptap-button-dropdown-small {
  width: 0.75rem;
  height: 0.75rem;
}
.tiptap-button[data-size=small] .tiptap-button-dropdown-small {
  width: 0.5rem;
  height: 0.5rem;
}
.tiptap-button:has(> svg):not(:has(> :not(svg))) {
  gap: 0.125rem;
}
.tiptap-button:has(> svg):not(:has(> :not(svg)))[data-size=large], .tiptap-button:has(> svg):not(:has(> :not(svg)))[data-size=small] {
  gap: 0.125rem;
}
.tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text)) {
  gap: 0;
  padding-right: 0.25rem;
}
.tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text))[data-size=large] {
  padding-right: 0.375rem;
}
.tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text))[data-size=small] {
  padding-right: 0.25rem;
}
.tiptap-button .tiptap-button-emoji {
  width: 1rem;
  display: flex;
  justify-content: center;
}
.tiptap-button[data-size=large] .tiptap-button-emoji {
  width: 1.125rem;
}
.tiptap-button[data-size=small] .tiptap-button-emoji {
  width: 0.875rem;
}

/* --------------------------------------------
----------- BUTTON COLOR SETTINGS -------------
-------------------------------------------- */
.tiptap-button {
  background-color: var(--tt-button-default-bg-color);
  color: var(--tt-button-default-text-color);
  /* hover state of a button */
  /* Active state of a button */
}
.tiptap-button .tiptap-button-icon {
  color: var(--tt-button-default-icon-color);
}
.tiptap-button .tiptap-button-icon-sub {
  color: var(--tt-button-default-icon-sub-color);
}
.tiptap-button .tiptap-button-dropdown-arrows {
  color: var(--tt-button-default-dropdown-arrows-color);
}
.tiptap-button .tiptap-button-dropdown-small {
  color: var(--tt-button-default-dropdown-arrows-color);
}
.tiptap-button:hover:not([data-active-item=true]):not([disabled]), .tiptap-button[data-active-item=true]:not([disabled]), .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) {
  background-color: var(--tt-button-hover-bg-color);
  color: var(--tt-button-hover-text-color);
}
.tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-icon, .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-icon, .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-icon {
  color: var(--tt-button-hover-icon-color);
}
.tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-icon-sub, .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-icon-sub, .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-icon-sub {
  color: var(--tt-button-hover-icon-sub-color);
}
.tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-dropdown-arrows,
.tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-dropdown-small, .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-dropdown-arrows,
.tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-dropdown-small, .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-dropdown-arrows,
.tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-dropdown-small {
  color: var(--tt-button-hover-dropdown-arrows-color);
}
.tiptap-button[data-active-state=on]:not([disabled]), .tiptap-button[data-state=open]:not([disabled]) {
  background-color: var(--tt-button-active-bg-color);
  color: var(--tt-button-active-text-color);
  /* Emphasized */
  /* Subdued */
}
.tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-icon, .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-icon {
  color: var(--tt-button-active-icon-color);
}
.tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-icon-sub, .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-icon-sub {
  color: var(--tt-button-active-icon-sub-color);
}
.tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-dropdown-arrows,
.tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-dropdown-small, .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-dropdown-arrows,
.tiptap-button[data-state=open]:not([disabled]) .tiptap-button-dropdown-small {
  color: var(--tt-button-active-dropdown-arrows-color);
}
.tiptap-button[data-active-state=on]:not([disabled]):hover, .tiptap-button[data-state=open]:not([disabled]):hover {
  background-color: var(--tt-button-active-hover-bg-color);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized], .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] {
  background-color: var(--tt-button-active-bg-color-emphasized);
  color: var(--tt-button-active-text-color-emphasized);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon, .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon {
  color: var(--tt-button-active-icon-color-emphasized);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon-sub, .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon-sub {
  color: var(--tt-button-active-icon-sub-color-emphasized);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-arrows,
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-small, .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-arrows,
.tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-small {
  color: var(--tt-button-active-dropdown-arrows-color-emphasized);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized]:hover, .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized]:hover {
  background-color: var(--tt-button-active-hover-bg-color-emphasized);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued], .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] {
  background-color: var(--tt-button-active-bg-color-subdued);
  color: var(--tt-button-active-text-color-subdued);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-icon, .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-icon {
  color: var(--tt-button-active-icon-color-subdued);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-icon-sub, .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-icon-sub {
  color: var(--tt-button-active-icon-sub-color-subdued);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-arrows,
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-small, .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-arrows,
.tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-small {
  color: var(--tt-button-active-dropdown-arrows-color-subdued);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued]:hover, .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued]:hover {
  background-color: var(--tt-button-active-hover-bg-color-subdued);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued]:hover .tiptap-button-icon, .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued]:hover .tiptap-button-icon {
  color: var(--tt-button-active-icon-color-subdued);
}
.tiptap-button:disabled {
  background-color: var(--tt-button-disabled-bg-color);
  color: var(--tt-button-disabled-text-color);
}
.tiptap-button:disabled .tiptap-button-icon {
  color: var(--tt-button-disabled-icon-color);
}

.tiptap-button {
  /************************************************** 
      Default button background color 
  **************************************************/
  /* Light mode */
  --tt-button-default-bg-color: var(--tt-gray-light-a-100);
  --tt-button-hover-bg-color: var(--tt-gray-light-200);
  --tt-button-active-bg-color: var(--tt-gray-light-a-200);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-100
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-gray-light-a-200
  );
  --tt-button-active-hover-bg-color: var(--tt-gray-light-300);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-200
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-gray-light-a-300
  );
  --tt-button-disabled-bg-color: var(--tt-gray-light-a-50);
  /* Dark mode */
  /************************************************** 
      Default button text color 
  **************************************************/
  /* Light mode */
  --tt-button-default-text-color: var(--tt-gray-light-a-600);
  --tt-button-hover-text-color: var(--tt-gray-light-a-900);
  --tt-button-active-text-color: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
  /* Dark mode */
  /************************************************** 
      Default button icon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-color: var(--tt-gray-light-a-600);
  --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
  --tt-button-active-icon-color: var(--tt-brand-color-500);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
  --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
  --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
  /* Dark mode */
  /************************************************** 
      Default button subicon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
  --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
  /* Dark mode */
  /************************************************** 
      Default button dropdown / arrows color 
  **************************************************/
  /* Light mode */
  --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
  --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-light-a-700
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-600);
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
  /* Dark mode */
  /* ----------------------------------------------------------------
      --------------------------- GHOST BUTTON --------------------------
      ---------------------------------------------------------------- */
  /* ----------------------------------------------------------------
      -------------------------- PRIMARY BUTTON -------------------------
      ---------------------------------------------------------------- */
}
.dark .tiptap-button {
  --tt-button-default-bg-color: var(--tt-gray-dark-a-100);
  --tt-button-hover-bg-color: var(--tt-gray-dark-200);
  --tt-button-active-bg-color: var(--tt-gray-dark-a-200);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-900
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-gray-dark-a-200
  );
  --tt-button-active-hover-bg-color: var(--tt-gray-dark-300);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-800
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-gray-dark-a-300
  );
  --tt-button-disabled-bg-color: var(--tt-gray-dark-a-50);
}
.dark .tiptap-button {
  --tt-button-default-text-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
}
.dark .tiptap-button {
  --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
  --tt-button-active-icon-color: var(--tt-brand-color-400);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
  --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
  --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
}
.dark .tiptap-button {
  --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
  --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
  --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
}
.dark .tiptap-button {
  --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-dark-a-700
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
}
.tiptap-button[data-style=ghost] {
  /************************************************** 
      Ghost button background color 
  **************************************************/
  /* Light mode */
  --tt-button-default-bg-color: var(--transparent);
  --tt-button-hover-bg-color: var(--tt-gray-light-200);
  --tt-button-active-bg-color: var(--tt-gray-light-a-100);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-100
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-gray-light-a-100
  );
  --tt-button-active-hover-bg-color: var(--tt-gray-light-200);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-200
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-gray-light-a-200
  );
  --tt-button-disabled-bg-color: var(--transparent);
  /* Dark mode */
  /************************************************** 
      Ghost button text color 
  **************************************************/
  /* Light mode */
  --tt-button-default-text-color: var(--tt-gray-light-a-600);
  --tt-button-hover-text-color: var(--tt-gray-light-a-900);
  --tt-button-active-text-color: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
  /* Dark mode */
  /************************************************** 
      Ghost button icon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-color: var(--tt-gray-light-a-600);
  --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
  --tt-button-active-icon-color: var(--tt-brand-color-500);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
  --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
  --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
  /* Dark mode */
  /************************************************** 
      Ghost button subicon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
  --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
  /* Dark mode */
  /************************************************** 
      Ghost button dropdown / arrows color 
  **************************************************/
  /* Light mode */
  --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
  --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-light-a-700
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(
    --tt-gray-light-a-600
  );
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
  /* Dark mode */
}
.dark .tiptap-button[data-style=ghost] {
  --tt-button-default-bg-color: var(--transparent);
  --tt-button-hover-bg-color: var(--tt-gray-dark-200);
  --tt-button-active-bg-color: var(--tt-gray-dark-a-100);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-900
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-gray-dark-a-100
  );
  --tt-button-active-hover-bg-color: var(--tt-gray-dark-200);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-800
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-gray-dark-a-200
  );
  --tt-button-disabled-bg-color: var(--transparent);
}
.dark .tiptap-button[data-style=ghost] {
  --tt-button-default-text-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
}
.dark .tiptap-button[data-style=ghost] {
  --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
  --tt-button-active-icon-color: var(--tt-brand-color-400);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-300);
  --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
  --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
}
.dark .tiptap-button[data-style=ghost] {
  --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
  --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
  --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
}
.dark .tiptap-button[data-style=ghost] {
  --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-dark-a-700
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(
    --tt-gray-dark-a-600
  );
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
}
.tiptap-button[data-style=primary] {
  /************************************************** 
      Primary button background color 
  **************************************************/
  /* Light mode */
  --tt-button-default-bg-color: var(--tt-brand-color-500);
  --tt-button-hover-bg-color: var(--tt-brand-color-600);
  --tt-button-active-bg-color: var(--tt-brand-color-100);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-100
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-brand-color-100
  );
  --tt-button-active-hover-bg-color: var(--tt-brand-color-200);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-200
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-brand-color-200
  );
  --tt-button-disabled-bg-color: var(--tt-gray-light-a-100);
  /* Dark mode */
  /************************************************** 
      Primary button text color 
  **************************************************/
  /* Light mode */
  --tt-button-default-text-color: var(--white);
  --tt-button-hover-text-color: var(--white);
  --tt-button-active-text-color: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
  /* Dark mode */
  /************************************************** 
      Primary button icon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-color: var(--white);
  --tt-button-hover-icon-color: var(--white);
  --tt-button-active-icon-color: var(--tt-brand-color-600);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
  --tt-button-active-icon-color-subdued: var(--tt-brand-color-600);
  --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
  /* Dark mode */
  /************************************************** 
      Primary button subicon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-500);
  --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
  --tt-button-active-icon-sub-color: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-500);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
  /* Dark mode */
  /************************************************** 
      Primary button dropdown / arrows color 
  **************************************************/
  /* Light mode */
  --tt-button-default-dropdown-arrows-color: var(--white);
  --tt-button-hover-dropdown-arrows-color: var(--white);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-700);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-light-a-700
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(
    --tt-gray-light-a-700
  );
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
  /* Dark mode */
}
.dark .tiptap-button[data-style=primary] {
  --tt-button-default-bg-color: var(--tt-brand-color-500);
  --tt-button-hover-bg-color: var(--tt-brand-color-600);
  --tt-button-active-bg-color: var(--tt-brand-color-900);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-900
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-brand-color-900
  );
  --tt-button-active-hover-bg-color: var(--tt-brand-color-800);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-800
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-brand-color-800
  );
  --tt-button-disabled-bg-color: var(--tt-gray-dark-a-100);
}
.dark .tiptap-button[data-style=primary] {
  --tt-button-default-text-color: var(--white);
  --tt-button-hover-text-color: var(--white);
  --tt-button-active-text-color: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
}
.dark .tiptap-button[data-style=primary] {
  --tt-button-default-icon-color: var(--white);
  --tt-button-hover-icon-color: var(--white);
  --tt-button-active-icon-color: var(--tt-brand-color-400);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
  --tt-button-active-icon-color-subdued: var(--tt-brand-color-400);
  --tt-button-disabled-icon-color: var(--tt-gray-dark-a-300);
}
.dark .tiptap-button[data-style=primary] {
  --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-400);
  --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
  --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
}
.dark .tiptap-button[data-style=primary] {
  --tt-button-default-dropdown-arrows-color: var(--white);
  --tt-button-hover-dropdown-arrows-color: var(--white);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-dark-a-600
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(
    --tt-gray-dark-a-600
  );
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
}

.tiptap-button-group {
  position: relative;
  display: flex;
  vertical-align: middle;
}
.tiptap-button-group[data-orientation=vertical] {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: max-content;
}
.tiptap-button-group[data-orientation=vertical] > .tiptap-button {
  width: 100%;
}
.tiptap-button-group[data-orientation=horizontal] {
  gap: 0.125rem;
  flex-direction: row;
  align-items: center;
}

:root {
  --tiptap-card-bg-color: var(--white);
  --tiptap-card-border-color: var(--tt-gray-light-a-100);
  --tiptap-card-group-label-color: var(--tt-gray-light-a-800);
}

.dark {
  --tiptap-card-bg-color: var(--tt-gray-dark-50);
  --tiptap-card-border-color: var(--tt-gray-dark-a-100);
  --tiptap-card-group-label-color: var(--tt-gray-dark-a-800);
}

.tiptap-card {
  --padding: 0.375rem;
  --border-width: 1px;
  border-radius: calc(var(--padding) + var(--tt-radius-lg));
  box-shadow: var(--tt-shadow-elevated-md);
  background-color: var(--tiptap-card-bg-color);
  border: 1px solid var(--tiptap-card-border-color);
  display: flex;
  flex-direction: column;
  outline: none;
  align-items: center;
  position: relative;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
}

.tiptap-card-header {
  padding: 0.375rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: var(--border-width) solid var(--tiptap-card-border-color);
}

.tiptap-card-body {
  padding: 0.375rem;
  flex: 1 1 auto;
  overflow-y: auto;
}

.tiptap-card-item-group {
  position: relative;
  display: flex;
  vertical-align: middle;
  min-width: max-content;
}
.tiptap-card-item-group[data-orientation=vertical] {
  flex-direction: column;
  justify-content: center;
}
.tiptap-card-item-group[data-orientation=horizontal] {
  gap: 0.25rem;
  flex-direction: row;
  align-items: center;
}

.tiptap-card-group-label {
  padding-top: 0.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.25rem;
  line-height: normal;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
  color: var(--tiptap-card-group-label-color);
}

.tiptap-combobox-list {
  --tt-combobox-bg-color: var(--white);
  --tt-combobox-border-color: var(--tt-gray-light-a-100);
  --tt-combobox-text-color: var(--tt-gray-light-a-600);
  --padding: 0.375rem;
  --border-width: 1px;
  height: 100%;
  border-radius: calc(var(--padding) + var(--tt-radius-lg) + var(--border-width));
  border: var(--border-width) solid var(--tt-combobox-border-color);
  background-color: var(--tt-combobox-bg-color);
  color: var(--tt-combobox-text-color);
  padding: var(--padding);
  box-shadow: var(--tt-shadow-elevated-md);
  outline: none;
  max-width: 16rem;
  max-height: var(--popover-available-height);
  overflow-y: auto;
  margin-block: 0.375rem;
}
.dark .tiptap-combobox-list {
  --tt-combobox-border-color: var(--tt-gray-dark-a-50);
  --tt-combobox-bg-color: var(--tt-gray-dark-50);
  --tt-combobox-text-color: var(--tt-gray-dark-a-600);
}
.tiptap-combobox-list:empty {
  display: none !important;
}

.tiptap-dropdown-menu {
  --tt-dropdown-menu-bg-color: var(--white);
  --tt-dropdown-menu-border-color: var(--tt-gray-light-a-100);
  --tt-dropdown-menu-text-color: var(--tt-gray-light-a-600);
}
.dark .tiptap-dropdown-menu {
  --tt-dropdown-menu-border-color: var(--tt-gray-dark-a-50);
  --tt-dropdown-menu-bg-color: var(--tt-gray-dark-50);
  --tt-dropdown-menu-text-color: var(--tt-gray-dark-a-600);
}

/* --------------------------------------------
    --------- DROPDOWN MENU STYLING SETTINGS -----------
    -------------------------------------------- */
.tiptap-dropdown-menu {
  z-index: 50;
  outline: none;
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  max-height: var(--radix-dropdown-menu-content-available-height);
  /* Animation states */
  /* Position-based animations */
}
.tiptap-dropdown-menu > * {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.tiptap-dropdown-menu[data-state=open] {
  animation: fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1), zoomIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-dropdown-menu[data-state=closed] {
  animation: fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1), zoomOut 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-dropdown-menu[data-side=top], .tiptap-dropdown-menu[data-side=top-start], .tiptap-dropdown-menu[data-side=top-end] {
  animation: slideFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-dropdown-menu[data-side=right], .tiptap-dropdown-menu[data-side=right-start], .tiptap-dropdown-menu[data-side=right-end] {
  animation: slideFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-dropdown-menu[data-side=bottom], .tiptap-dropdown-menu[data-side=bottom-start], .tiptap-dropdown-menu[data-side=bottom-end] {
  animation: slideFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-dropdown-menu[data-side=left], .tiptap-dropdown-menu[data-side=left-start], .tiptap-dropdown-menu[data-side=left-end] {
  animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

:root {
  --tiptap-input-placeholder: var(--tt-gray-light-a-400);
}

.dark {
  --tiptap-input-placeholder: var(--tt-gray-dark-a-400);
}

.tiptap-input {
  display: block;
  width: 100%;
  height: 2rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  background: none;
  appearance: none;
  outline: none;
}
.tiptap-input::placeholder {
  color: var(--tiptap-input-placeholder);
}

.tiptap-input-clamp {
  min-width: 12rem;
  padding-right: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tiptap-input-clamp:focus {
  text-overflow: clip;
  overflow: visible;
}

.tiptap-input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.tiptap-label {
  --tt-label-color: var(--tt-gray-light-a-800);
}
.dark .tiptap-label {
  --tt-label-color: var(--tt-gray-dark-a-800);
}

.tiptap-label {
  margin-top: 0.75rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
  color: var(--tt-label-color);
}

.tiptap-menu-content {
  z-index: 50;
  display: flex;
  flex-direction: column;
  height: 100%;
  outline: none;
  min-width: var(--popover-anchor-width);
}
.tiptap-menu-content[data-state=closed] {
  display: none;
}
.tiptap-menu-content[data-state=open] {
  animation: popover 150ms ease-out;
}

.tiptap-menu-group {
  display: none;
}
.tiptap-menu-group:has([role=menuitem]), .tiptap-menu-group:has([role=option]) {
  display: block;
}

.tiptap-menu-item {
  width: 100%;
}

@keyframes popover {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-2px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes zoom {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.tiptap-popover {
  --tt-popover-bg-color: var(--white);
  --tt-popover-border-color: var(--tt-gray-light-a-100);
  --tt-popover-text-color: var(--tt-gray-light-a-600);
}
.dark .tiptap-popover {
  --tt-popover-border-color: var(--tt-gray-dark-a-50);
  --tt-popover-bg-color: var(--tt-gray-dark-50);
  --tt-popover-text-color: var(--tt-gray-dark-a-600);
}

/* --------------------------------------------
    --------- POPOVER STYLING SETTINGS -----------
    -------------------------------------------- */
.tiptap-popover {
  z-index: 50;
  outline: none;
  transform-origin: var(--radix-popover-content-transform-origin);
  max-height: var(--radix-popover-content-available-height);
  /* Animation states */
  /* Position-based animations */
}
.tiptap-popover > * {
  max-height: var(--radix-popover-content-available-height);
}
.tiptap-popover[data-state=open] {
  animation: fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1), zoomIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-popover[data-state=closed] {
  animation: fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1), zoomOut 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-popover[data-side=top], .tiptap-popover[data-side=top-start], .tiptap-popover[data-side=top-end] {
  animation: slideFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-popover[data-side=right], .tiptap-popover[data-side=right-start], .tiptap-popover[data-side=right-end] {
  animation: slideFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-popover[data-side=bottom], .tiptap-popover[data-side=bottom-start], .tiptap-popover[data-side=bottom-end] {
  animation: slideFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-popover[data-side=left], .tiptap-popover[data-side=left-start], .tiptap-popover[data-side=left-end] {
  animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tiptap-separator {
  --tt-link-border-color: var(--tt-gray-light-a-200);
}
.dark .tiptap-separator {
  --tt-link-border-color: var(--tt-gray-dark-a-200);
}

.tiptap-separator {
  flex-shrink: 0;
  background-color: var(--tt-link-border-color);
}
.tiptap-separator[data-orientation=horizontal] {
  height: 1px;
  width: 100%;
  margin: 0.5rem 0;
}
.tiptap-separator[data-orientation=vertical] {
  height: 1.5rem;
  width: 1px;
}

:root {
  --tt-sidebar-bg: var(--tt-gray-light-100);
  --tt-sidebar-border-color: var(--tt-gray-light-100);
}

.dark {
  --tt-sidebar-bg: var(--tt-gray-dark-100);
  --tt-sidebar-border-color: var(--tt-gray-dark-100);
}

.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    display: block;
  }
}
.sidebar-wrapper {
  display: flex;
  min-height: 100svh;
  width: 100%;
}
.sidebar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 10;
  height: 100svh;
  width: var(--sidebar-width);
  display: none;
  transition: left 0.2s linear, right 0.2s linear, width 0.2s linear;
}
@media (min-width: 768px) {
  .sidebar-container {
    display: flex;
  }
}
.sidebar-container[data-side=left] {
  left: 0;
  border-right-width: 1px;
}
.sidebar-container[data-side=left][data-collapsible=offcanvas] {
  left: calc(var(--sidebar-width) * -1);
}
.sidebar-container[data-side=right] {
  right: 0;
  border-left-width: 1px;
}
.sidebar-container[data-side=right][data-collapsible=offcanvas] {
  right: calc(var(--sidebar-width) * -1);
}
.sidebar-gap {
  position: relative;
  width: var(--sidebar-width);
  background-color: transparent;
  transition: width 0.2s linear;
}
.sidebar-gap[data-collapsible=offcanvas] {
  width: 0;
}
.sidebar-gap[data-side=right] {
  transform: rotate(180deg);
}
.sidebar-main {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  background-color: var(--tt-sidebar-bg);
}
.sidebar-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 20;
  width: 1rem;
  transform: translateX(-50%);
  transition: all 0.2s linear;
  display: none;
}
@media (min-width: 640px) {
  .sidebar-rail {
    display: flex;
  }
}
.sidebar-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
}
.sidebar-rail:hover::after {
  background-color: var(--tt-sidebar-border-color);
}
[data-side=left] .sidebar-rail {
  right: -1rem;
  cursor: w-resize;
}
[data-side=right] .sidebar-rail {
  left: 0;
  cursor: e-resize;
}
[data-side=left][data-state=collapsed] .sidebar-rail {
  cursor: e-resize;
}
[data-side=right][data-state=collapsed] .sidebar-rail {
  cursor: w-resize;
}
[data-collapsible=offcanvas] .sidebar-rail {
  transform: translateX(0);
}
[data-collapsible=offcanvas] .sidebar-rail::after {
  left: 100%;
}
[data-collapsible=offcanvas] .sidebar-rail:hover {
  background-color: var(--tt-sidebar-bg);
}
[data-side=left][data-collapsible=offcanvas] .sidebar-rail {
  right: -0.5rem;
}
[data-side=right][data-collapsible=offcanvas] .sidebar-rail {
  left: -0.5rem;
}
.sidebar-inset {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1;
  flex-direction: column;
}
.sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}
.sidebar-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  overflow: auto;
}

:root {
  --tt-toolbar-height: 2.75rem;
  --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --tt-toolbar-bg-color: var(--white);
  --tt-toolbar-border-color: var(--tt-gray-light-a-100);
}

.dark {
  --tt-toolbar-bg-color: var(--black);
  --tt-toolbar-border-color: var(--tt-gray-dark-a-50);
}

.tiptap-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.tiptap-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.tiptap-toolbar-group:empty {
  display: none;
}
.tiptap-toolbar-group:empty + .tiptap-separator, .tiptap-separator + .tiptap-toolbar-group:empty {
  display: none;
}
.tiptap-toolbar[data-variant=fixed] {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  min-height: var(--tt-toolbar-height);
  background: var(--tt-toolbar-bg-color);
  border-bottom: 1px solid var(--tt-toolbar-border-color);
  padding: 0 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tiptap-toolbar[data-variant=fixed]::-webkit-scrollbar {
  display: none;
}
@media (max-width: 480px) {
  .tiptap-toolbar[data-variant=fixed] {
    position: absolute;
    top: auto;
    height: calc(var(--tt-toolbar-height) + var(--tt-safe-area-bottom));
    border-top: 1px solid var(--tt-toolbar-border-color);
    border-bottom: none;
    padding: 0 0.5rem var(--tt-safe-area-bottom);
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .tiptap-toolbar[data-variant=fixed] .tiptap-toolbar-group {
    flex: 0 0 auto;
  }
}
.tiptap-toolbar[data-variant=floating] {
  --tt-toolbar-padding: 0.125rem;
  --tt-toolbar-border-width: 1px;
  padding: 0.188rem;
  border-radius: calc(var(--tt-toolbar-padding) + var(--tt-radius-lg) + var(--tt-toolbar-border-width));
  border: var(--tt-toolbar-border-width) solid var(--tt-toolbar-border-color);
  background-color: var(--tt-toolbar-bg-color);
  box-shadow: var(--tt-shadow-elevated-md);
  outline: none;
  overflow: hidden;
}
.tiptap-toolbar[data-variant=floating][data-plain=true] {
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background-color: transparent;
}
@media screen and (max-width: 480px) {
  .tiptap-toolbar[data-variant=floating] {
    width: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
}

.tiptap-tooltip {
  --tt-tooltip-bg: var(--tt-gray-light-900);
  --tt-tooltip-text: var(--white);
  --tt-kbd: var(--tt-gray-dark-a-400);
}
.dark .tiptap-tooltip {
  --tt-tooltip-bg: var(--white);
  --tt-tooltip-text: var(--tt-gray-light-600);
  --tt-kbd: var(--tt-gray-light-a-400);
}

.tiptap-tooltip {
  z-index: 200;
  overflow: hidden;
  border-radius: var(--tt-radius-md, 0.375rem);
  background-color: var(--tt-tooltip-bg);
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tt-tooltip-text);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.tiptap-tooltip kbd {
  display: inline-block;
  text-align: center;
  vertical-align: baseline;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  text-transform: capitalize;
  color: var(--tt-kbd);
}

:root {
  --tiptap-ai-prompt-focused-border-color: var(--tt-brand-color-500);
  --tiptap-ai-prompt-border-color: var(--tt-gray-light-a-200);
  --tiptap-ai-loading-background-color: var(--tt-gray-light-a-200);
}

.dark {
  --tiptap-ai-prompt-focused-border-color: var(--tt-brand-color-500);
  --tiptap-ai-prompt-border-color: var(--tt-gray-dark-a-200);
  --tiptap-ai-loading-background-color: var(--tt-gray-dark-a-200);
}

.tiptap-ai-menu-progress {
  display: flex;
  align-items: center;
  padding: 6px;
  justify-content: space-between;
  width: 100%;
}

.tiptap-spinner-alt {
  color: var(--tt-brand-color-500);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dots-container {
  display: flex;
  gap: 5px;
  align-items: center;
}

.dot {
  border-radius: 50%;
  background: var(--tiptap-ai-loading-background-color);
}

.dot:nth-child(1) {
  width: 6px;
  height: 6px;
  animation: loading1 0.8s infinite ease-in-out;
  animation-delay: 0s;
}

.dot:nth-child(2) {
  width: 12px;
  height: 12px;
  animation: loading2 0.8s infinite ease-in-out;
  animation-delay: 0.1s;
}

.dot:nth-child(3) {
  width: 8px;
  height: 8px;
  animation: loading3 0.8s infinite ease-in-out;
  animation-delay: 0.2s;
}

@keyframes loading1 {
  0%, 80%, 100% {
    background: var(--tiptap-ai-loading-background-color);
    transform: scale(0.8);
  }
  40% {
    background: var(--tt-brand-color-400);
    transform: scale(1.2);
  }
}
@keyframes loading2 {
  0%, 80%, 100% {
    background: var(--tiptap-ai-loading-background-color);
    transform: scale(0.8);
  }
  40% {
    background: var(--tt-brand-color-500);
    transform: scale(1.2);
  }
}
@keyframes loading3 {
  0%, 80%, 100% {
    background: var(--tiptap-ai-loading-background-color);
    transform: scale(0.8);
  }
  40% {
    background: var(--tt-brand-color-200);
    transform: scale(1.2);
  }
}
.tiptap-ai-menu-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  width: 100%;
}

:root {
  --tiptap-ai-prompt-input-content-placeholder: var(--tt-gray-light-a-400);
  --tiptap-ai-prompt-input-bg-color: var(--white);
  --tiptap-ai-prompt-input-focused-border-color: var(--tt-brand-color-500);
  --tiptap-ai-prompt-input-border-color: var(--tt-gray-light-a-200);
}
:root [data-active-state=off] {
  --tiptap-ai-prompt-input-text-color: var(--tt-gray-light-a-400);
}
:root [data-active-state=off].tiptap-ai-prompt-input:hover {
  --tiptap-ai-prompt-input-border-color: var(--tt-gray-light-a-300);
}

.dark {
  --tiptap-ai-prompt-input-content-placeholder: var(--tt-gray-dark-a-400);
  --tiptap-ai-prompt-input-bg-color: var(--tt-gray-dark-50);
  --tiptap-ai-prompt-input-focused-border-color: var(--tt-brand-color-500);
  --tiptap-ai-prompt-input-border-color: var(--tt-gray-dark-a-200);
}
.dark [data-active-state=off] {
  --tiptap-ai-prompt-input-text-color: var(--tt-gray-dark-a-400);
}
.dark [data-active-state=off].tiptap-ai-prompt-input:hover {
  --tiptap-ai-prompt-input-border-color: var(--tt-gray-dark-a-300);
}

.tiptap-ai-prompt-input {
  background-color: var(--tiptap-ai-prompt-input-bg-color);
  border: 1px solid var(--tiptap-ai-prompt-input-border-color);
  border-radius: var(--tt-radius-lg, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.375rem;
  width: 100%;
}
.tiptap-ai-prompt-input[data-focused=true] {
  border-color: var(--tiptap-ai-prompt-input-focused-border-color);
}

.tiptap-ai-prompt-input-content {
  max-height: 9rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  resize: none;
  display: block;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  background: none;
  appearance: none;
  outline: none;
}
.tiptap-ai-prompt-input-content .tiptap.ProseMirror {
  font-family: "Inter", sans-serif;
}
.tiptap-ai-prompt-input-content::placeholder {
  color: var(--tiptap-ai-prompt-input-content-placeholder);
}

[data-active-state=off].tiptap-ai-prompt-input {
  height: 2.75rem;
  cursor: pointer;
  border: 1px solid var(--tiptap-ai-prompt-input-border-color);
  color: var(--tiptap-ai-prompt-input-text-color);
}
[data-active-state=off].tiptap-ai-prompt-input:hover {
  border: 1px solid var(--tiptap-ai-prompt-input-border-color);
}
[data-active-state=off] .tiptap-ai-prompt-input-toolbar {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.tiptap-ai-prompt-input-placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tiptap-ai-prompt-input-placeholder-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.tiptap-ai-prompt-input-placeholder-icon {
  width: 1rem;
  height: 1rem;
}

.tiptap-ai-prompt-input-placeholder-text {
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
}

.tiptap-button-highlight {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 -0.175rem;
  border-radius: var(--tt-radius-xl);
  background-color: var(--highlight-color);
  transition: transform 0.2s ease;
}
.tiptap-button-highlight::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  box-sizing: border-box;
  border: 1px solid var(--highlight-color);
  filter: brightness(95%);
  mix-blend-mode: multiply;
}
.dark .tiptap-button-highlight::after {
  filter: brightness(140%);
  mix-blend-mode: lighten;
}

.tiptap-button[data-active-state=on] .tiptap-button-highlight::after {
  filter: brightness(80%);
}
.dark .tiptap-button[data-active-state=on] .tiptap-button-highlight::after {
  filter: brightness(180%);
}

.tiptap-button-color-text {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 -0.175rem;
  border-radius: var(--tt-radius-xl);
  transition: transform 0.2s ease;
}
.tiptap-button-color-text::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  box-sizing: border-box;
  border: 1px solid var(--color-text-button-color);
  filter: brightness(150%);
  mix-blend-mode: multiply;
  opacity: 0.5;
}
.dark .tiptap-button-color-text::after {
  filter: brightness(140%);
  mix-blend-mode: lighten;
}

.tiptap-button[data-active-state=on] .tiptap-button-color-text::after {
  filter: brightness(80%);
}
.dark .tiptap-button[data-active-state=on] .tiptap-button-color-text::after {
  filter: brightness(180%);
}

:root {
  --tiptap-ouline-fallback-color: var(--tt-gray-light-a-200);
}

.dark {
  --tiptap-ouline-fallback-color: var(--tt-gray-dark-a-200);
}

.tiptap-button-color-text-popover {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 -0.175rem;
  border-radius: var(--tt-radius-xl);
  background-color: var(--active-highlight-color);
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tiptap-button-color-text-popover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  box-sizing: border-box;
  border: 1px solid var(--active-highlight-color, var(--tiptap-ouline-fallback-color));
  filter: brightness(95%);
  mix-blend-mode: multiply;
}
.dark .tiptap-button-color-text-popover::after {
  filter: brightness(140%);
  mix-blend-mode: lighten;
}

:root {
  --emoji-input-bg-color: var(--white);
  --emoji-input-border-color: var(--tt-gray-light-a-100);
  --emoji-input-focus: var(--tt-brand-color-500);
}

.dark {
  --emoji-input-border-color: var(--tt-gray-dark-a-50);
  --emoji-input-bg-color: var(--tt-gray-dark-50);
  --emoji-input-focus: var(--tt-brand-color-500);
}

.tiptap-input.emoji-menu-search-input {
  border: 1px solid var(--emoji-input-border-color);
  border-radius: var(--tt-radius-lg);
  background-color: var(--emoji-input-bg-color);
}
.tiptap-input.emoji-menu-search-input:focus {
  border-color: var(--emoji-input-focus);
}

.emoji-menu-list {
  max-height: 14.063rem;
  overflow-y: scroll;
  overscroll-behavior: contain;
  width: 100%;
}

:root {
  --tt-slash-decoration-bg-color: var(--tt-gray-light-a-100);
  --tt-slash-decoration-color: var(--tt-gray-light-a-400);
}

.dark {
  --tt-slash-decoration-bg-color: var(--tt-gray-dark-a-100);
  --tt-slash-decoration-color: var(--tt-gray-dark-a-400);
}

span.tiptap-slash-decoration {
  background: var(--tt-slash-decoration-bg-color);
  border-radius: var(--tt-radius-xs);
  outline: 5.5px solid var(--tt-slash-decoration-bg-color);
}

span.tiptap-slash-decoration::after {
  color: var(--tt-slash-decoration-color);
}

span.tiptap-slash-decoration.is-empty::after {
  content: attr(data-decoration-content);
}

.tiptap-slash-card-body {
  width: 100%;
}

@media screen and (min-width: 480px) {
  .tiptap-slash-card {
    min-width: 15rem;
  }
}
.ai-data-node {
  display: inline-flex;
  flex-direction: column;
  background-color: rgb(239, 246, 255); /* blue-50 */
  border: 1px solid rgb(191, 219, 254); /* blue-200 */
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin: 0.25rem 0.125rem;
  min-width: 200px;
  max-width: 100%;
  transition: all 0.2s ease-out;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.ai-data-node:hover {
  background-color: rgb(219, 234, 254); /* blue-100 */
  border-color: rgb(147, 197, 253); /* blue-300 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.dark .ai-data-node {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}
.dark .ai-data-node:hover {
  background-color: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

.ai-data-node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.ai-data-node-name {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: rgb(29, 78, 216); /* blue-700 */
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease-out;
}
.ai-data-node-name:hover {
  background-color: rgb(219, 234, 254); /* blue-100 */
}
.dark .ai-data-node-name {
  color: rgb(96, 165, 250); /* blue-400 */
}
.dark .ai-data-node-name:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

.ai-data-node-name-input {
  flex: 1;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgb(147, 197, 253); /* blue-300 */
  border-radius: 0.375rem;
  background-color: white;
  color: rgb(17, 24, 39); /* gray-900 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.dark .ai-data-node-name-input {
  background-color: rgb(31, 41, 55); /* gray-800 */
  color: rgb(243, 244, 246); /* gray-100 */
  border-color: rgb(37, 99, 235); /* blue-600 */
}
.ai-data-node-name-input:focus {
  outline: none;
  border-color: rgb(59, 130, 246); /* blue-500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-data-node-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.ai-data-node-actions {
  display: flex;
  gap: 0.25rem;
}
.ai-data-node-actions button {
  padding: 0.375rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  color: rgb(107, 114, 128); /* gray-500 */
  transition: all 0.15s ease-out;
}
.ai-data-node-actions button:hover:not(:disabled) {
  background-color: rgb(243, 244, 246); /* gray-100 */
  color: rgb(55, 65, 81); /* gray-700 */
}
.ai-data-node-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dark .ai-data-node-actions button {
  color: rgb(156, 163, 175); /* gray-400 */
}
.dark .ai-data-node-actions button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(229, 231, 235); /* gray-200 */
}
.ai-data-node-actions .ai-data-node-delete:hover {
  color: rgb(220, 38, 38); /* red-600 */
  background-color: rgb(254, 242, 242); /* red-50 */
}

.ai-data-node-value {
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgb(55, 65, 81); /* gray-700 */
  background-color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  min-height: 2.5rem;
  word-break: break-word;
  border: 1px solid rgb(229, 231, 235); /* gray-200 */
  margin: 0.5rem 0;
}
.dark .ai-data-node-value {
  color: rgb(229, 231, 235); /* gray-200 */
  background-color: rgb(31, 41, 55); /* gray-800 */
  border-color: rgb(55, 65, 81); /* gray-700 */
}

.ai-data-node-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  font-size: 0.875rem;
  color: rgb(107, 114, 128); /* gray-500 */
  min-height: 2.5rem;
}
.dark .ai-data-node-loading {
  color: rgb(156, 163, 175); /* gray-400 */
}

.ai-data-node-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(191, 219, 254); /* blue-200 */
  border-top-color: rgb(37, 99, 235); /* blue-600 */
  border-radius: 50%;
  animation: ai-data-node-spin 0.8s linear infinite;
}

@keyframes ai-data-node-spin {
  to {
    transform: rotate(360deg);
  }
}
.ai-data-node-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: rgb(220, 38, 38); /* red-600 */
  background-color: rgb(254, 242, 242); /* red-50 */
  border-radius: 0.375rem;
  border: 1px solid rgb(254, 202, 202); /* red-200 */
  margin: 0.5rem 0;
}
.dark .ai-data-node-error {
  color: rgb(248, 113, 113); /* red-400 */
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.ai-data-node-empty {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: rgb(156, 163, 175); /* gray-400 */
  font-style: italic;
  text-align: center;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dark .ai-data-node-empty {
  color: rgb(107, 114, 128); /* gray-500 */
}

.ai-data-node-footer {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgb(229, 231, 235); /* gray-200 */
  font-size: 0.75rem;
  color: rgb(107, 114, 128); /* gray-500 */
}
.dark .ai-data-node-footer {
  color: rgb(156, 163, 175); /* gray-400 */
  border-top-color: rgb(55, 65, 81); /* gray-700 */
}

.ai-data-node-updated {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ai-data-node-refresh svg {
  transition: transform 0.3s var(--ease-out);
}
.ai-data-node-refresh:not(:disabled):active svg {
  transform: rotate(180deg);
}

.ProseMirror .ai-data-node {
  vertical-align: middle;
  display: inline-flex;
}

.tiptap.ProseMirror {
  --blockquote-bg-color: var(--tt-gray-light-900);
}
.dark .tiptap.ProseMirror {
  --blockquote-bg-color: var(--tt-gray-dark-900);
}

/* =====================
     BLOCKQUOTE
     ===================== */
.tiptap.ProseMirror blockquote {
  position: relative;
  padding-left: 1em;
  padding-top: 0.375em;
  padding-bottom: 0.375em;
  margin: 1.5rem 0;
}
.tiptap.ProseMirror blockquote p {
  margin-top: 0;
}
.tiptap.ProseMirror blockquote::before, .tiptap.ProseMirror blockquote.is-empty::before {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  height: 100%;
  width: 0.25em;
  background-color: var(--blockquote-bg-color);
  content: "";
  border-radius: 0;
}

.tiptap.ProseMirror {
  --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
  --tt-inline-code-text-color: var(--tt-gray-light-a-700);
  --tt-inline-code-border-color: var(--tt-gray-light-a-200);
  --tt-codeblock-bg: var(--tt-gray-light-a-50);
  --tt-codeblock-text: var(--tt-gray-light-a-800);
  --tt-codeblock-border: var(--tt-gray-light-a-200);
}
.dark .tiptap.ProseMirror {
  --tt-inline-code-bg-color: var(--tt-gray-dark-a-100);
  --tt-inline-code-text-color: var(--tt-gray-dark-a-700);
  --tt-inline-code-border-color: var(--tt-gray-dark-a-200);
  --tt-codeblock-bg: var(--tt-gray-dark-a-50);
  --tt-codeblock-text: var(--tt-gray-dark-a-800);
  --tt-codeblock-border: var(--tt-gray-dark-a-200);
}

/* =====================
   CODE FORMATTING
   ===================== */
.tiptap.ProseMirror code {
  background-color: var(--tt-inline-code-bg-color);
  color: var(--tt-inline-code-text-color);
  border: 1px solid var(--tt-inline-code-border-color);
  font-family: "JetBrains Mono NL", monospace;
  font-size: 0.875em;
  line-height: 1.4;
  border-radius: 6px/0.375rem;
  padding: 0.1em 0.2em;
}
.tiptap.ProseMirror pre {
  background-color: var(--tt-codeblock-bg);
  color: var(--tt-codeblock-text);
  border: 1px solid var(--tt-codeblock-border);
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding: 1em;
  font-size: 1rem;
  border-radius: 6px/0.375rem;
}
.tiptap.ProseMirror pre code {
  background-color: transparent;
  border: none;
  border-radius: 0;
  -webkit-text-fill-color: inherit;
  color: inherit;
}

.tiptap.ProseMirror h1,
.tiptap.ProseMirror h2,
.tiptap.ProseMirror h3,
.tiptap.ProseMirror h4 {
  position: relative;
  color: inherit;
  font-style: inherit;
}
.tiptap.ProseMirror h1:first-child,
.tiptap.ProseMirror h2:first-child,
.tiptap.ProseMirror h3:first-child,
.tiptap.ProseMirror h4:first-child {
  margin-top: 0;
}
.tiptap.ProseMirror h1 {
  font-size: 1.5em;
  font-weight: 700;
  margin-top: 3em;
}
.tiptap.ProseMirror h2 {
  font-size: 1.25em;
  font-weight: 700;
  margin-top: 2.5em;
}
.tiptap.ProseMirror h3 {
  font-size: 1.125em;
  font-weight: 600;
  margin-top: 2em;
}
.tiptap.ProseMirror h4 {
  font-size: 1em;
  font-weight: 600;
  margin-top: 2em;
}

.tiptap.ProseMirror {
  --horizontal-rule-color: var(--tt-gray-light-a-200);
}
.dark .tiptap.ProseMirror {
  --horizontal-rule-color: var(--tt-gray-dark-a-200);
}

/* =====================
     HORIZONTAL RULE
     ===================== */
.tiptap.ProseMirror hr {
  border: none;
  height: 1px;
  background-color: var(--horizontal-rule-color);
}
.tiptap.ProseMirror [data-type=horizontalRule] {
  margin-top: 2.25em;
  margin-bottom: 2.25em;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.tiptap.ProseMirror img {
  max-width: 100%;
  height: auto;
  display: block;
}
.tiptap.ProseMirror > img:not([data-type=emoji] img) {
  margin: 2rem 0;
  outline: 0.125rem solid transparent;
  border-radius: var(--tt-radius-xs, 0.25rem);
}
.tiptap.ProseMirror img:not([data-type=emoji] img).ProseMirror-selectednode {
  outline-color: var(--tt-brand-color-500);
}
.tiptap.ProseMirror .tiptap-thread:has(> img) {
  margin: 2rem 0;
}
.tiptap.ProseMirror .tiptap-thread:has(> img) img {
  outline: 0.125rem solid transparent;
  border-radius: var(--tt-radius-xs, 0.25rem);
}
.tiptap.ProseMirror .tiptap-thread img {
  margin: 0;
}

:root {
  --tiptap-image-upload-active: var(--tt-brand-color-500);
  --tiptap-image-upload-progress-bg: var(--tt-brand-color-50);
  --tiptap-image-upload-icon-bg: var(--tt-brand-color-500);
  --tiptap-image-upload-text-color: var(--tt-gray-light-a-700);
  --tiptap-image-upload-subtext-color: var(--tt-gray-light-a-400);
  --tiptap-image-upload-border: var(--tt-gray-light-a-300);
  --tiptap-image-upload-border-hover: var(--tt-gray-light-a-400);
  --tiptap-image-upload-border-active: var(--tt-brand-color-500);
  --tiptap-image-upload-icon-doc-bg: var(--tt-gray-light-a-200);
  --tiptap-image-upload-icon-doc-border: var(--tt-gray-light-300);
  --tiptap-image-upload-icon-color: var(--white);
}

.dark {
  --tiptap-image-upload-active: var(--tt-brand-color-400);
  --tiptap-image-upload-progress-bg: var(--tt-brand-color-900);
  --tiptap-image-upload-icon-bg: var(--tt-brand-color-400);
  --tiptap-image-upload-text-color: var(--tt-gray-dark-a-700);
  --tiptap-image-upload-subtext-color: var(--tt-gray-dark-a-400);
  --tiptap-image-upload-border: var(--tt-gray-dark-a-300);
  --tiptap-image-upload-border-hover: var(--tt-gray-dark-a-400);
  --tiptap-image-upload-border-active: var(--tt-brand-color-400);
  --tiptap-image-upload-icon-doc-bg: var(--tt-gray-dark-a-200);
  --tiptap-image-upload-icon-doc-border: var(--tt-gray-dark-300);
  --tiptap-image-upload-icon-color: var(--black);
}

.tiptap-image-upload {
  margin: 2rem 0;
}
.tiptap-image-upload input[type=file] {
  display: none;
}
.tiptap-image-upload .tiptap-image-upload-dropzone {
  position: relative;
  width: 3.125rem;
  height: 3.75rem;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none;
}
.tiptap-image-upload .tiptap-image-upload-icon-container {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  bottom: 0;
  right: 0;
  background-color: var(--tiptap-image-upload-icon-bg);
  border-radius: var(--tt-radius-lg, 0.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tiptap-image-upload .tiptap-image-upload-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--tiptap-image-upload-icon-color);
}
.tiptap-image-upload .tiptap-image-upload-dropzone-rect-primary {
  color: var(--tiptap-image-upload-icon-doc-bg);
  position: absolute;
}
.tiptap-image-upload .tiptap-image-upload-dropzone-rect-secondary {
  position: absolute;
  top: 0;
  right: 0.25rem;
  bottom: 0;
  color: var(--tiptap-image-upload-icon-doc-border);
}
.tiptap-image-upload .tiptap-image-upload-text {
  color: var(--tiptap-image-upload-text-color);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: normal;
}
.tiptap-image-upload .tiptap-image-upload-text em {
  font-style: normal;
  text-decoration: underline;
}
.tiptap-image-upload .tiptap-image-upload-subtext {
  color: var(--tiptap-image-upload-subtext-color);
  font-weight: 600;
  line-height: normal;
  font-size: 0.75rem;
}
.tiptap-image-upload .tiptap-image-upload-drag-area {
  padding: 2rem 1.5rem;
  border: 1.5px dashed var(--tiptap-image-upload-border);
  border-radius: var(--tt-radius-md, 0.5rem);
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}
.tiptap-image-upload .tiptap-image-upload-drag-area:hover {
  border-color: var(--tiptap-image-upload-border-hover);
}
.tiptap-image-upload .tiptap-image-upload-drag-area.drag-active {
  border-color: var(--tiptap-image-upload-border-active);
  background-color: rgba(var(--tiptap-image-upload-active-rgb, 0, 123, 255), 0.05);
}
.tiptap-image-upload .tiptap-image-upload-drag-area.drag-over {
  border-color: var(--tiptap-image-upload-border-active);
  background-color: rgba(var(--tiptap-image-upload-active-rgb, 0, 123, 255), 0.1);
}
.tiptap-image-upload .tiptap-image-upload-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.25rem;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none;
}
.tiptap-image-upload .tiptap-image-upload-previews {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tiptap-image-upload .tiptap-image-upload-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--tiptap-image-upload-border);
  margin-bottom: 0.5rem;
}
.tiptap-image-upload .tiptap-image-upload-header span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tiptap-image-upload-text-color);
}
.tiptap-image-upload .tiptap-image-upload-preview {
  position: relative;
  border-radius: var(--tt-radius-md, 0.5rem);
  overflow: hidden;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-progress {
  position: absolute;
  inset: 0;
  background-color: var(--tiptap-image-upload-progress-bg);
  transition: all 300ms ease-out;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-preview-content {
  position: relative;
  border: 1px solid var(--tiptap-image-upload-border);
  border-radius: var(--tt-radius-md, 0.5rem);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2rem;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info .tiptap-image-upload-file-icon {
  padding: 0.5rem;
  background-color: var(--tiptap-image-upload-icon-bg);
  border-radius: var(--tt-radius-lg, 0.75rem);
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info .tiptap-image-upload-file-icon svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--tiptap-image-upload-icon-color);
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-details {
  display: flex;
  flex-direction: column;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-actions .tiptap-image-upload-progress-text {
  font-size: 0.75rem;
  color: var(--tiptap-image-upload-border-active);
  font-weight: 600;
}

.tiptap.ProseMirror.ProseMirror-focused .ProseMirror-selectednode .tiptap-image-upload-drag-area {
  border-color: var(--tiptap-image-upload-active);
}

@media (max-width: 480px) {
  .tiptap-image-upload .tiptap-image-upload-drag-area {
    padding: 1.5rem 1rem;
  }
  .tiptap-image-upload .tiptap-image-upload-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .tiptap-image-upload .tiptap-image-upload-preview-content {
    padding: 0.75rem;
  }
}
.tiptap.ProseMirror {
  --tt-checklist-bg-color: var(--tt-gray-light-a-100);
  --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
  --tt-checklist-border-color: var(--tt-gray-light-a-200);
  --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
  --tt-checklist-check-icon-color: var(--white);
  --tt-checklist-text-active: var(--tt-gray-light-a-500);
}
.dark .tiptap.ProseMirror {
  --tt-checklist-bg-color: var(--tt-gray-dark-a-100);
  --tt-checklist-bg-active-color: var(--tt-gray-dark-a-900);
  --tt-checklist-border-color: var(--tt-gray-dark-a-200);
  --tt-checklist-border-active-color: var(--tt-gray-dark-a-900);
  --tt-checklist-check-icon-color: var(--black);
  --tt-checklist-text-active: var(--tt-gray-dark-a-500);
}

/* =====================
     LISTS
     ===================== */
.tiptap.ProseMirror ol,
.tiptap.ProseMirror ul {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding-left: 1.5em;
}
.tiptap.ProseMirror ol:first-child,
.tiptap.ProseMirror ul:first-child {
  margin-top: 0;
}
.tiptap.ProseMirror ol:last-child,
.tiptap.ProseMirror ul:last-child {
  margin-bottom: 0;
}
.tiptap.ProseMirror ol ol,
.tiptap.ProseMirror ol ul,
.tiptap.ProseMirror ul ol,
.tiptap.ProseMirror ul ul {
  margin-top: 0;
  margin-bottom: 0;
}
.tiptap.ProseMirror li p {
  margin-top: 0;
  line-height: 1.6;
}
.tiptap.ProseMirror ol {
  list-style: decimal;
}
.tiptap.ProseMirror ol ol {
  list-style: lower-alpha;
}
.tiptap.ProseMirror ol ol ol {
  list-style: lower-roman;
}
.tiptap.ProseMirror ul:not([data-type=taskList]) {
  list-style: disc;
}
.tiptap.ProseMirror ul:not([data-type=taskList]) ul {
  list-style: circle;
}
.tiptap.ProseMirror ul:not([data-type=taskList]) ul ul {
  list-style: square;
}
.tiptap.ProseMirror ul[data-type=taskList] {
  padding-left: 0.25em;
}
.tiptap.ProseMirror ul[data-type=taskList] li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.tiptap.ProseMirror ul[data-type=taskList] li:not(:has(> p:first-child)) {
  list-style-type: none;
}
.tiptap.ProseMirror ul[data-type=taskList] li[data-checked=true] > div > p {
  opacity: 0.5;
  text-decoration: line-through;
}
.tiptap.ProseMirror ul[data-type=taskList] li[data-checked=true] > div > p span {
  text-decoration: line-through;
}
.tiptap.ProseMirror ul[data-type=taskList] li label {
  position: relative;
  padding-top: 0.375rem;
  padding-right: 0.5rem;
}
.tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.tiptap.ProseMirror ul[data-type=taskList] li label span {
  display: block;
  width: 1em;
  height: 1em;
  border: 1px solid var(--tt-checklist-border-color);
  border-radius: var(--tt-radius-xs, 0.25rem);
  position: relative;
  cursor: pointer;
  background-color: var(--tt-checklist-bg-color);
  transition: background-color 80ms ease-out, border-color 80ms ease-out;
}
.tiptap.ProseMirror ul[data-type=taskList] li label span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.75em;
  height: 0.75em;
  background-color: var(--tt-checklist-check-icon-color);
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox]:checked + span {
  background: var(--tt-checklist-bg-active-color);
  border-color: var(--tt-checklist-border-active-color);
}
.tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox]:checked + span::before {
  opacity: 1;
}
.tiptap.ProseMirror ul[data-type=taskList] li div {
  flex: 1 1 0%;
  min-width: 0;
}

.tiptap.ProseMirror {
  --tt-collaboration-carets-label: var(--tt-gray-light-900);
  --link-text-color: var(--tt-brand-color-500);
  --thread-text: var(--tt-gray-light-900);
  --placeholder-color: var(--tt-gray-light-a-400);
  --thread-bg-color: var(--tt-color-yellow-inc-2);
  --tiptap-ai-insertion-color: var(--tt-brand-color-600);
}
.dark .tiptap.ProseMirror {
  --tt-collaboration-carets-label: var(--tt-gray-dark-100);
  --link-text-color: var(--tt-brand-color-400);
  --thread-text: var(--tt-gray-dark-900);
  --placeholder-color: var(--tt-gray-dark-a-400);
  --thread-bg-color: var(--tt-color-yellow-dec-2);
  --tiptap-ai-insertion-color: var(--tt-brand-color-400);
}

/* Ensure each top-level node has relative positioning 
   so absolutely positioned placeholders work correctly */
.tiptap.ProseMirror > * {
  position: relative;
}

/* =====================
     CORE EDITOR STYLES
     ===================== */
.tiptap.ProseMirror {
  white-space: pre-wrap;
  outline: none;
  caret-color: var(--tt-cursor-color);
}
.tiptap.ProseMirror p:not(:first-child) {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: normal;
  margin-top: 20px;
}
.tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) ::selection {
  background-color: var(--tt-selection-color);
}
.tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) .selection::selection {
  background: transparent;
}
.tiptap.ProseMirror .selection {
  display: inline;
  background-color: var(--tt-selection-color);
}
.tiptap.ProseMirror .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
  border-radius: var(--tt-radius-md);
  background-color: var(--tt-selection-color);
}
.tiptap.ProseMirror .ProseMirror-hideselection {
  caret-color: transparent;
}
.tiptap.ProseMirror.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

/* =====================
     TEXT DECORATION
     ===================== */
.tiptap.ProseMirror a span {
  text-decoration: underline;
}
.tiptap.ProseMirror s span {
  text-decoration: line-through;
}
.tiptap.ProseMirror u span {
  text-decoration: underline;
}
.tiptap.ProseMirror .tiptap-ai-insertion {
  color: var(--tiptap-ai-insertion-color);
}

/* =====================
     COLLABORATION
     ===================== */
.tiptap.ProseMirror .collaboration-carets__caret {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  pointer-events: none;
  margin-left: -1px;
  margin-right: -1px;
  position: relative;
  word-break: normal;
}
.tiptap.ProseMirror .collaboration-carets__label {
  color: var(--tt-collaboration-carets-label);
  border-radius: 0.25rem;
  border-bottom-left-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  left: -1px;
  line-height: 1;
  padding: 0.125rem 0.375rem;
  position: absolute;
  top: -1.3em;
  user-select: none;
  white-space: nowrap;
}

/* =====================
     EMOJI
     ===================== */
.tiptap.ProseMirror [data-type=emoji] img {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  cursor: text;
}

/* =====================
     LINKS
     ===================== */
.tiptap.ProseMirror a {
  color: var(--link-text-color);
  text-decoration: underline;
}

/* =====================
     MENTION
     ===================== */
.tiptap.ProseMirror [data-type=mention] {
  display: inline-block;
  color: var(--tt-brand-color-500);
}

/* =====================
     THREADS
     ===================== */
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline {
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  color: var(--thread-text);
  border-bottom: 2px dashed var(--tt-color-yellow-base);
  font-weight: 600;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--selected, .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--hovered {
  background-color: var(--thread-bg-color);
  border-bottom-color: transparent;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img) {
  outline: 0.125rem solid var(--tt-color-yellow-base);
  border-radius: var(--tt-radius-xs, 0.25rem);
  overflow: hidden;
  width: fit-content;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--selected {
  outline-width: 0.25rem;
  outline-color: var(--tt-color-yellow-base);
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--hovered {
  outline-width: 0.25rem;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)) {
  border-radius: 0.25rem;
  border-bottom: 0.125rem dashed var(--tt-color-yellow-base);
  padding-bottom: 0.5rem;
  outline: 0.25rem solid transparent;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--hovered, .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--selected {
  background-color: var(--tt-color-yellow-base);
  outline-color: var(--tt-color-yellow-base);
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--resolved.tiptap-thread--inline.tiptap-thread--selected {
  background-color: var(--tt-color-yellow-base);
  border-color: transparent;
  opacity: 0.5;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--block:has(.react-renderer) {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* =====================
     PLACEHOLDER
     ===================== */
.is-empty:not(.with-slash)[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
  content: attr(data-placeholder);
}

.is-empty.with-slash[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
  content: "Write, type '/' for commands…";
  font-style: italic;
}

.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child):before {
  pointer-events: none;
  height: 0;
  position: absolute;
  width: 100%;
  text-align: inherit;
  left: 0;
  right: 0;
}

.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak):before {
  color: var(--placeholder-color);
}

/* =====================
     DROPCURSOR
     ===================== */
.prosemirror-dropcursor-block,
.prosemirror-dropcursor-inline {
  background: var(--tt-brand-color-400) !important;
  border-radius: 0.25rem;
  margin-left: -1px;
  margin-right: -1px;
  width: 100%;
  height: 0.188rem;
  cursor: grabbing;
}

.tiptap.ProseMirror table {
  border-collapse: collapse;
  margin: 1rem 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--tt-gray-light-200);
}
.dark .tiptap.ProseMirror table {
  border-color: var(--tt-gray-dark-200);
}
.tiptap.ProseMirror td,
.tiptap.ProseMirror th {
  border: 1px solid var(--tt-gray-light-200);
  box-sizing: border-box;
  min-width: 1em;
  padding: 8px 12px;
  position: relative;
  vertical-align: top;
}
.dark .tiptap.ProseMirror td,
.dark .tiptap.ProseMirror th {
  border-color: var(--tt-gray-dark-200);
}
.tiptap.ProseMirror td > *,
.tiptap.ProseMirror th > * {
  margin-bottom: 0;
}
.tiptap.ProseMirror td p,
.tiptap.ProseMirror th p {
  color: var(--tt-theme-text);
  margin: 0;
}
.tiptap.ProseMirror th {
  background-color: var(--tt-gray-light-50);
  font-weight: 600;
  text-align: left;
  color: var(--tt-theme-text);
}
.dark .tiptap.ProseMirror th {
  background-color: var(--tt-gray-dark-50);
}
.tiptap.ProseMirror .selectedCell:after {
  background: rgba(59, 130, 246, 0.15);
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.tiptap.ProseMirror .column-resize-handle {
  background-color: var(--tt-primary-color);
  bottom: -2px;
  position: absolute;
  right: -2px;
  top: 0;
  width: 4px;
  cursor: col-resize;
}
.tiptap.ProseMirror .column-resize-handle:hover {
  background-color: var(--tt-primary-color-hover);
}
.tiptap.ProseMirror .tableWrapper {
  margin: 1.5rem 0;
  overflow-x: auto;
}
.tiptap.ProseMirror .tableWrapper::-webkit-scrollbar {
  height: 6px;
}
.tiptap.ProseMirror .tableWrapper::-webkit-scrollbar-track {
  background: var(--tt-gray-light-100);
  border-radius: 3px;
}
.dark .tiptap.ProseMirror .tableWrapper::-webkit-scrollbar-track {
  background: var(--tt-gray-dark-100);
}
.tiptap.ProseMirror .tableWrapper::-webkit-scrollbar-thumb {
  background: var(--tt-gray-light-300);
  border-radius: 3px;
}
.dark .tiptap.ProseMirror .tableWrapper::-webkit-scrollbar-thumb {
  background: var(--tt-gray-dark-300);
}
.tiptap.ProseMirror .tableWrapper::-webkit-scrollbar-thumb:hover {
  background: var(--tt-gray-light-400);
}
.dark .tiptap.ProseMirror .tableWrapper::-webkit-scrollbar-thumb:hover {
  background: var(--tt-gray-dark-400);
}
.tiptap.ProseMirror.resize-cursor {
  cursor: col-resize;
}
.tiptap.ProseMirror td.has-focus,
.tiptap.ProseMirror th.has-focus {
  box-shadow: inset 0 0 0 2px var(--tt-primary-color);
}
.tiptap.ProseMirror td p.is-empty:first-child::before,
.tiptap.ProseMirror th p.is-empty:first-child::before {
  color: var(--tt-gray-light-400);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}
.dark .tiptap.ProseMirror td p.is-empty:first-child::before,
.dark .tiptap.ProseMirror th p.is-empty:first-child::before {
  color: var(--tt-gray-dark-400);
}

.ProseMirror .ai-data-inline-node,
span.ai-data-inline-node {
  display: inline;
  border-bottom: 1px dashed rgb(139, 92, 246) !important;
  color: inherit !important;
  cursor: text;
  padding: 0 2px;
  transition: all 0.2s ease;
}
.ProseMirror .ai-data-inline-node:hover,
span.ai-data-inline-node:hover {
  background-color: rgba(139, 92, 246, 0.1);
  border-bottom-color: rgb(124, 58, 237) !important;
  border-bottom-style: solid !important;
  color: rgb(124, 58, 237) !important;
}
.ProseMirror .ai-data-inline-node.ProseMirror-selectednode,
span.ai-data-inline-node.ProseMirror-selectednode {
  background-color: rgba(139, 92, 246, 0.2);
  border-bottom: 2px solid rgb(124, 58, 237) !important;
  outline: none;
}

.ai-data-inline-node[data-loading=true] {
  opacity: 0.6;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  color: rgb(139, 92, 246) !important;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
}
.ai-data-inline-node .ai-data-text-content {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}