1
.tiptap-page-mention,
2
.tiptap a.tiptap-page-mention {
3
  display: inline-flex;
4
  align-items: center;
5
  gap: 4px;
6
  padding: 1px 6px;
7
  margin: 0 1px;
8
  border-radius: 4px;
9
  background-color: color-mix(in srgb, var(--color-zinc-500) 15%, transparent);
10
  color: var(--color-zinc-200);
11
  font-size: 0.95em;
12
  line-height: 1.4;
13
  text-decoration: none;
14
  cursor: pointer;
15
  transition: background-color 120ms ease;
16
  vertical-align: baseline;
17
  white-space: nowrap;
18
}
19
 
20
/* The page-mention static renderer emits an anchor for accessible links. The
21
   `.tiptap a` chain in `content.css` (color: accent + underline) has higher
22
   specificity than a single-class chip rule, so we double up here to make
23
   sure the chip styling wins regardless of variant. */
24
.tiptap a.tiptap-page-mention:hover {
25
  background-color: color-mix(in srgb, var(--color-zinc-500) 30%, transparent);
26
  color: var(--color-zinc-100);
27
  text-decoration: none;
28
}
29
 
30
.tiptap-page-mention:hover {
31
  background-color: color-mix(in srgb, var(--color-zinc-500) 30%, transparent);
32
  color: var(--color-zinc-100);
33
}
34
 
35
.tiptap-page-mention:focus-visible {
36
  outline: 2px solid rgb(var(--accent-500) / 0.6);
37
  outline-offset: 1px;
38
}
39
 
40
.tiptap-page-mention-label {
41
  border-bottom: 1px dashed color-mix(in srgb, var(--color-zinc-400) 50%, transparent);
42
}
43
 
44
.tiptap-page-mention:hover .tiptap-page-mention-label {
45
  border-bottom-color: color-mix(in srgb, var(--color-zinc-300) 70%, transparent);
46
}
47
 
48
.tiptap-page-mention-icon {
49
  display: inline-flex;
50
  align-items: center;
51
  justify-content: center;
52
  font-size: 0.9em;
53
  line-height: 1;
54
}
55
 
56
.tiptap-page-mention--pending {
57
  color: var(--color-zinc-500);
58
  cursor: default;
59
}
60
 
61
.tiptap-page-mention--pending .tiptap-page-mention-label {
62
  border-bottom-color: transparent;
63
}
64
 
65
.tiptap-page-mention--pending:hover {
66
  background-color: color-mix(in srgb, var(--color-zinc-500) 15%, transparent);
67
  color: var(--color-zinc-500);
68
}
69
 
70
.tiptap-page-mention--restricted {
71
  color: var(--color-zinc-500);
72
  cursor: default;
73
}
74
 
75
.tiptap-page-mention--restricted .tiptap-page-mention-label {
76
  border-bottom-color: transparent;
77
}
78
 
79
.tiptap-page-mention--restricted:hover {
80
  background-color: color-mix(in srgb, var(--color-zinc-500) 15%, transparent);
81
  color: var(--color-zinc-500);
82
}
83
 
84
.ProseMirror-selectednode.tiptap-page-mention,
85
.tiptap-page-mention.ProseMirror-selectednode {
86
  background-color: color-mix(in srgb, var(--color-accent-500) 25%, transparent);
87
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-500) 50%, transparent);
88
}
89
 
90
.tiptap-page-mention-picker-search {
91
  padding: 8px 8px 4px;
92
  border-bottom: 1px solid color-mix(in srgb, var(--color-zinc-500) 25%, transparent);
93
}
94
 
95
.tiptap-page-mention-picker-input {
96
  width: 100%;
97
  padding: 6px 8px;
98
  border: 1px solid color-mix(in srgb, var(--color-zinc-500) 30%, transparent);
99
  border-radius: 4px;
100
  background-color: color-mix(in srgb, var(--color-zinc-900) 80%, transparent);
101
  color: var(--color-zinc-200);
102
  font-size: 0.875rem;
103
  outline: none;
104
}
105
 
106
.tiptap-page-mention-picker-input::placeholder {
107
  color: var(--color-zinc-500);
108
}
109
 
110
.tiptap-page-mention-picker-input:focus {
111
  border-color: color-mix(in srgb, var(--color-accent-500) 60%, transparent);
112
  background-color: var(--color-zinc-900);
113
}