/* Tiptap editor (<tiptap-editor>) and checklist styles. Rendered content keeps
   using .trix-content typography from actiontext.css. */

tiptap-editor {
  display: block;
}

tiptap-editor .tiptap-toolbar {
  display: none;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 4px;
}

.consultation-rich-text.toolbar-open tiptap-editor .tiptap-toolbar {
  display: flex;
}

tiptap-editor .tiptap-button {
  min-width: 2em;
  padding: 0.2em 0.5em;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #fff;
  font: 11pt Verdana;
  line-height: 1.2;
  cursor: pointer;
}

tiptap-editor .tiptap-button:hover:not(:disabled) { background: #eef3ec; }
tiptap-editor .tiptap-button.is-active { background: #cfe0cb; border-color: #5c7a56; }
tiptap-editor .tiptap-button:disabled { opacity: 0.4; cursor: default; }
tiptap-editor .tiptap-button--bold { font-weight: bold; }
tiptap-editor .tiptap-button--italic { font-style: italic; }
tiptap-editor .tiptap-button--underline { text-decoration: underline; }
tiptap-editor .tiptap-button--strike { text-decoration: line-through; }

/* The native colour picker is opened by the 🎨 button; the input stays out of sight. */
tiptap-editor .tiptap-color-input {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

tiptap-editor .tiptap-toolbar { position: relative; }

tiptap-editor .tiptap-content {
  border: 1px solid #bbb;
  border-radius: 3px;
  padding: 0.4em 0.6em;
  min-height: 5em;
  overflow-y: auto;
  overflow-x: hidden;
  outline: none;
}

tiptap-editor .tiptap-content:focus { border-color: #5c7a56; }
tiptap-editor .tiptap-content p { margin: 0 0 0.4em; }

tiptap-editor .tiptap-status {
  min-height: 1.2em;
  margin-top: 2px;
  font: 9pt Verdana;
  color: #777;
}

tiptap-editor .tiptap-status[data-state="saving"] { color: #8a6d00; }
tiptap-editor .tiptap-status[data-state="offline"],
tiptap-editor .tiptap-status[data-state="error"] { color: #b00020; }

/* Checklists: tick a box and the whole line is struck through. */
.trix-content ul[data-type="taskList"] {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.trix-content ul[data-type="taskList"] li {
  margin-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

/* Undo the app-wide label rule (160px wide, right-aligned, capitalised). */
.trix-content ul[data-type="taskList"] li > label {
  flex: 0 0 auto;
  display: block;
  width: auto;
  margin: 0.25em 0 0;
  text-align: left;
  text-transform: none;
  user-select: none;
}

.trix-content ul[data-type="taskList"] li > div {
  flex: 1 1 auto;
}

.trix-content ul[data-type="taskList"] li > div > p { margin: 0; }

.trix-content ul[data-type="taskList"] li[data-checked="true"] > div {
  text-decoration: line-through;
  color: #777;
}

/* Saved content is read-only; ticking happens in the editor. */
.trix-content:not(.tiptap-content) ul[data-type="taskList"] input {
  pointer-events: none;
}

/* Remote collaborators' carets and name tags. */
.collaboration-carets__caret {
  position: relative;
  margin-left: -1px;
  margin-right: -1px;
  border-left: 1px solid #0d0d0d;
  border-right: 1px solid #0d0d0d;
  word-break: normal;
  pointer-events: none;
}

.collaboration-carets__label {
  position: absolute;
  top: -1.4em;
  left: -1px;
  padding: 0.1rem 0.3rem;
  border-radius: 3px 3px 3px 0;
  color: #fff;
  font: normal 600 10px/1.2 Verdana;
  white-space: nowrap;
  user-select: none;
}

tiptap-editor action-text-attachment {
  display: inline-block;
  vertical-align: bottom;
  max-width: 100%;
}