1
/* Overlay: block drag handle */
2
.drag-handle {
3
  display: none;
4
  z-index: 70;
5
}
6
 
7
@media (min-width: 640px) {
8
  .drag-handle {
9
    display: block;
10
  }
11
}
12
 
13
.tiptap-drag-handle-group {
14
  position: relative;
15
  display: flex;
16
  align-items: center;
17
  gap: 4px;
18
}
19
 
20
.tiptap-drag-handle {
21
  display: flex;
22
  align-items: center;
23
  justify-content: center;
24
  width: 20px;
25
  height: 20px;
26
  padding: 0;
27
  border: none;
28
  border-radius: 0.25rem;
29
  color: var(--color-zinc-500);
30
  background-color: var(--color-zinc-800);
31
  font: inherit;
32
  cursor: grab;
33
  transition:
34
    opacity 75ms,
35
    color 75ms,
36
    background-color 75ms;
37
}
38
 
39
.tiptap-drag-handle:hover {
40
  opacity: 1;
41
  color: var(--color-zinc-400);
42
  background-color: var(--color-zinc-800);
43
}
44
 
45
.tiptap-drag-handle.is-active {
46
  color: var(--color-accent-300);
47
  background-color: color-mix(in srgb, var(--color-accent-500) 14%, transparent);
48
}
49
 
50
.tiptap-drag-handle:active {
51
  cursor: grabbing;
52
  color: var(--color-zinc-300);
53
  background-color: var(--color-zinc-700);
54
}
55
 
56
.tiptap-drag-handle-add {
57
  cursor: pointer;
58
}
59
 
60
.tiptap-drag-handle-add:active {
61
  cursor: pointer;
62
}
63
 
64
.tiptap-block-menu {
65
  position: absolute;
66
  top: 0;
67
  left: calc(100% + 8px);
68
  display: flex;
69
  flex-direction: column;
70
  min-width: 180px;
71
  padding: 4px;
72
  background-color: var(--color-zinc-800);
73
  border: 1px solid var(--color-zinc-700);
74
  border-radius: 6px;
75
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
76
  pointer-events: auto;
77
  animation: var(--animate-menu);
78
  transform-origin: top left;
79
}
80
 
81
.tiptap-block-menu-item {
82
  display: flex;
83
  align-items: center;
84
  gap: 8px;
85
  width: 100%;
86
  min-height: 32px;
87
  padding: 6px 8px;
88
  background: none;
89
  border: none;
90
  color: var(--color-zinc-300);
91
  border-radius: 4px;
92
  font: inherit;
93
  font-size: 0.8125rem;
94
  text-align: left;
95
  cursor: pointer;
96
  transition:
97
    background-color 75ms,
98
    color 75ms;
99
}
100
 
101
.tiptap-block-menu-item:hover:not(:disabled),
102
.tiptap-block-menu-item:focus-visible {
103
  color: var(--color-zinc-100);
104
  background-color: var(--color-zinc-700);
105
  outline: none;
106
}
107
 
108
.tiptap-block-menu-item:disabled {
109
  opacity: 0.4;
110
  cursor: not-allowed;
111
}
112
 
113
.tiptap-block-menu-item.is-danger {
114
  color: #f87171;
115
}
116
 
117
.tiptap-block-menu-item.is-danger:hover:not(:disabled),
118
.tiptap-block-menu-item.is-danger:focus-visible {
119
  color: #fca5a5;
120
  background-color: rgba(239, 68, 68, 0.1);
121
}
122
 
123
.tiptap-block-menu-item-icon {
124
  display: flex;
125
  align-items: center;
126
  justify-content: center;
127
  width: 16px;
128
  color: var(--color-zinc-400);
129
}
130
 
131
.tiptap-block-menu-item:hover .tiptap-block-menu-item-icon,
132
.tiptap-block-menu-item:focus-visible .tiptap-block-menu-item-icon {
133
  color: inherit;
134
}
135
 
136
.tiptap-block-menu-item-label {
137
  flex: 1;
138
}
139
 
140
.tiptap-block-menu-sep {
141
  height: 1px;
142
  background-color: var(--color-zinc-800);
143
  margin: 4px 0;
144
}