.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);
}
.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 {
  align-items: center;
  display: flex;
  gap: 0.125rem;
  flex-direction: column;
}

.tiptap-button-group[data-orientation=vertical],
.tiptap-button-group [data-orientation=vertical] {
  flex-direction: column;
}
.tiptap-button-group[data-orientation=horizontal],
.tiptap-button-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-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 {
  pointer-events: none;
  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, .tiptap-button[data-active-item=true]:not([disabled]) {
  background-color: var(--tt-button-hover-bg-color);
  color: var(--tt-button-hover-text-color);
}
.tiptap-button:hover .tiptap-button-icon, .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-icon {
  color: var(--tt-button-hover-icon-color);
}
.tiptap-button:hover .tiptap-button-icon-sub, .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-icon-sub {
  color: var(--tt-button-hover-icon-sub-color);
}
.tiptap-button:hover .tiptap-button-dropdown-arrows,
.tiptap-button:hover .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 {
  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);
}