1
/* Content: callout block */
2
.tiptap .tiptap-callout {
3
  position: relative;
4
  display: flex;
5
  flex-direction: column;
6
  gap: 0.375rem;
7
  margin: 0.75rem 0;
8
  padding: 0.75rem 1rem;
9
  border: 1px solid var(--color-zinc-700);
10
  border-radius: 0.75rem;
11
  background: var(--color-zinc-900);
12
  color: var(--color-zinc-100);
13
  overflow: clip;
14
}
15
 
16
.tiptap .tiptap-callout-kind-btn {
17
  align-self: flex-start;
18
  display: inline-flex;
19
  align-items: center;
20
  gap: 0.375rem;
21
  padding: 0.15rem 0.55rem;
22
  font-size: 0.75rem;
23
  font-weight: 500;
24
  line-height: 1.2;
25
  color: var(--color-zinc-100);
26
  background: var(--color-zinc-800);
27
  border: 1px solid var(--color-zinc-700);
28
  border-radius: 999px;
29
  cursor: pointer;
30
  user-select: none;
31
  transition:
32
    background-color 0.1s,
33
    border-color 0.1s,
34
    color 0.1s;
35
}
36
 
37
.tiptap .tiptap-callout-kind-btn:hover:not(:disabled):not([data-read-only]) {
38
  background: var(--color-zinc-700);
39
  border-color: var(--color-zinc-600);
40
}
41
 
42
.tiptap .tiptap-callout-kind-btn:focus-visible {
43
  outline: 1px solid var(--color-accent-500);
44
  outline-offset: 2px;
45
}
46
 
47
/* Read-only: drop the pill chrome so the kind label reads as an inline tag,
48
   not a clickable control. Icon + label keep their kind tint. */
49
.tiptap .tiptap-callout-kind-btn:disabled,
50
.tiptap .tiptap-callout-kind-btn[data-read-only] {
51
  cursor: default;
52
  background: transparent;
53
  border-color: transparent;
54
  padding-left: 0;
55
  padding-right: 0;
56
}
57
 
58
.tiptap .tiptap-callout[data-callout-kind="info"] .tiptap-callout-kind-btn {
59
  color: var(--color-callout-info);
60
}
61
.tiptap .tiptap-callout[data-callout-kind="tip"] .tiptap-callout-kind-btn {
62
  color: var(--color-callout-tip);
63
}
64
.tiptap .tiptap-callout[data-callout-kind="warning"] .tiptap-callout-kind-btn {
65
  color: var(--color-callout-warning);
66
}
67
 
68
.tiptap .tiptap-callout-body {
69
  min-width: 0;
70
}
71
 
72
.tiptap .tiptap-callout-body > :first-child {
73
  margin-top: 0;
74
}
75
 
76
.tiptap .tiptap-callout-body > :last-child {
77
  margin-bottom: 0;
78
}
79
 
80
/* Empty-callout placeholder — only in editable mode so shared read-only
81
   pages don't show editing prompts. */
82
.tiptap[contenteditable="true"]
83
  .tiptap-callout-body
84
  > p:only-child:has(> br.ProseMirror-trailingBreak:only-child)::before {
85
  content: "Say the thing.";
86
  float: left;
87
  height: 0;
88
  pointer-events: none;
89
  color: var(--color-zinc-500);
90
}
91
 
92
/* Overlay: callout kind menu */
93
.tiptap-callout-kind-menu {
94
  min-width: 180px;
95
  padding: 0.25rem;
96
  display: flex;
97
  flex-direction: column;
98
  gap: 1px;
99
}
100
 
101
.tiptap-callout-kind-item {
102
  display: inline-flex;
103
  gap: 0.5rem;
104
  align-items: center;
105
  width: 100%;
106
  padding: 0.375rem 0.5rem;
107
  font-size: 0.8125rem;
108
  color: var(--color-zinc-200);
109
  background: transparent;
110
  border: none;
111
  border-radius: 0.375rem;
112
  cursor: pointer;
113
  text-align: left;
114
  transition: background-color 0.1s;
115
}
116
 
117
.tiptap-callout-kind-item:hover {
118
  background: var(--color-zinc-700);
119
  color: var(--color-zinc-100);
120
}
121
 
122
.tiptap-callout-kind-item.is-active {
123
  background: color-mix(in srgb, var(--color-accent-500) 14%, transparent);
124
  color: var(--color-accent-200);
125
}
126
 
127
.tiptap-callout-kind-item.is-active:hover {
128
  background: color-mix(in srgb, var(--color-accent-500) 22%, transparent);
129
  color: var(--color-accent-100);
130
}