@gem-sdk/styles 1.27.9 → 1.28.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/toolbar.css +237 -49
  2. package/dist/toolbar.min.css +1 -1
  3. package/package.json +1 -1
  4. package/src/css/builds/toolbar.css +251 -49
package/dist/toolbar.css CHANGED
@@ -7,15 +7,16 @@
7
7
  position: absolute;
8
8
  z-index: 20;
9
9
  height: 24px;
10
- top: -23px;
10
+ top: -24px;
11
11
  left: 0;
12
12
  max-width: unset;
13
13
  display: flex;
14
14
  align-items: center;
15
15
  padding: 4px;
16
- color: #3c67ff;
17
- background: #fff;
16
+ color: #fff;
17
+ background: #3c67ff;
18
18
  border: solid 1px #3c67ff;
19
+ border-radius: 6px 6px 0 0;
19
20
  white-space: nowrap;
20
21
  pointer-events: unset;
21
22
  font-family: Inter, sans-serif, ui-sans-serif, system-ui;
@@ -24,7 +25,7 @@
24
25
  cursor: pointer;
25
26
  -webkit-user-select: none;
26
27
  user-select: none;
27
- transition: background 200ms ease-out;
28
+ transition: opacity 0ms ease-in-out;
28
29
  }
29
30
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent],
30
31
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] {
@@ -32,7 +33,7 @@
32
33
  align-items: center;
33
34
  }
34
35
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag], [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag] {
35
- display: block;
36
+ display: none;
36
37
  }
37
38
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag] svg, [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag] svg {
38
39
  display: block;
@@ -53,26 +54,41 @@
53
54
  }
54
55
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] {
55
56
  position: absolute;
56
- top: -24px;
57
- left: -1px;
58
- height: 24px;
59
- padding: 4px;
57
+ top: -32px;
58
+ left: 0px;
59
+ height: 32px;
60
+ padding: 8px;
60
61
  opacity: 1;
61
62
  visibility: visible;
62
63
  z-index: 30;
63
- color: #3c67ff;
64
+ color: #fff;
64
65
  background: #fff;
65
- border: solid 1px #3c67ff;
66
+ border-radius: 8px;
67
+ background: #3c67ff;
66
68
  }
67
69
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:hover {
68
- background: #c5d2ff;
70
+ background: #7190ff;
71
+ }
72
+ /* fix hover parent */
73
+ [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:before {
74
+ content: '';
75
+ width: 100%;
76
+ height: 4px;
77
+ background: transparent;
78
+ bottom: -4px;
79
+ left: 0;
80
+ position: absolute;
81
+ }
82
+ [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-parent-revert='true']:before {
83
+ bottom: unset;
84
+ top: -4px;
69
85
  }
70
86
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section='true'] {
71
- border: solid 1px #9144da;
72
- color: #9144da;
87
+ background-color: #9144da;
88
+ color: #fff;
73
89
  }
74
90
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section='true']:hover {
75
- background: #ebddf8;
91
+ background-color: #af7edd;
76
92
  }
77
93
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section='true'][data-toolbar-hover-focus] {
78
94
  background: #ebddf8;
@@ -101,8 +117,14 @@
101
117
  display: none;
102
118
  }
103
119
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'] {
104
- color: #9144da;
105
- border: solid 1px #9144da;
120
+ background-color: #9144da;
121
+ color: #fff;
122
+ }
123
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active] [data-toolbar-show-parent]:before {
124
+ background-color: #af7edd;
125
+ }
126
+ [data-toolbar-wrap] [data-toolbar-theme-section='true'] [data-toolbar-duplicate] {
127
+ border-color: #be86f3;
106
128
  }
107
129
  /* State Toolbar */
108
130
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover],
@@ -110,9 +132,11 @@
110
132
  opacity: 1;
111
133
  visibility: visible;
112
134
  z-index: 30;
135
+ border-width: 0;
136
+ transition-delay: 100ms;
113
137
  }
114
138
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover {
115
- background: #c5d2ff;
139
+ background: #3c67ff;
116
140
  border-color: #3c67ff;
117
141
  }
118
142
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover [data-toolbar-create-theme-section], [data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover [data-toolbar-create-theme-section] {
@@ -120,23 +144,25 @@
120
144
  }
121
145
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover-revert] {
122
146
  top: calc(100% - 1px);
147
+ border-radius: 0 0 6px 6px;
123
148
  }
124
149
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover-inside] {
125
150
  top: 0;
151
+ border-radius: 0 0 6px 6px;
126
152
  }
127
153
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus] {
128
- background: #d8e1ff;
154
+ background: #3c67ff;
129
155
  z-index: 40;
130
156
  }
131
157
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]:hover {
132
- background: #c5d2ff;
158
+ background: #3c67ff;
133
159
  }
134
160
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover][data-toolbar-hover-focus] {
135
- background: #ebddf8;
161
+ background: #9144da;
162
+ padding: 4px;
136
163
  }
137
164
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover]:hover {
138
- background: #ebddf8;
139
- border-color: #9144da;
165
+ background: #9144da;
140
166
  }
141
167
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active]:hover {
142
168
  background: #9144da;
@@ -146,18 +172,20 @@
146
172
  visibility: visible;
147
173
  z-index: 20;
148
174
  height: 32px;
149
- top: -31px;
150
- background: #3c67ff;
175
+ top: -35px;
176
+ background: #151515;
177
+ border-color: #424242;
151
178
  color: #fff;
179
+ border-radius: 8px;
152
180
  }
153
181
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active]:hover {
154
- background: #3c67ff;
182
+ background: #151515;
155
183
  }
156
184
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus] {
157
- background: #3c67ff;
185
+ background: #151515;
158
186
  }
159
187
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus]:hover {
160
- background: #3c67ff;
188
+ background: #151515;
161
189
  }
162
190
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section='true'] {
163
191
  background: #9144da;
@@ -167,9 +195,30 @@
167
195
  }
168
196
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] {
169
197
  padding: 4px;
170
- border-radius: 2px;
198
+ margin-right: 9px;
199
+ border-radius: 6px;
171
200
  transition: background 200ms ease-in-out;
201
+ position: relative;
202
+ height: 24px;
172
203
  }
204
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:before {
205
+ position: absolute;
206
+ content: '';
207
+ background: #424242;
208
+ width: 1px;
209
+ height: calc(100% - 4px);
210
+ right: -5px;
211
+ top: 2px;
212
+ }
213
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:before {
214
+ position: absolute;
215
+ content: '';
216
+ background: #424242;
217
+ width: 1px;
218
+ height: calc(100% - 4px);
219
+ right: -4px;
220
+ top: 2px;
221
+ }
173
222
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] {
174
223
  display: block;
175
224
  transition: -webkit-transform 200ms ease-in-out;
@@ -189,13 +238,16 @@
189
238
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:hover {
190
239
  background: rgba(225, 225, 225, 0.2);
191
240
  }
241
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-drag] {
242
+ display: block;
243
+ }
192
244
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate],
193
245
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete],
194
246
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out],
195
247
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] {
196
248
  display: block;
197
249
  padding: 4px;
198
- border-radius: 2px;
250
+ border-radius: 6px;
199
251
  transition: background 200ms ease-in-out;
200
252
  }
201
253
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] svg {
@@ -216,8 +268,8 @@
216
268
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section-wrapper] {
217
269
  padding: 0 4px;
218
270
  margin: 0 4px;
219
- border-left: solid 1px #7190ff;
220
- border-right: solid 1px #7190ff;
271
+ border-left: solid 1px #6a6a6a;
272
+ border-right: solid 1px #6a6a6a;
221
273
  }
222
274
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] {
223
275
  display: flex !important;
@@ -231,23 +283,29 @@
231
283
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-create-theme-section] {
232
284
  display: none;
233
285
  }
286
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active-overflow],
287
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-hover-overflow] {
288
+ left: unset;
289
+ right: 0;
290
+ }
234
291
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active-revert] {
235
- top: calc(100% - 1px);
292
+ top: calc(100% + 3px);
236
293
  }
237
294
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active-inside] {
238
- top: 0;
295
+ top: 4px;
239
296
  }
240
297
  [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'] {
241
298
  left: unset;
242
299
  right: 0;
243
- border-color: #d6d6d6;
300
+ border-color: #424242;
244
301
  }
245
- [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus] [data-toolbar-create-theme-section] {
246
- border-color: #3c67ff;
302
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus]
303
+ [data-toolbar-create-theme-section] {
304
+ border-color: #424242;
247
305
  }
248
306
  [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus],
249
307
  [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-active] {
250
- border-color: #3c67ff;
308
+ border-color: #424242;
251
309
  }
252
310
  [data-toolbar-wrap] [data-toolbar][data-toolbar-editor-inline-focus] {
253
311
  display: none;
@@ -286,6 +344,7 @@
286
344
  pointer-events: none;
287
345
  opacity: 0;
288
346
  visibility: hidden;
347
+ transition: opacity 0ms ease-in-out;
289
348
  }
290
349
  /* State Outline */
291
350
  [data-toolbar-wrap] [data-outline][data-outline-hover],
@@ -293,6 +352,7 @@
293
352
  opacity: 1;
294
353
  visibility: visible;
295
354
  z-index: 1;
355
+ transition-delay: 100ms;
296
356
  }
297
357
  [data-toolbar-wrap] [data-outline][data-outline-active] {
298
358
  opacity: 1;
@@ -301,18 +361,19 @@
301
361
  }
302
362
  [data-toolbar-wrap] [data-outline][data-outline-overlay],
303
363
  [data-toolbar-wrap] [data-outline][data-outline-force-overlay] {
304
- background: rgba(60, 103, 255, 0.2);
364
+ background: rgba(60, 103, 255, 0.1);
365
+ transition-delay: 0ms;
305
366
  }
306
367
  [data-toolbar-wrap] [data-outline][data-outline-overlay][data-outline-theme-section='true'],
307
368
  [data-toolbar-wrap] [data-outline][data-outline-force-overlay][data-outline-theme-section='true'] {
308
369
  background: #ebddf866;
309
370
  }
310
371
  [data-toolbar-wrap] [data-outline][data-outline-overlay-theme-section] {
311
- background: #ebddf83d;
372
+ background: transparent;
312
373
  }
313
374
  [data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-section='true'] {
314
- border-color: #d6d6d6;
315
- z-index: -1;
375
+ border-color: #3c67ff;
376
+ z-index: 0;
316
377
  }
317
378
  [data-toolbar-wrap] [data-outline][data-outline-section='true'][data-outline-hover-focus],
318
379
  [data-toolbar-wrap] [data-outline][data-outline-section='true'][data-outline-active] {
@@ -334,6 +395,13 @@
334
395
  height: calc(100% + 4px);
335
396
  z-index: 0;
336
397
  }
398
+ /* disable divider */
399
+ [data-toolbar-wrap] [data-component-tag='Section'] > [data-toolbar] [data-toolbar-show-parent] {
400
+ margin-right: 0px;
401
+ }
402
+ [data-toolbar-wrap] [data-component-tag='Section'] > [data-toolbar] [data-toolbar-show-parent]:before {
403
+ display: none;
404
+ }
337
405
  [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'],
338
406
  [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'][data-outline-hover-focus],
339
407
  [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'][data-outline-active] {
@@ -346,6 +414,21 @@
346
414
  [data-toolbar-wrap] [data-outline][data-outline-limit='true'] {
347
415
  border-color: #f44336;
348
416
  }
417
+ [data-toolbar-wrap] [data-outline][data-outline-parent-hover],
418
+ [data-toolbar-wrap] [data-outline][data-outline-section][data-outline-parent-hover] {
419
+ border-style: dashed;
420
+ }
421
+ /* disable delay animation on theme section */
422
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus],
423
+ [data-toolbar-wrap] [data-theme-section] [data-outline][data-outline-hover][data-outline-hover-focus],
424
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar-add-top],
425
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar-add-bottom] {
426
+ transition-delay: 0ms;
427
+ }
428
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar-add-top],
429
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar-add-bottom] {
430
+ border-color: #9144da;
431
+ }
349
432
  [data-toolbar-wrap] [data-theme-section] .button-text::after {
350
433
  display: none !important;
351
434
  }
@@ -400,17 +483,22 @@
400
483
  align-items: center;
401
484
  background: #fff;
402
485
  color: #3c67ff;
403
- border: solid 1px #d6d6d6;
404
- border-radius: 3px;
486
+ border: solid 1px #3c67ff;
487
+ border-radius: 8px;
405
488
  cursor: pointer;
406
489
  position: absolute;
407
490
  z-index: 50;
408
491
  left: calc(50% - 16px);
409
492
  top: -16px;
410
- display: none;
493
+ display: flex;
494
+ opacity: 0;
495
+ visibility: hidden;
411
496
  -webkit-user-select: none;
412
497
  user-select: none;
413
- transition: border-color 200ms ease-in-out;
498
+ transition:
499
+ border-color 200ms ease-in-out,
500
+ opacity 0ms ease-in-out;
501
+ transition-delay: 100ms;
414
502
  }
415
503
  [data-toolbar-wrap] [data-toolbar-add-top] svg, [data-toolbar-wrap] [data-toolbar-add-bottom] svg {
416
504
  width: 16px;
@@ -420,7 +508,7 @@
420
508
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
421
509
  }
422
510
  [data-toolbar-wrap] [data-toolbar-add-top]:hover, [data-toolbar-wrap] [data-toolbar-add-bottom]:hover {
423
- border-color: #3c67ff;
511
+ background-color: #f6f6f6;
424
512
  }
425
513
  [data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-disable='true'], [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-disable='true'] {
426
514
  background: #f4f4f4;
@@ -443,11 +531,13 @@
443
531
  }
444
532
  [data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-hover],
445
533
  [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-hover] {
446
- display: flex;
534
+ opacity: 1;
535
+ visibility: visible;
447
536
  }
448
537
  [data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-active],
449
538
  [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-active] {
450
- display: flex;
539
+ opacity: 1;
540
+ visibility: visible;
451
541
  }
452
542
  /* Resize spacing */
453
543
  [data-toolbar-wrap] [data-spacing] {
@@ -749,3 +839,101 @@
749
839
  .theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more:hover {
750
840
  color: #b1c3ff;
751
841
  }
842
+
843
+ /* Toolbar onboarding */
844
+
845
+ [data-toolbar-onboarding] {
846
+ position: absolute;
847
+ left: 0;
848
+ top: 0;
849
+ width: 320px;
850
+ background-color: #fff;
851
+ color:rgba(60, 103, 255, 0.24);
852
+ border-radius: 8px;
853
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
854
+ z-index: 40;
855
+ visibility: hidden;
856
+ opacity: 0;
857
+ }
858
+
859
+ [data-toolbar-onboarding][data-onboarding-active]{
860
+ visibility: visible;
861
+ opacity: 1;
862
+ transition: opacity .25s;
863
+ }
864
+
865
+ [data-toolbar-onboarding] [data-onboarding-wrapper] {
866
+
867
+ }
868
+
869
+ [data-toolbar-onboarding] [data-icon] {
870
+ position: absolute;
871
+ top: -4px;
872
+ left: 16px;
873
+ /* Popover */
874
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
875
+ }
876
+
877
+ [data-toolbar-onboarding] [data-icon][data-position="top"] {
878
+ top: unset;
879
+ bottom: -4px;
880
+ }
881
+
882
+ [data-toolbar-onboarding] [data-close] {
883
+ position: absolute;
884
+ top: 8px;
885
+ right: 8px;
886
+ z-index: 99;
887
+ border-radius: 8px;
888
+ background-color: transparent;
889
+ transition: background .25s;
890
+ }
891
+
892
+ [data-toolbar-onboarding] [data-close]:hover {
893
+ background-color: #E2E2E2;
894
+ }
895
+
896
+ [data-toolbar-onboarding] [data-close] svg {
897
+ -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
898
+ filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
899
+ }
900
+
901
+ [data-toolbar-onboarding] [data-content] {
902
+ padding: 16px;
903
+ }
904
+
905
+ [data-toolbar-onboarding] video {
906
+ border-radius: 8px 8px 0 0;
907
+ }
908
+
909
+ [data-toolbar-onboarding] h3 {
910
+ color: #212121;
911
+ font-family: Inter;
912
+ font-size: 16px;
913
+ font-style: normal;
914
+ font-weight: 600;
915
+ line-height: 24px; /* 150% */
916
+ letter-spacing: -0.32px;
917
+ }
918
+
919
+ [data-toolbar-onboarding] p{
920
+ color: #676767;
921
+ font-family: Inter;
922
+ font-size: 14px;
923
+ font-style: normal;
924
+ font-weight: 400;
925
+ line-height: 24px; /* 171.429% */
926
+ }
927
+
928
+ @media (max-width: 767px) {
929
+ [data-toolbar-wrap] [data-toolbar-add-top], [data-toolbar-wrap] [data-toolbar-add-bottom] {
930
+ width: 28px;
931
+ height: 28px;
932
+ left: calc(50% - 14px);
933
+ top: -14px;
934
+ }
935
+ [data-toolbar-wrap] [data-toolbar-add-bottom] {
936
+ top: unset;
937
+ bottom: -14px;
938
+ }
939
+ }
package/dist/toolbar.min.css CHANGED
@@ -1 +1 @@
1
- [data-toolbar-wrap]{position:relative}[data-toolbar-wrap] [data-toolbar]{align-items:center;background:#fff;border:1px solid #3c67ff;color:#3c67ff;cursor:pointer;display:flex;font-family:Inter,sans-serif,ui-sans-serif,system-ui;height:24px;left:0;max-width:unset;opacity:0;padding:4px;pointer-events:unset;position:absolute;top:-23px;transition:background .2s ease-out;-webkit-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;z-index:20}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent]{align-items:center;display:flex}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag]{display:block}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag] svg,[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-name],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-name]{display:block;font-size:12px;font-weight:500;padding-left:4px;padding-right:4px;white-space:nowrap}[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent]{cursor:grab}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]{background:#fff;border:1px solid #3c67ff;color:#3c67ff;height:24px;left:-1px;opacity:1;padding:4px;position:absolute;top:-24px;visibility:visible;z-index:30}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:hover{background:#c5d2ff}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true]{border:1px solid #9144da;color:#9144da}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true]:hover,[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true][data-toolbar-hover-focus]:hover{background:#ebddf8}[data-toolbar-wrap] [data-toolbar] [data-toolbar-create-theme-section]{border-left:1px solid;border-color:#d6d6d6;font-size:12px;font-weight:500;line-height:16px;margin-bottom:8px;margin-left:4px;margin-top:8px;padding-left:8px;padding-right:4px}[data-toolbar-wrap] [data-toolbar] [data-toolbar-active-create-theme-section],[data-toolbar-wrap] [data-toolbar] [data-toolbar-delete],[data-toolbar-wrap] [data-toolbar] [data-toolbar-duplicate],[data-toolbar-wrap] [data-toolbar] [data-toolbar-icon-parent],[data-toolbar-wrap] [data-toolbar] [data-toolbar-zoom-out]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true]{border:1px solid #9144da;color:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]{opacity:1;visibility:visible;z-index:30}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover{background:#c5d2ff;border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover [data-toolbar-create-theme-section]{border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover-revert]{top:calc(100% - 1px)}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover-inside]{top:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]{background:#d8e1ff;z-index:40}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]:hover{background:#c5d2ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover][data-toolbar-hover-focus]{background:#ebddf8}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover]:hover{background:#ebddf8;border-color:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-active]:hover{background:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active]{background:#3c67ff;color:#fff;height:32px;opacity:1;top:-31px;visibility:visible;z-index:20}[data-toolbar-wrap] [data-toolbar][data-toolbar-active]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus]:hover{background:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section=true][data-toolbar-hover-focus]{background:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]{border-radius:2px;padding:4px;transition:background .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent]{display:block;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent][data-toolbar-icon-parent-open=true]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:hover{background:hsla(0,0%,88%,.2)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out]{border-radius:2px;display:block;padding:4px;transition:background .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out]:hover{background:hsla(0,0%,88%,.2)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable=true] svg{opacity:.4}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable=true]:hover{background:transparent}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section-wrapper]{border-left:1px solid #7190ff;border-right:1px solid #7190ff;margin:0 4px;padding:0 4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section]{align-items:center;display:flex!important;gap:4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] p{font-size:12px;font-weight:500}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-create-theme-section]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-active-revert]{top:calc(100% - 1px)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active-inside]{top:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true]{border-color:#d6d6d6;left:unset;right:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-active],[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-hover-focus] [data-toolbar-create-theme-section]{border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-editor-inline-focus]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-active],[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover-focus]{border-color:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true]{background:#f44336;border-color:#f44336;color:#fff}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true] [data-toolbar-create-theme-section]{border-color:#fff}[data-toolbar-wrap] [data-outline]{border:1px solid #3c67ff;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;visibility:hidden;width:100%;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-active],[data-toolbar-wrap] [data-outline][data-outline-force-hover],[data-toolbar-wrap] [data-outline][data-outline-hover]{opacity:1;visibility:visible;z-index:1}[data-toolbar-wrap] [data-outline][data-outline-force-overlay],[data-toolbar-wrap] [data-outline][data-outline-overlay]{background:rgba(60,103,255,.2)}[data-toolbar-wrap] [data-outline][data-outline-force-overlay][data-outline-theme-section=true],[data-toolbar-wrap] [data-outline][data-outline-overlay][data-outline-theme-section=true]{background:#ebddf866}[data-toolbar-wrap] [data-outline][data-outline-overlay-theme-section]{background:#ebddf83d}[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-section=true]{border-color:#d6d6d6;z-index:-1}[data-toolbar-wrap] [data-outline][data-outline-section=true][data-outline-active],[data-toolbar-wrap] [data-outline][data-outline-section=true][data-outline-hover-focus]{border-color:#3c67ff;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-editor-inline-focus]{border-color:transparent;outline:unset;z-index:0}[data-toolbar-wrap] [data-component-tag=Heading] [data-outline][data-outline-editor-inline-focus],[data-toolbar-wrap] [data-component-tag=Text] [data-outline][data-outline-editor-inline-focus]{border-color:#3c67ff;height:calc(100% + 4px);left:-2px;outline:4px solid rgba(60,103,255,.24);top:-2px;width:calc(100% + 4px);z-index:0}[data-toolbar-wrap] [data-outline][data-outline-theme-section=true],[data-toolbar-wrap] [data-outline][data-outline-theme-section=true][data-outline-active],[data-toolbar-wrap] [data-outline][data-outline-theme-section=true][data-outline-hover-focus]{border-color:#9144da;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-active][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-hover-focus][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-limit=true]{border-color:#f44336}[data-toolbar-wrap] [data-theme-section] .button-text:after{display:none!important}[data-toolbar-wrap] [data-theme-section] .gp-text:hover{border-color:transparent!important}[data-toolbar-wrap] [data-theme-section-status]{align-items:center;background:#ebddf8;border-radius:3px;color:#212121;display:none;font-size:14px;font-weight:400;gap:4px;left:8px;line-height:24px;max-width:32px;overflow:hidden;padding:4px;position:absolute;top:8px;transition:max-width 1s ease-in-out;z-index:50}[data-toolbar-wrap] [data-theme-section-status-active=true]{display:flex}[data-toolbar-wrap] [data-theme-section-status-icon]{align-items:center;cursor:pointer;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px}[data-toolbar-wrap] [data-theme-section-status-text]{display:block;white-space:nowrap}[data-toolbar-wrap] [data-theme-section-status]:hover{max-width:100%}[data-toolbar-wrap] [data-toolbar-add-bottom],[data-toolbar-wrap] [data-toolbar-add-top]{align-items:center;background:#fff;border:1px solid #d6d6d6;border-radius:3px;color:#3c67ff;cursor:pointer;display:flex;display:none;height:32px;justify-content:center;left:calc(50% - 16px);position:absolute;top:-16px;transition:border-color .2s ease-in-out;-webkit-user-select:none;user-select:none;width:32px;z-index:50}[data-toolbar-wrap] [data-toolbar-add-bottom] svg,[data-toolbar-wrap] [data-toolbar-add-top] svg{height:16px;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;width:16px}[data-toolbar-wrap] [data-toolbar-add-bottom]:hover,[data-toolbar-wrap] [data-toolbar-add-top]:hover{border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-disable=true],[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-disable=true],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-disable=true]:hover{background:#f4f4f4;border-color:#d6d6d6;color:#d6d6d6}[data-toolbar-wrap] [data-toolbar-add-bottom]{bottom:-16px;top:unset}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-open=true] svg,[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-open=true] svg{-webkit-transform:rotate(45deg);transform:rotate(45deg)}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-active],[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-hover],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-active],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-hover]{display:flex}[data-toolbar-wrap] [data-spacing]{z-index:10}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom]{bottom:0;display:flex;display:none;justify-content:center;left:0;position:absolute;width:100%;z-index:10}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg]{align-items:center;background-color:#3c67ff33;display:flex;justify-content:center;left:0;position:absolute;top:0;width:100%}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg] [data-spacing-margin-bottom-value]{background-color:#3c67ff;border-radius:4px;color:#fff;display:none;font-size:8px;font-weight:700;padding:2px;position:absolute}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag]{background-color:#3c67ff;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;cursor:ns-resize;height:4px;position:absolute;-webkit-transform:translateY(-100%);transform:translateY(-100%);transition:height .2s;width:40px}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag]:hover{height:6px}[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-bg]{background-color:#9144da33}[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-bg] [data-spacing-margin-bottom-value],[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-drag]{background-color:#9144da}[data-toolbar-wrap] [data-spacing-margin-bottom][data-spacing-margin-bottom-active]{display:flex}[data-toolbar-wrap] [data-spacing][data-spacing-hidden]{display:none}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip]{background-color:#676767!important;border-radius:6px;color:#fff;font-size:16px;max-width:unset;opacity:0;padding:8px 12px;pointer-events:none;position:absolute;text-align:center;transition:opacity 1s;white-space:nowrap;width:unset;z-index:1}[data-toolbar-wrap] [data-toolbar-tooltip-trigger]:hover [data-toolbar-tooltip]{opacity:1}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=right]{left:105%;top:-5px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=right]:after{border:5px solid transparent;border-right-color:#676767;content:" ";margin-top:-5px;position:absolute;right:100%;top:50%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=left]{right:105%;top:-5px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=left]:after{border:5px solid transparent;border-left-color:#676767;content:" ";left:100%;margin-top:-5px;position:absolute;top:50%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=top]{bottom:105%;left:0}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=top]:after{border:5px solid transparent;border-top-color:#676767;content:" ";left:50%;margin-left:-5px;position:absolute;top:100%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=bottom]{left:0;top:105%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=bottom]:after{border:5px solid transparent;border-bottom-color:#676767;bottom:100%;content:" ";left:50%;margin-left:-5px;position:absolute}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate]{position:relative}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate] [data-toolbar-tooltip]{left:unset;margin-top:12px;right:0}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate] [data-toolbar-tooltip][data-toolbar-tooltip-position=bottom]:after{content:" ";left:unset;right:6px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-bottom] [data-toolbar-tooltip],[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-top] [data-toolbar-tooltip]{left:50%;margin-bottom:12px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}[data-toolbar-debug] [data-outline],[data-toolbar-debug] [data-toolbar]{opacity:1;visibility:visible}[data-toolbar-active=true] .theme-section-tooltip{padding-top:16px!important;right:-53px!important}[data-toolbar-active=true] .theme-section-tooltip:before{right:45%!important;top:12px!important}.theme-section-tooltip-wrapper{position:relative}.theme-section-tooltip-wrapper .theme-section-tooltip{border-radius:3px;cursor:default;display:flex;flex-direction:column;min-width:284px;padding-top:9px;position:absolute;right:-4px;top:100%}.theme-section-tooltip-wrapper .theme-section-tooltip:before{background:#212121;content:"";height:8px;position:absolute;right:16px;top:5px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:8px}.theme-section-tooltip-wrapper .theme-section-tooltip__image{background:#212121;border-radius:3px 3px 0 0;min-height:150px;padding:16px 20px 8px 21px}.theme-section-tooltip-wrapper .theme-section-tooltip__body{background:#151515;display:flex;flex-direction:column;gap:8px;padding:16px;white-space:normal}.theme-section-tooltip-wrapper .theme-section-tooltip__body-title{color:#f9f9f9;font-size:14px;font-weight:500;line-height:24px}.theme-section-tooltip-wrapper .theme-section-tooltip__body-desc{color:#aaa;font-size:14px;font-weight:400;line-height:24px}.theme-section-tooltip-wrapper .theme-section-tooltip__action{background:#151515;border-radius:0 0 3px 3px;border-top:1px solid #3b3b3b;display:flex;flex-direction:column;padding:16px}.theme-section-tooltip-wrapper .theme-section-tooltip__action button{background:#3c67ff;border-radius:3px;color:#f9f9f9;cursor:pointer;font-size:14px;font-weight:500;height:40px;line-height:24px;text-align:center;transition:all .15s ease-in;width:100%}.theme-section-tooltip-wrapper .theme-section-tooltip__action button:hover{background:#2856f8}.theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button{background:#fdb913!important;color:#212121!important}.theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button:hover{background:#fdc742!important}.theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more{color:#8aa4ff;cursor:pointer;font-size:12px;font-weight:500;line-height:20px;margin-top:8px;text-align:center;transition:all .15s ease-in}.theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more:hover{color:#b1c3ff}
1
+ [data-toolbar-wrap]{position:relative}[data-toolbar-wrap] [data-toolbar]{align-items:center;background:#3c67ff;border:1px solid #3c67ff;border-radius:6px 6px 0 0;color:#fff;cursor:pointer;display:flex;font-family:Inter,sans-serif,ui-sans-serif,system-ui;height:24px;left:0;max-width:unset;opacity:0;padding:4px;pointer-events:unset;position:absolute;top:-24px;transition:opacity 0ms ease-in-out;-webkit-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;z-index:20}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent]{align-items:center;display:flex}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag]{display:none}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag] svg,[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-name],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-name]{display:block;font-size:12px;font-weight:500;padding-left:4px;padding-right:4px;white-space:nowrap}[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent]{cursor:grab}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]{background:#fff;background:#3c67ff;border-radius:8px;color:#fff;height:32px;left:0;opacity:1;padding:8px;position:absolute;top:-32px;visibility:visible;z-index:30}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:hover{background:#7190ff}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:before{background:transparent;bottom:-4px;content:"";height:4px;left:0;position:absolute;width:100%}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-parent-revert=true]:before{bottom:unset;top:-4px}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true]{background-color:#9144da;color:#fff}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true]:hover{background-color:#af7edd}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true][data-toolbar-hover-focus]:hover{background:#ebddf8}[data-toolbar-wrap] [data-toolbar] [data-toolbar-create-theme-section]{border-left:1px solid;border-color:#d6d6d6;font-size:12px;font-weight:500;line-height:16px;margin-bottom:8px;margin-left:4px;margin-top:8px;padding-left:8px;padding-right:4px}[data-toolbar-wrap] [data-toolbar] [data-toolbar-active-create-theme-section],[data-toolbar-wrap] [data-toolbar] [data-toolbar-delete],[data-toolbar-wrap] [data-toolbar] [data-toolbar-duplicate],[data-toolbar-wrap] [data-toolbar] [data-toolbar-icon-parent],[data-toolbar-wrap] [data-toolbar] [data-toolbar-zoom-out]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true]{background-color:#9144da;color:#fff}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-active] [data-toolbar-show-parent]:before{background-color:#af7edd}[data-toolbar-wrap] [data-toolbar-theme-section=true] [data-toolbar-duplicate]{border-color:#be86f3}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]{border-width:0;opacity:1;transition-delay:.1s;visibility:visible;z-index:30}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover{background:#3c67ff;border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover [data-toolbar-create-theme-section]{border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover-revert]{border-radius:0 0 6px 6px;top:calc(100% - 1px)}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover-inside]{border-radius:0 0 6px 6px;top:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]{background:#3c67ff;z-index:40}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]:hover{background:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover][data-toolbar-hover-focus]{background:#9144da;padding:4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-active]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover]:hover{background:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active]{background:#151515;border-color:#424242;border-radius:8px;color:#fff;height:32px;opacity:1;top:-35px;visibility:visible;z-index:20}[data-toolbar-wrap] [data-toolbar][data-toolbar-active]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus]:hover{background:#151515}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section=true][data-toolbar-hover-focus]{background:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]{border-radius:6px;height:24px;margin-right:9px;padding:4px;position:relative;transition:background .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:before{background:#424242;content:"";height:calc(100% - 4px);position:absolute;right:-5px;right:-4px;top:2px;width:1px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent]{display:block;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent][data-toolbar-icon-parent-open=true]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:hover{background:hsla(0,0%,88%,.2)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-drag]{display:block}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out]{border-radius:6px;display:block;padding:4px;transition:background .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out]:hover{background:hsla(0,0%,88%,.2)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable=true] svg{opacity:.4}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable=true]:hover{background:transparent}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section-wrapper]{border-left:1px solid #6a6a6a;border-right:1px solid #6a6a6a;margin:0 4px;padding:0 4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section]{align-items:center;display:flex!important;gap:4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] p{font-size:12px;font-weight:500}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-create-theme-section]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-active-overflow],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover-overflow]{left:unset;right:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-active-revert]{top:calc(100% + 3px)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active-inside]{top:4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true]{border-color:#424242;left:unset;right:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-active],[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-hover-focus] [data-toolbar-create-theme-section]{border-color:#424242}[data-toolbar-wrap] [data-toolbar][data-toolbar-editor-inline-focus]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-active],[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover-focus]{border-color:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true]{background:#f44336;border-color:#f44336;color:#fff}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true] [data-toolbar-create-theme-section]{border-color:#fff}[data-toolbar-wrap] [data-outline]{border:1px solid #3c67ff;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity 0ms ease-in-out;visibility:hidden;width:100%;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-force-hover],[data-toolbar-wrap] [data-outline][data-outline-hover]{opacity:1;transition-delay:.1s;visibility:visible;z-index:1}[data-toolbar-wrap] [data-outline][data-outline-active]{opacity:1;visibility:visible;z-index:1}[data-toolbar-wrap] [data-outline][data-outline-force-overlay],[data-toolbar-wrap] [data-outline][data-outline-overlay]{background:rgba(60,103,255,.1);transition-delay:0ms}[data-toolbar-wrap] [data-outline][data-outline-force-overlay][data-outline-theme-section=true],[data-toolbar-wrap] [data-outline][data-outline-overlay][data-outline-theme-section=true]{background:#ebddf866}[data-toolbar-wrap] [data-outline][data-outline-overlay-theme-section]{background:transparent}[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-section=true],[data-toolbar-wrap] [data-outline][data-outline-section=true][data-outline-active],[data-toolbar-wrap] [data-outline][data-outline-section=true][data-outline-hover-focus]{border-color:#3c67ff;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-editor-inline-focus]{border-color:transparent;outline:unset;z-index:0}[data-toolbar-wrap] [data-component-tag=Heading] [data-outline][data-outline-editor-inline-focus],[data-toolbar-wrap] [data-component-tag=Text] [data-outline][data-outline-editor-inline-focus]{border-color:#3c67ff;height:calc(100% + 4px);left:-2px;outline:4px solid rgba(60,103,255,.24);top:-2px;width:calc(100% + 4px);z-index:0}[data-toolbar-wrap] [data-component-tag=Section]>[data-toolbar] [data-toolbar-show-parent]{margin-right:0}[data-toolbar-wrap] [data-component-tag=Section]>[data-toolbar] [data-toolbar-show-parent]:before{display:none}[data-toolbar-wrap] [data-outline][data-outline-theme-section=true],[data-toolbar-wrap] [data-outline][data-outline-theme-section=true][data-outline-active],[data-toolbar-wrap] [data-outline][data-outline-theme-section=true][data-outline-hover-focus]{border-color:#9144da;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-active][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-hover-focus][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-limit=true]{border-color:#f44336}[data-toolbar-wrap] [data-outline][data-outline-parent-hover],[data-toolbar-wrap] [data-outline][data-outline-section][data-outline-parent-hover]{border-style:dashed}[data-toolbar-wrap] [data-theme-section] [data-outline][data-outline-hover][data-outline-hover-focus],[data-toolbar-wrap] [data-theme-section] [data-toolbar-add-bottom],[data-toolbar-wrap] [data-theme-section] [data-toolbar-add-top],[data-toolbar-wrap] [data-theme-section] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]{transition-delay:0ms}[data-toolbar-wrap] [data-theme-section] [data-toolbar-add-bottom],[data-toolbar-wrap] [data-theme-section] [data-toolbar-add-top]{border-color:#9144da}[data-toolbar-wrap] [data-theme-section] .button-text:after{display:none!important}[data-toolbar-wrap] [data-theme-section] .gp-text:hover{border-color:transparent!important}[data-toolbar-wrap] [data-theme-section-status]{align-items:center;background:#ebddf8;border-radius:3px;color:#212121;display:none;font-size:14px;font-weight:400;gap:4px;left:8px;line-height:24px;max-width:32px;overflow:hidden;padding:4px;position:absolute;top:8px;transition:max-width 1s ease-in-out;z-index:50}[data-toolbar-wrap] [data-theme-section-status-active=true]{display:flex}[data-toolbar-wrap] [data-theme-section-status-icon]{align-items:center;cursor:pointer;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px}[data-toolbar-wrap] [data-theme-section-status-text]{display:block;white-space:nowrap}[data-toolbar-wrap] [data-theme-section-status]:hover{max-width:100%}[data-toolbar-wrap] [data-toolbar-add-bottom],[data-toolbar-wrap] [data-toolbar-add-top]{align-items:center;background:#fff;border:1px solid #3c67ff;border-radius:8px;color:#3c67ff;cursor:pointer;display:flex;height:32px;justify-content:center;left:calc(50% - 16px);opacity:0;position:absolute;top:-16px;transition:border-color .2s ease-in-out,opacity 0ms ease-in-out;transition-delay:.1s;-webkit-user-select:none;user-select:none;visibility:hidden;width:32px;z-index:50}[data-toolbar-wrap] [data-toolbar-add-bottom] svg,[data-toolbar-wrap] [data-toolbar-add-top] svg{height:16px;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;width:16px}[data-toolbar-wrap] [data-toolbar-add-bottom]:hover,[data-toolbar-wrap] [data-toolbar-add-top]:hover{background-color:#f6f6f6}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-disable=true],[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-disable=true],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-disable=true]:hover{background:#f4f4f4;border-color:#d6d6d6;color:#d6d6d6}[data-toolbar-wrap] [data-toolbar-add-bottom]{bottom:-16px;top:unset}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-open=true] svg,[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-open=true] svg{-webkit-transform:rotate(45deg);transform:rotate(45deg)}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-active],[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-hover],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-active],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-hover]{opacity:1;visibility:visible}[data-toolbar-wrap] [data-spacing]{z-index:10}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom]{bottom:0;display:flex;display:none;justify-content:center;left:0;position:absolute;width:100%;z-index:10}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg]{align-items:center;background-color:#3c67ff33;display:flex;justify-content:center;left:0;position:absolute;top:0;width:100%}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg] [data-spacing-margin-bottom-value]{background-color:#3c67ff;border-radius:4px;color:#fff;display:none;font-size:8px;font-weight:700;padding:2px;position:absolute}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag]{background-color:#3c67ff;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;cursor:ns-resize;height:4px;position:absolute;-webkit-transform:translateY(-100%);transform:translateY(-100%);transition:height .2s;width:40px}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag]:hover{height:6px}[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-bg]{background-color:#9144da33}[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-bg] [data-spacing-margin-bottom-value],[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-drag]{background-color:#9144da}[data-toolbar-wrap] [data-spacing-margin-bottom][data-spacing-margin-bottom-active]{display:flex}[data-toolbar-wrap] [data-spacing][data-spacing-hidden]{display:none}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip]{background-color:#676767!important;border-radius:6px;color:#fff;font-size:16px;max-width:unset;opacity:0;padding:8px 12px;pointer-events:none;position:absolute;text-align:center;transition:opacity 1s;white-space:nowrap;width:unset;z-index:1}[data-toolbar-wrap] [data-toolbar-tooltip-trigger]:hover [data-toolbar-tooltip]{opacity:1}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=right]{left:105%;top:-5px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=right]:after{border:5px solid transparent;border-right-color:#676767;content:" ";margin-top:-5px;position:absolute;right:100%;top:50%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=left]{right:105%;top:-5px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=left]:after{border:5px solid transparent;border-left-color:#676767;content:" ";left:100%;margin-top:-5px;position:absolute;top:50%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=top]{bottom:105%;left:0}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=top]:after{border:5px solid transparent;border-top-color:#676767;content:" ";left:50%;margin-left:-5px;position:absolute;top:100%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=bottom]{left:0;top:105%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=bottom]:after{border:5px solid transparent;border-bottom-color:#676767;bottom:100%;content:" ";left:50%;margin-left:-5px;position:absolute}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate]{position:relative}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate] [data-toolbar-tooltip]{left:unset;margin-top:12px;right:0}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate] [data-toolbar-tooltip][data-toolbar-tooltip-position=bottom]:after{content:" ";left:unset;right:6px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-bottom] [data-toolbar-tooltip],[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-top] [data-toolbar-tooltip]{left:50%;margin-bottom:12px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}[data-toolbar-debug] [data-outline],[data-toolbar-debug] [data-toolbar]{opacity:1;visibility:visible}[data-toolbar-active=true] .theme-section-tooltip{padding-top:16px!important;right:-53px!important}[data-toolbar-active=true] .theme-section-tooltip:before{right:45%!important;top:12px!important}.theme-section-tooltip-wrapper{position:relative}.theme-section-tooltip-wrapper .theme-section-tooltip{border-radius:3px;cursor:default;display:flex;flex-direction:column;min-width:284px;padding-top:9px;position:absolute;right:-4px;top:100%}.theme-section-tooltip-wrapper .theme-section-tooltip:before{background:#212121;content:"";height:8px;position:absolute;right:16px;top:5px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:8px}.theme-section-tooltip-wrapper .theme-section-tooltip__image{background:#212121;border-radius:3px 3px 0 0;min-height:150px;padding:16px 20px 8px 21px}.theme-section-tooltip-wrapper .theme-section-tooltip__body{background:#151515;display:flex;flex-direction:column;gap:8px;padding:16px;white-space:normal}.theme-section-tooltip-wrapper .theme-section-tooltip__body-title{color:#f9f9f9;font-size:14px;font-weight:500;line-height:24px}.theme-section-tooltip-wrapper .theme-section-tooltip__body-desc{color:#aaa;font-size:14px;font-weight:400;line-height:24px}.theme-section-tooltip-wrapper .theme-section-tooltip__action{background:#151515;border-radius:0 0 3px 3px;border-top:1px solid #3b3b3b;display:flex;flex-direction:column;padding:16px}.theme-section-tooltip-wrapper .theme-section-tooltip__action button{background:#3c67ff;border-radius:3px;color:#f9f9f9;cursor:pointer;font-size:14px;font-weight:500;height:40px;line-height:24px;text-align:center;transition:all .15s ease-in;width:100%}.theme-section-tooltip-wrapper .theme-section-tooltip__action button:hover{background:#2856f8}.theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button{background:#fdb913!important;color:#212121!important}.theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button:hover{background:#fdc742!important}.theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more{color:#8aa4ff;cursor:pointer;font-size:12px;font-weight:500;line-height:20px;margin-top:8px;text-align:center;transition:all .15s ease-in}.theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more:hover{color:#b1c3ff}[data-toolbar-onboarding]{background-color:#fff;border-radius:8px;box-shadow:0 4px 16px 0 rgba(0,0,0,.12),0 -4px 16px 0 rgba(0,0,0,.06);color:rgba(60,103,255,.24);left:0;opacity:0;position:absolute;top:0;visibility:hidden;width:320px;z-index:40}[data-toolbar-onboarding][data-onboarding-active]{opacity:1;transition:opacity .25s;visibility:visible}[data-toolbar-onboarding] [data-icon]{box-shadow:0 4px 16px 0 rgba(0,0,0,.12),0 -4px 16px 0 rgba(0,0,0,.06);left:16px;position:absolute;top:-4px}[data-toolbar-onboarding] [data-icon][data-position=top]{bottom:-4px;top:unset}[data-toolbar-onboarding] [data-close]{background-color:transparent;border-radius:8px;position:absolute;right:8px;top:8px;transition:background .25s;z-index:99}[data-toolbar-onboarding] [data-close]:hover{background-color:#e2e2e2}[data-toolbar-onboarding] [data-close] svg{-webkit-filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}[data-toolbar-onboarding] [data-content]{padding:16px}[data-toolbar-onboarding] video{border-radius:8px 8px 0 0}[data-toolbar-onboarding] h3{color:#212121;font-family:Inter;font-size:16px;font-style:normal;font-weight:600;letter-spacing:-.32px;line-height:24px}[data-toolbar-onboarding] p{color:#676767;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:24px}@media (max-width:767px){[data-toolbar-wrap] [data-toolbar-add-bottom],[data-toolbar-wrap] [data-toolbar-add-top]{height:28px;left:calc(50% - 14px);top:-14px;width:28px}[data-toolbar-wrap] [data-toolbar-add-bottom]{bottom:-14px;top:unset}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/styles",
3
- "version": "1.27.9",
3
+ "version": "1.28.2",
4
4
  "description": "Largely classless, blazing fast and super light-weight. Bonsai, a base CSS framework for modern browsers",
5
5
  "license": "MIT",
6
6
  "main": "src/index.js",
package/src/css/builds/toolbar.css CHANGED
@@ -6,15 +6,16 @@
6
6
  position: absolute;
7
7
  z-index: 20;
8
8
  height: 24px;
9
- top: -23px;
9
+ top: -24px;
10
10
  left: 0;
11
11
  max-width: unset;
12
12
  display: flex;
13
13
  align-items: center;
14
14
  padding: 4px;
15
- color: #3c67ff;
16
- background: #fff;
15
+ color: #fff;
16
+ background: #3c67ff;
17
17
  border: solid 1px #3c67ff;
18
+ border-radius: 6px 6px 0 0;
18
19
  white-space: nowrap;
19
20
  pointer-events: unset;
20
21
  font-family: Inter, sans-serif, ui-sans-serif, system-ui;
@@ -22,7 +23,7 @@
22
23
  visibility: hidden;
23
24
  cursor: pointer;
24
25
  user-select: none;
25
- transition: background 200ms ease-out;
26
+ transition: opacity 0ms ease-in-out;
26
27
 
27
28
  [data-toolbar-show-parent],
28
29
  [data-toolbar-parent] {
@@ -30,7 +31,7 @@
30
31
  align-items: center;
31
32
 
32
33
  [data-toolbar-icon-drag] {
33
- display: block;
34
+ display: none;
34
35
 
35
36
  svg {
36
37
  display: block;
@@ -56,28 +57,45 @@
56
57
 
57
58
  [data-toolbar-parent] {
58
59
  position: absolute;
59
- top: -24px;
60
- left: -1px;
61
- height: 24px;
62
- padding: 4px;
60
+ top: -32px;
61
+ left: 0px;
62
+ height: 32px;
63
+ padding: 8px;
63
64
  opacity: 1;
64
65
  visibility: visible;
65
66
  z-index: 30;
66
- color: #3c67ff;
67
+ color: #fff;
67
68
  background: #fff;
68
- border: solid 1px #3c67ff;
69
+ border-radius: 8px;
70
+ background: #3c67ff;
69
71
 
70
72
  &:hover {
71
- background: #c5d2ff;
73
+ background: #7190ff;
74
+ }
75
+
76
+ /* fix hover parent */
77
+ &:before {
78
+ content: '';
79
+ width: 100%;
80
+ height: 4px;
81
+ background: transparent;
82
+ bottom: -4px;
83
+ left: 0;
84
+ position: absolute;
85
+ }
86
+
87
+ &[data-toolbar-parent-revert='true']:before {
88
+ bottom: unset;
89
+ top: -4px;
72
90
  }
73
91
  }
74
92
 
75
93
  [data-toolbar-parent][data-toolbar-theme-section='true'] {
76
- border: solid 1px #9144da;
77
- color: #9144da;
94
+ background-color: #9144da;
95
+ color: #fff;
78
96
 
79
97
  &:hover {
80
- background: #ebddf8;
98
+ background-color: #af7edd;
81
99
  }
82
100
 
83
101
  &[data-toolbar-hover-focus] {
@@ -113,8 +131,18 @@
113
131
  }
114
132
 
115
133
  [data-toolbar][data-toolbar-theme-section='true'] {
116
- color: #9144da;
117
- border: solid 1px #9144da;
134
+ background-color: #9144da;
135
+ color: #fff;
136
+
137
+ &[data-toolbar-active] [data-toolbar-show-parent] {
138
+ &:before {
139
+ background-color: #af7edd;
140
+ }
141
+ }
142
+ }
143
+
144
+ [data-toolbar-theme-section='true'] [data-toolbar-duplicate] {
145
+ border-color: #be86f3;
118
146
  }
119
147
 
120
148
  /* State Toolbar */
@@ -123,9 +151,11 @@
123
151
  opacity: 1;
124
152
  visibility: visible;
125
153
  z-index: 30;
154
+ border-width: 0;
155
+ transition-delay: 100ms;
126
156
 
127
157
  &:hover {
128
- background: #c5d2ff;
158
+ background: #3c67ff;
129
159
  border-color: #3c67ff;
130
160
 
131
161
  [data-toolbar-create-theme-section] {
@@ -136,29 +166,31 @@
136
166
 
137
167
  [data-toolbar][data-toolbar-hover-revert] {
138
168
  top: calc(100% - 1px);
169
+ border-radius: 0 0 6px 6px;
139
170
  }
140
171
 
141
172
  [data-toolbar][data-toolbar-hover-inside] {
142
173
  top: 0;
174
+ border-radius: 0 0 6px 6px;
143
175
  }
144
176
 
145
177
  [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus] {
146
- background: #d8e1ff;
178
+ background: #3c67ff;
147
179
  z-index: 40;
148
180
 
149
181
  &:hover {
150
- background: #c5d2ff;
182
+ background: #3c67ff;
151
183
  }
152
184
  }
153
185
 
154
186
  [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover][data-toolbar-hover-focus] {
155
- background: #ebddf8;
187
+ background: #9144da;
188
+ padding: 4px;
156
189
  }
157
190
 
158
191
  [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover] {
159
192
  &:hover {
160
- background: #ebddf8;
161
- border-color: #9144da;
193
+ background: #9144da;
162
194
  }
163
195
  }
164
196
 
@@ -173,19 +205,21 @@
173
205
  visibility: visible;
174
206
  z-index: 20;
175
207
  height: 32px;
176
- top: -31px;
177
- background: #3c67ff;
208
+ top: -35px;
209
+ background: #151515;
210
+ border-color: #424242;
178
211
  color: #fff;
212
+ border-radius: 8px;
179
213
 
180
214
  &:hover {
181
- background: #3c67ff;
215
+ background: #151515;
182
216
  }
183
217
 
184
218
  &[data-toolbar-hover-focus] {
185
- background: #3c67ff;
219
+ background: #151515;
186
220
 
187
221
  &:hover {
188
- background: #3c67ff;
222
+ background: #151515;
189
223
  }
190
224
  }
191
225
 
@@ -199,8 +233,31 @@
199
233
 
200
234
  [data-toolbar-show-parent] {
201
235
  padding: 4px;
202
- border-radius: 2px;
236
+ margin-right: 9px;
237
+ border-radius: 6px;
203
238
  transition: background 200ms ease-in-out;
239
+ position: relative;
240
+ height: 24px;
241
+
242
+ &:before {
243
+ position: absolute;
244
+ content: '';
245
+ background: #424242;
246
+ width: 1px;
247
+ height: calc(100% - 4px);
248
+ right: -5px;
249
+ top: 2px;
250
+ }
251
+
252
+ &:before {
253
+ position: absolute;
254
+ content: '';
255
+ background: #424242;
256
+ width: 1px;
257
+ height: calc(100% - 4px);
258
+ right: -4px;
259
+ top: 2px;
260
+ }
204
261
 
205
262
  [data-toolbar-icon-parent] {
206
263
  display: block;
@@ -221,6 +278,10 @@
221
278
  &:hover {
222
279
  background: rgba(225, 225, 225, 0.2);
223
280
  }
281
+
282
+ [data-toolbar-icon-drag] {
283
+ display: block;
284
+ }
224
285
  }
225
286
 
226
287
  [data-toolbar-duplicate],
@@ -229,7 +290,7 @@
229
290
  [data-toolbar-active-create-theme-section] {
230
291
  display: block;
231
292
  padding: 4px;
232
- border-radius: 2px;
293
+ border-radius: 6px;
233
294
  transition: background 200ms ease-in-out;
234
295
 
235
296
  svg {
@@ -257,8 +318,8 @@
257
318
  [data-toolbar-active-create-theme-section-wrapper] {
258
319
  padding: 0 4px;
259
320
  margin: 0 4px;
260
- border-left: solid 1px #7190ff;
261
- border-right: solid 1px #7190ff;
321
+ border-left: solid 1px #6a6a6a;
322
+ border-right: solid 1px #6a6a6a;
262
323
  }
263
324
 
264
325
  [data-toolbar-active-create-theme-section] {
@@ -277,27 +338,34 @@
277
338
  }
278
339
  }
279
340
 
341
+ [data-toolbar][data-toolbar-active-overflow],
342
+ [data-toolbar][data-toolbar-hover-overflow] {
343
+ left: unset;
344
+ right: 0;
345
+ }
346
+
280
347
  [data-toolbar][data-toolbar-active-revert] {
281
- top: calc(100% - 1px);
348
+ top: calc(100% + 3px);
282
349
  }
283
350
 
284
351
  [data-toolbar][data-toolbar-active-inside] {
285
- top: 0;
352
+ top: 4px;
286
353
  }
287
354
 
288
355
  [data-toolbar][data-toolbar-section='true'] {
289
356
  left: unset;
290
357
  right: 0;
291
- border-color: #d6d6d6;
358
+ border-color: #424242;
292
359
  }
293
360
 
294
- [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus] [data-toolbar-create-theme-section] {
295
- border-color: #3c67ff;
361
+ [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus]
362
+ [data-toolbar-create-theme-section] {
363
+ border-color: #424242;
296
364
  }
297
365
 
298
366
  [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus],
299
367
  [data-toolbar][data-toolbar-section='true'][data-toolbar-active] {
300
- border-color: #3c67ff;
368
+ border-color: #424242;
301
369
  }
302
370
 
303
371
  [data-toolbar][data-toolbar-editor-inline-focus] {
@@ -335,6 +403,7 @@
335
403
  pointer-events: none;
336
404
  opacity: 0;
337
405
  visibility: hidden;
406
+ transition: opacity 0ms ease-in-out;
338
407
  }
339
408
 
340
409
  /* State Outline */
@@ -343,6 +412,7 @@
343
412
  opacity: 1;
344
413
  visibility: visible;
345
414
  z-index: 1;
415
+ transition-delay: 100ms;
346
416
  }
347
417
 
348
418
  [data-outline][data-outline-active] {
@@ -353,7 +423,8 @@
353
423
 
354
424
  [data-outline][data-outline-overlay],
355
425
  [data-outline][data-outline-force-overlay] {
356
- background: rgba(60, 103, 255, 0.2);
426
+ background: rgba(60, 103, 255, 0.1);
427
+ transition-delay: 0ms;
357
428
  }
358
429
 
359
430
  [data-outline][data-outline-overlay][data-outline-theme-section='true'],
@@ -362,12 +433,12 @@
362
433
  }
363
434
 
364
435
  [data-outline][data-outline-overlay-theme-section] {
365
- background: #ebddf83d;
436
+ background: transparent;
366
437
  }
367
438
 
368
439
  [data-outline][data-outline-hover][data-outline-section='true'] {
369
- border-color: #d6d6d6;
370
- z-index: -1;
440
+ border-color: #3c67ff;
441
+ z-index: 0;
371
442
  }
372
443
 
373
444
  [data-outline][data-outline-section='true'][data-outline-hover-focus],
@@ -396,6 +467,17 @@
396
467
  }
397
468
  }
398
469
 
470
+ [data-component-tag='Section'] {
471
+ /* disable divider */
472
+ > [data-toolbar] [data-toolbar-show-parent] {
473
+ margin-right: 0px;
474
+
475
+ &:before {
476
+ display: none;
477
+ }
478
+ }
479
+ }
480
+
399
481
  [data-outline][data-outline-theme-section='true'],
400
482
  [data-outline][data-outline-theme-section='true'][data-outline-hover-focus],
401
483
  [data-outline][data-outline-theme-section='true'][data-outline-active] {
@@ -410,7 +492,25 @@
410
492
  border-color: #f44336;
411
493
  }
412
494
 
495
+ [data-outline][data-outline-parent-hover],
496
+ [data-outline][data-outline-section][data-outline-parent-hover] {
497
+ border-style: dashed;
498
+ }
499
+
413
500
  [data-theme-section] {
501
+ /* disable delay animation on theme section */
502
+ [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus],
503
+ [data-outline][data-outline-hover][data-outline-hover-focus],
504
+ [data-toolbar-add-top],
505
+ [data-toolbar-add-bottom] {
506
+ transition-delay: 0ms;
507
+ }
508
+
509
+ [data-toolbar-add-top],
510
+ [data-toolbar-add-bottom] {
511
+ border-color: #9144da;
512
+ }
513
+
414
514
  .button-text::after {
415
515
  display: none !important;
416
516
  }
@@ -473,16 +573,30 @@
473
573
  align-items: center;
474
574
  background: #fff;
475
575
  color: #3c67ff;
476
- border: solid 1px #d6d6d6;
477
- border-radius: 3px;
576
+ border: solid 1px #3c67ff;
577
+ border-radius: 8px;
478
578
  cursor: pointer;
479
579
  position: absolute;
480
580
  z-index: 50;
481
581
  left: calc(50% - 16px);
482
582
  top: -16px;
483
- display: none;
583
+ display: flex;
584
+ opacity: 0;
585
+ visibility: hidden;
484
586
  user-select: none;
485
- transition: border-color 200ms ease-in-out;
587
+ transition:
588
+ border-color 200ms ease-in-out,
589
+ opacity 0ms ease-in-out;
590
+ transition-delay: 100ms;
591
+
592
+ @media (max-width: 767px) {
593
+ & {
594
+ width: 28px;
595
+ height: 28px;
596
+ left: calc(50% - 14px);
597
+ top: -14px;
598
+ }
599
+ }
486
600
 
487
601
  svg {
488
602
  width: 16px;
@@ -491,7 +605,7 @@
491
605
  }
492
606
 
493
607
  &:hover {
494
- border-color: #3c67ff;
608
+ background-color: #f6f6f6;
495
609
  }
496
610
 
497
611
  &[data-toolbar-disable='true'] {
@@ -510,6 +624,13 @@
510
624
  [data-toolbar-add-bottom] {
511
625
  top: unset;
512
626
  bottom: -16px;
627
+
628
+ @media (max-width: 767px) {
629
+ & {
630
+ top: unset;
631
+ bottom: -14px;
632
+ }
633
+ }
513
634
  }
514
635
 
515
636
  /* Active add state */
@@ -522,12 +643,14 @@
522
643
 
523
644
  [data-toolbar-add-top][data-toolbar-add-hover],
524
645
  [data-toolbar-add-bottom][data-toolbar-add-hover] {
525
- display: flex;
646
+ opacity: 1;
647
+ visibility: visible;
526
648
  }
527
649
 
528
650
  [data-toolbar-add-top][data-toolbar-add-active],
529
651
  [data-toolbar-add-bottom][data-toolbar-add-active] {
530
- display: flex;
652
+ opacity: 1;
653
+ visibility: visible;
531
654
  }
532
655
 
533
656
  /* Resize spacing */
@@ -864,3 +987,82 @@
864
987
  }
865
988
  }
866
989
  }
990
+
991
+
992
+ /* Toolbar onboarding */
993
+ [data-toolbar-onboarding] {
994
+ position: absolute;
995
+ left: 0;
996
+ top: 0;
997
+ width: 320px;
998
+ background-color: #fff;
999
+ color:rgba(60, 103, 255, 0.24);
1000
+ border-radius: 8px;
1001
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
1002
+ z-index: 40;
1003
+ visibility: hidden;
1004
+ opacity: 0;
1005
+
1006
+ &[data-onboarding-active]{
1007
+ visibility: visible;
1008
+ opacity: 1;
1009
+ transition: opacity .25s;
1010
+ }
1011
+
1012
+ [data-onboarding-wrapper] {
1013
+
1014
+ }
1015
+
1016
+ [data-icon] {
1017
+ position: absolute;
1018
+ top: -4px;
1019
+ left: 16px;
1020
+ /* Popover */
1021
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
1022
+
1023
+ &[data-position="top"] {
1024
+ top: unset;
1025
+ bottom: -4px;
1026
+ }
1027
+ }
1028
+ [data-close] {
1029
+ position: absolute;
1030
+ top: 8px;
1031
+ right: 8px;
1032
+ z-index: 99;
1033
+ border-radius: 8px;
1034
+ background-color: transparent;
1035
+ transition: background .25s;
1036
+
1037
+ &:hover {
1038
+ background-color: #E2E2E2;
1039
+ }
1040
+ svg {
1041
+ filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
1042
+ }
1043
+ }
1044
+
1045
+ [data-content] {
1046
+ padding: 16px;
1047
+ }
1048
+ video {
1049
+ border-radius: 8px 8px 0 0;
1050
+ }
1051
+ h3 {
1052
+ color: #212121;
1053
+ font-family: Inter;
1054
+ font-size: 16px;
1055
+ font-style: normal;
1056
+ font-weight: 600;
1057
+ line-height: 24px; /* 150% */
1058
+ letter-spacing: -0.32px;
1059
+ }
1060
+ p{
1061
+ color: #676767;
1062
+ font-family: Inter;
1063
+ font-size: 14px;
1064
+ font-style: normal;
1065
+ font-weight: 400;
1066
+ line-height: 24px; /* 171.429% */
1067
+ }
1068
+ }