1
.tiptap-menu-surface,
2
.tiptap-slash-menu {
3
  display: flex;
4
  flex-direction: column;
5
  background-color: var(--color-zinc-800);
6
  border: 1px solid var(--color-zinc-700);
7
  border-radius: 0.75rem;
8
  box-shadow:
9
    0 10px 15px -3px rgba(0, 0, 0, 0.35),
10
    0 4px 6px -4px rgba(0, 0, 0, 0.35);
11
}
12
 
13
.tiptap-slash-menu {
14
  gap: 1px;
15
  padding: 6px;
16
  max-height: 320px;
17
  min-width: 220px;
18
  overflow-y: auto;
19
  animation: var(--animate-menu);
20
  transform-origin: top left;
21
}
22
 
23
.tiptap-menu-label,
24
.tiptap-slash-menu-label {
25
  color: var(--color-zinc-500);
26
  font-size: 0.75rem;
27
  font-weight: 500;
28
  letter-spacing: 0.08em;
29
  text-transform: uppercase;
30
  padding: 6px 10px 4px;
31
}
32
 
33
.tiptap-menu-item,
34
.tiptap-slash-menu-item {
35
  display: flex;
36
  align-items: center;
37
  gap: 10px;
38
  width: 100%;
39
  min-height: 32px;
40
  padding: 8px 10px;
41
  background: none;
42
  border: none;
43
  color: var(--color-zinc-300);
44
  border-radius: 0.5rem;
45
  font-size: 0.875rem;
46
  text-align: left;
47
  transition:
48
    background-color 75ms,
49
    color 75ms;
50
}
51
 
52
.tiptap-menu-item:hover:not(:disabled),
53
.tiptap-menu-item:focus-visible,
54
.tiptap-menu-item[aria-selected="true"],
55
.tiptap-slash-menu-item:hover:not(:disabled),
56
.tiptap-slash-menu-item:focus-visible,
57
.tiptap-slash-menu-item[aria-selected="true"] {
58
  background-color: var(--color-zinc-700);
59
  color: var(--color-zinc-100);
60
  outline: none;
61
}
62
 
63
.tiptap-menu-item:disabled,
64
.tiptap-slash-menu-item:disabled {
65
  opacity: 0.4;
66
  cursor: not-allowed;
67
}
68
 
69
.tiptap-menu-item.is-danger {
70
  color: #f87171;
71
}
72
 
73
.tiptap-menu-item.is-danger:hover:not(:disabled),
74
.tiptap-menu-item.is-danger:focus-visible {
75
  color: #fca5a5;
76
  background-color: rgba(239, 68, 68, 0.1);
77
}
78
 
79
.tiptap-menu-item.is-active {
80
  background-color: color-mix(in srgb, var(--color-accent-500) 10%, transparent);
81
  color: var(--color-accent-400);
82
}
83
 
84
.tiptap-menu-item.is-active:hover:not(:disabled),
85
.tiptap-menu-item.is-active:focus-visible {
86
  background-color: color-mix(in srgb, var(--color-accent-500) 18%, transparent);
87
  color: var(--color-accent-200);
88
}
89
 
90
.tiptap-menu-item-icon {
91
  display: flex;
92
  align-items: center;
93
  justify-content: center;
94
  width: 16px;
95
  color: var(--color-zinc-400);
96
}
97
 
98
.tiptap-menu-item:hover .tiptap-menu-item-icon,
99
.tiptap-menu-item:focus-visible .tiptap-menu-item-icon {
100
  color: inherit;
101
}
102
 
103
.tiptap-menu-item-label {
104
  flex: 1;
105
}
106
 
107
.tiptap-menu-separator {
108
  height: 1px;
109
  background-color: var(--color-zinc-700);
110
  margin: 4px 0;
111
}