vrembem 4.0.0-next.30 → 4.0.0-next.31

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.
package/dev/base.css CHANGED
@@ -8,21 +8,21 @@
8
8
 
9
9
  html,
10
10
  body {
11
- height: 100%;
11
+ height: var(--vb-base-height, 100%);
12
12
  }
13
13
 
14
14
  html {
15
15
  box-sizing: border-box;
16
16
  font-size: var(--vb-font-size);
17
- line-height: var(--vb-line-height);
18
17
  -moz-osx-font-smoothing: grayscale;
19
- -webkit-text-size-adjust: 100%;
18
+ line-height: var(--vb-line-height);
19
+ text-size-adjust: 100%;
20
20
  }
21
21
 
22
22
  body {
23
- background: var(--vb-background);
24
- color: var(--vb-foreground);
25
- font-family: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
23
+ background: var(--vb-base-background, var(--vb-background));
24
+ color: var(--vb-base-foreground, var(--vb-foreground));
25
+ font-family: var(--vb-font-family);
26
26
  }
27
27
 
28
28
  h1,
@@ -35,10 +35,10 @@ h6 {
35
35
  }
36
36
 
37
37
  img {
38
- max-width: 100%;
39
- height: auto;
40
38
  border: 0;
41
39
  border-style: none;
40
+ height: auto;
41
+ max-width: 100%;
42
42
  vertical-align: middle;
43
43
  }
44
44
 
@@ -58,12 +58,12 @@ a {
58
58
 
59
59
  code,
60
60
  pre {
61
- font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
61
+ font-family: var(--vb-font-family-mono);
62
62
  font-size: 1em;
63
63
  }
64
64
 
65
65
  small {
66
- font-size: 0.875rem;
66
+ font-size: var(--vb-font-size-sm);
67
67
  }
68
68
 
69
69
  table {
@@ -92,96 +92,59 @@ input {
92
92
  }
93
93
 
94
94
  button {
95
- border: 0;
96
95
  background: none;
96
+ border: 0;
97
+ cursor: pointer;
98
+ -webkit-font-smoothing: inherit;
97
99
  letter-spacing: inherit;
98
100
  text-align: inherit;
99
101
  text-transform: none;
100
- cursor: pointer;
101
- -webkit-font-smoothing: inherit;
102
102
  }
103
103
 
104
104
  button,
105
105
  [type=button],
106
106
  [type=reset],
107
107
  [type=submit] {
108
- -webkit-appearance: button;
108
+ appearance: button;
109
109
  }
110
110
 
111
111
  button::-moz-focus-inner,
112
112
  [type=button]::-moz-focus-inner,
113
113
  [type=reset]::-moz-focus-inner,
114
114
  [type=submit]::-moz-focus-inner {
115
- padding: 0;
116
115
  border-style: none;
116
+ padding: 0;
117
117
  }
118
118
 
119
- input::-moz-placeholder {
119
+ input::placeholder {
120
120
  opacity: 1;
121
121
  }
122
122
 
123
123
  ::-webkit-file-upload-button {
124
- -webkit-appearance: button;
124
+ appearance: button;
125
125
  font: inherit;
126
126
  }
127
127
 
128
- .arrow,
129
- .arrow-up,
130
- .arrow-down,
131
- .arrow-left,
132
- .arrow-right {
133
- display: inline-block;
134
- flex-grow: 0;
135
- flex-shrink: 0;
136
- width: 0;
137
- height: 0;
138
- transform-origin: center;
139
- border-top: 6px solid currentcolor;
140
- border-right: 4px solid transparent;
141
- border-left: 4px solid transparent;
142
- border-radius: 2px;
143
- pointer-events: none;
144
- }
145
-
146
- .arrow-up {
147
- transform: rotate(180deg);
148
- }
149
-
150
- .arrow-left {
151
- transform: rotate(90deg);
152
- }
153
-
154
- .arrow-right {
155
- transform: rotate(-90deg);
156
- }
157
-
158
- .blockquote {
128
+ .blockquote, .type > blockquote {
129
+ background: var(--vb-blockquote-background, transparent);
130
+ border: var(--vb-blockquote-border, var(--vb-border));
131
+ border-radius: var(--vb-blockquote-border-radius, var(--vb-border-radius));
132
+ color: var(--vb-blockquote-foreground, currentcolor);
133
+ padding: var(--vb-blockquote-padding, 1em);
159
134
  position: relative;
160
- padding: 1.5em;
161
- border: 1px solid var(--vb-border-color);
162
- color: inherit;
163
135
  }
164
- .blockquote > * + * {
165
- margin-top: 1em;
136
+ .blockquote > * + *, .type > blockquote > * + * {
137
+ margin-top: var(--vb-blockquote-gap, 1em);
166
138
  }
167
- .blockquote::before {
168
- content: "";
169
- position: absolute;
170
- top: -1px;
171
- bottom: -1px;
172
- left: -1px;
173
- width: 4px;
174
- background-color: var(--vb-primary-50);
175
- }
176
-
177
- .code {
178
- margin-block: -0.125rem;
179
- padding: 0.125rem 0.375rem;
180
- border-radius: 0.25rem;
181
- background: var(--vb-background-alt);
182
- color: var(--vb-foreground-alt);
183
- font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
184
- font-size: 0.875rem;
139
+
140
+ .code, .type :not(pre) > code {
141
+ background: var(--vb-code-background, var(--vb-background-alt));
142
+ border: var(--vb-code-border);
143
+ border-radius: var(--vb-code-border-radius, var(--vb-border-radius));
144
+ color: var(--vb-code-foreground, var(--vb-foreground-alt));
145
+ font-family: var(--vb-font-family-mono);
146
+ font-size: var(--vb-code-font-size, var(--vb-font-size-sm));
147
+ padding: var(--vb-code-padding, 0.125rem 0.375rem);
185
148
  word-break: break-word;
186
149
  }
187
150
 
@@ -191,9 +154,10 @@ input::-moz-placeholder {
191
154
  .h4,
192
155
  .h5,
193
156
  .h6 {
194
- color: inherit;
195
- font-family: inherit;
196
- font-weight: var(--vb-font-weight-semi-bold);
157
+ color: var(--vb-heading-color, var(--vb-foreground));
158
+ font-family: var(--vb-heading-font-family, inherit);
159
+ font-weight: var(--vb-heading-font-weight, var(--vb-font-weight-semi-bold));
160
+ line-height: var(--vb-heading-line-height);
197
161
  }
198
162
 
199
163
  .h1 {
@@ -222,115 +186,85 @@ input::-moz-placeholder {
222
186
  line-height: inherit;
223
187
  }
224
188
 
225
- .type .h1 {
226
- font-size: 2.75em;
227
- }
228
- .type .h2 {
229
- font-size: 2em;
230
- }
231
- .type .h3 {
232
- font-size: 1.75em;
233
- }
234
- .type .h4 {
235
- font-size: 1.5em;
236
- }
237
- .type .h5 {
238
- font-size: 1.25em;
239
- line-height: inherit;
240
- }
241
- .type .h6 {
242
- font-size: 1em;
243
- line-height: inherit;
189
+ .link, .type :not(div) > a {
190
+ color: var(--vb-link-color, var(--vb-primary-50));
191
+ text-decoration: var(--vb-link-decoration, underline);
192
+ text-decoration-thickness: var(--vb-link-decoration, var(--vb-link-thickness, 1px));
193
+ text-underline-offset: var(--vb-link-underline, var(--vb-link-offset, 2px));
244
194
  }
245
-
246
- .link {
247
- color: var(--vb-primary-50);
248
- text-decoration: underline;
249
- text-decoration-thickness: 1px;
250
- text-underline-offset: 2px;
251
- }
252
- .link code {
195
+ .link code, .type :not(div) > a code {
253
196
  background-color: hsl(var(--vb-primary-hs) 50% / 10%);
254
- color: var(--vb-primary-50);
197
+ color: var(--vb-link-color, var(--vb-primary-50));
255
198
  }
256
- .link:hover {
257
- color: var(--vb-primary-40);
258
- text-decoration: none;
199
+ .link:hover, .type :not(div) > a:hover {
200
+ color: var(--vb-link-color, var(--vb-link-hover, var(--vb-primary-40)));
201
+ text-decoration: var(--vb-link-decoration, var(--vb-link-hover, none));
259
202
  }
260
- .link:hover code {
261
- color: var(--vb-primary-40);
203
+ .link:hover code, .type :not(div) > a:hover code {
204
+ color: var(--vb-link-color, var(--vb-link-hover, var(--vb-primary-40)));
262
205
  }
263
- .link:focus {
264
- outline: currentcolor dotted 1px;
265
- outline-offset: 0.125rem;
266
- color: var(--vb-primary-40);
267
- text-decoration: none;
206
+ .link:focus, .type :not(div) > a:focus {
207
+ color: var(--vb-link-color, var(--vb-link-hover, var(--vb-primary-40)));
208
+ outline: var(--vb-link-focus-ring, currentcolor dotted 1px);
209
+ outline-offset: var(--vb-link-focus-ring-offset, 0.125rem);
210
+ text-decoration: var(--vb-link-decoration, var(--vb-link-hover, none));
268
211
  }
269
- .link:focus code {
270
- color: var(--vb-primary-40);
212
+ .link:focus code, .type :not(div) > a:focus code {
213
+ color: var(--vb-link-color, var(--vb-link-hover, var(--vb-primary-40)));
271
214
  }
272
215
 
273
- .list {
274
- margin-left: 1.5em;
216
+ .list, .type > ul, .type > ol {
217
+ margin-left: var(--vb-list-indent, 1.5em);
275
218
  }
276
219
  .list ul,
277
- .list ol {
278
- margin-left: 1.5em;
220
+ .list ol, .type > ul ul,
221
+ .type > ul ol, .type > ol ul,
222
+ .type > ol ol {
223
+ margin-left: var(--vb-list-indent, 1.5em);
279
224
  }
280
225
  .list li li,
281
- .list li + li {
282
- margin-top: 0.5em;
226
+ .list li + li, .type > ul li li,
227
+ .type > ul li + li, .type > ol li li,
228
+ .type > ol li + li {
229
+ margin-top: var(--vb-list-gap, 0.5em);
283
230
  }
284
231
 
285
232
  .list-style-none {
286
233
  list-style: none !important;
287
234
  }
288
235
 
289
- .pre {
290
- padding: 1em;
236
+ .pre, .type > pre {
237
+ background: var(--vb-pre-background, var(--vb-background-dark));
238
+ border: var(--vb-pre-padding);
239
+ border-radius: var(--vb-pre-padding, var(--vb-border-radius));
240
+ color: var(--vb-pre-foreground, var(--vb-foreground));
241
+ font-family: var(--vb-font-family-mono);
291
242
  overflow: auto;
292
- border-radius: 0.25rem;
293
- background: var(--vb-background-dark);
294
- color: var(--vb-foreground);
295
- font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
243
+ padding: var(--vb-pre-padding, 1em);
296
244
  }
297
- .pre code {
298
- padding: 0;
299
- border: none;
245
+ .pre code, .type > pre code {
300
246
  background: none;
247
+ border: none;
301
248
  color: inherit;
302
- font-size: 16px;
303
- }
304
-
305
- .scroll-box {
306
- display: block;
307
- width: 100%;
308
- overflow: auto;
309
- -webkit-overflow-scrolling: touch;
249
+ font-size: var(--vb-pre-font-size, var(--vb-font-size));
250
+ padding: 0;
310
251
  }
311
252
 
312
- .sep {
253
+ .sep, .type > hr {
254
+ border: none;
255
+ border-top: var(--vb-separator-border, var(--vb-border));
313
256
  display: block;
314
257
  height: 0;
315
- border: none;
316
- border-top: 1px solid var(--vb-border-color);
317
- }
318
-
319
- .sr-only {
320
- position: absolute;
321
- width: 1px;
322
- height: 1px;
323
- margin: -1px;
324
- padding: 0;
325
- overflow: hidden;
326
- clip: rect(1px, 1px, 1px, 1px);
327
- clip-path: inset(50%);
328
258
  }
329
259
 
330
260
  .type {
331
- color: var(--vb-foreground-light);
332
- font-size: 1.125rem;
333
- line-height: 1.7778;
261
+ color: var(--vb-type-color, var(--vb-foreground-light));
262
+ font-family: var(--vb-type-font-family);
263
+ font-size: var(--vb-type-font-size, var(--vb-font-size-lg));
264
+ line-height: var(--vb-type-line-height, 1.7778);
265
+ }
266
+ .type > * + * {
267
+ margin-top: var(--vb-type-gap);
334
268
  }
335
269
  .type > h1,
336
270
  .type > h2,
@@ -338,9 +272,10 @@ input::-moz-placeholder {
338
272
  .type > h4,
339
273
  .type > h5,
340
274
  .type > h6 {
341
- color: var(--vb-foreground);
342
- font-family: inherit;
343
- font-weight: var(--vb-font-weight-semi-bold);
275
+ color: var(--vb-heading-color, var(--vb-foreground));
276
+ font-family: var(--vb-heading-font-family, inherit);
277
+ font-weight: var(--vb-heading-font-weight, var(--vb-font-weight-semi-bold));
278
+ line-height: var(--vb-heading-line-height);
344
279
  }
345
280
  .type > h1 {
346
281
  font-size: 2.75em;
@@ -362,148 +297,125 @@ input::-moz-placeholder {
362
297
  font-size: 1em;
363
298
  line-height: inherit;
364
299
  }
365
- .type :not(div) > a {
366
- color: var(--vb-primary-50);
367
- text-decoration: underline;
368
- text-decoration-thickness: 1px;
369
- text-underline-offset: 2px;
370
- }
371
- .type :not(div) > a code {
372
- background-color: hsl(var(--vb-primary-hs) 50% / 10%);
373
- color: var(--vb-primary-50);
374
- }
375
- .type :not(div) > a:hover {
376
- color: var(--vb-primary-40);
377
- text-decoration: none;
378
- }
379
- .type :not(div) > a:hover code {
380
- color: var(--vb-primary-40);
381
- }
382
- .type :not(div) > a:focus {
383
- outline: currentcolor dotted 1px;
384
- outline-offset: 0.125rem;
385
- color: var(--vb-primary-40);
386
- text-decoration: none;
387
- }
388
- .type :not(div) > a:focus code {
389
- color: var(--vb-primary-40);
390
- }
391
- .type :not(pre) > code {
392
- margin-block: -0.125rem;
393
- padding: 0.125rem 0.375rem;
394
- border-radius: 0.25rem;
395
- background: var(--vb-background-alt);
396
- color: var(--vb-foreground-alt);
397
- font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
398
- font-size: 0.875rem;
399
- word-break: break-word;
400
- }
401
- .type > hr {
402
- display: block;
300
+
301
+ .arrow,
302
+ .arrow-up,
303
+ .arrow-down,
304
+ .arrow-left,
305
+ .arrow-right {
306
+ border-width: var(--vb-arrow-size, 6px 4px);
307
+ border-bottom-width: 0;
308
+ border-color: var(--vb-arrow-color, currentcolor) transparent transparent;
309
+ border-radius: var(--vb-arrow-radius, 2px);
310
+ border-style: solid;
311
+ display: inline-block;
312
+ flex-grow: 0;
313
+ flex-shrink: 0;
403
314
  height: 0;
404
- border: none;
405
- border-top: 1px solid var(--vb-border-color);
315
+ pointer-events: none;
316
+ transform-origin: center;
317
+ width: 0;
406
318
  }
407
- .type > ul,
408
- .type > ol {
409
- margin-left: 1.5em;
319
+
320
+ .arrow-up {
321
+ transform: rotate(180deg);
410
322
  }
411
- .type > ul ul,
412
- .type > ul ol,
413
- .type > ol ul,
414
- .type > ol ol {
415
- margin-left: 1.5em;
323
+
324
+ .arrow-left {
325
+ transform: rotate(90deg);
416
326
  }
417
- .type > ul li li,
418
- .type > ul li + li,
419
- .type > ol li li,
420
- .type > ol li + li {
421
- margin-top: 0.5em;
327
+
328
+ .arrow-right {
329
+ transform: rotate(-90deg);
422
330
  }
423
- .type > blockquote {
331
+
332
+ .loading-spinner {
333
+ height: var(--vb-loading-size, 1em);
334
+ width: var(--vb-loading-size, 1em);
335
+ animation: spin var(--vb-loading-duration, 0.6s) infinite linear;
336
+ border: var(--vb-loading-border, 2px solid);
337
+ border-color: var(--vb-loading-color, currentcolor) var(--vb-loading-color, currentcolor) transparent transparent;
338
+ border-radius: 9999px;
339
+ display: inline-block;
424
340
  position: relative;
425
- padding: 1.5em;
426
- border: 1px solid var(--vb-border-color);
427
- color: inherit;
428
341
  }
429
- .type > blockquote > * + * {
430
- margin-top: 1em;
342
+ @keyframes spin {
343
+ from {
344
+ transform: rotate(0deg);
345
+ }
346
+ to {
347
+ transform: rotate(360deg);
348
+ }
431
349
  }
432
- .type > blockquote::before {
433
- content: "";
434
- position: absolute;
435
- top: -1px;
436
- bottom: -1px;
437
- left: -1px;
438
- width: 4px;
439
- background-color: var(--vb-primary-50);
440
- }
441
- .type > pre {
442
- padding: 1em;
350
+
351
+ .scroll-box {
352
+ display: block;
443
353
  overflow: auto;
444
- border-radius: 0.25rem;
445
- background: var(--vb-background-dark);
446
- color: var(--vb-foreground);
447
- font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
354
+ -webkit-overflow-scrolling: touch;
355
+ width: 100%;
448
356
  }
449
- .type > pre code {
357
+
358
+ .sr-only {
359
+ clip: rect(1px, 1px, 1px, 1px);
360
+ clip-path: inset(50%);
361
+ height: 1px;
362
+ margin: -1px;
363
+ overflow: hidden;
450
364
  padding: 0;
451
- border: none;
452
- background: none;
453
- color: inherit;
454
- font-size: 16px;
365
+ position: absolute;
366
+ width: 1px;
455
367
  }
456
368
 
457
369
  .button {
458
370
  font-size: var(--vb-button-font-size, var(--vb-form-control-font-size));
459
371
  line-height: var(--vb-button-line-height, var(--vb-form-control-line-height));
460
372
  padding: var(--vb-button-padding, var(--vb-form-control-padding));
461
- transition-property: var(--vb-button-transition-property, var(--vb-form-control-transition-property));
373
+ border-radius: var(--vb-button-border-radius, var(--vb-form-control-border-radius));
374
+ border-width: var(--vb-button-border-width, var(--vb-form-control-border-width));
462
375
  transition-duration: var(--vb-button-transition-duration, var(--vb-form-control-transition-duration));
376
+ transition-property: var(--vb-button-transition-property, var(--vb-form-control-transition-property));
463
377
  transition-timing-function: var(--vb-button-transition-timing-function, var(--vb-form-control-transition-timing-function));
464
- border-width: var(--vb-button-border-width, var(--vb-form-control-border-width));
465
- border-radius: var(--vb-button-border-radius, var(--vb-form-control-border-radius));
466
378
  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) transparent;
467
379
  outline-offset: var(--vb-focus-ring-offset);
468
- position: relative;
469
- display: inline-flex;
470
- gap: var(--vb-button-gap, 0.5rem);
471
380
  align-items: center;
472
- justify-content: center;
473
- border-style: solid;
474
381
  background-clip: border-box;
382
+ border-style: solid;
383
+ cursor: pointer;
384
+ display: inline-flex;
475
385
  font-family: inherit;
476
386
  font-weight: inherit;
387
+ gap: var(--vb-button-gap, 0.5rem);
388
+ justify-content: center;
389
+ position: relative;
477
390
  text-decoration: none;
478
391
  white-space: nowrap;
479
- cursor: pointer;
480
- border-color: var(--vb-button-border-color, var(--vb-border-color-dark));
481
392
  background-color: var(--vb-button-background, transparent);
393
+ border-color: var(--vb-button-border-color, var(--vb-border-color-dark));
482
394
  box-shadow: var(--vb-button-box-shadow, none);
483
395
  color: var(--vb-button-foreground, var(--vb-foreground));
484
396
  }
485
397
  .button:hover {
486
- border-color: var(--vb-button-border-color-hover, var(--vb-button-border-color, var(--vb-border-color-darker)));
487
398
  background-color: var(--vb-button-background-hover, var(--vb-button-background, transparent));
399
+ border-color: var(--vb-button-border-color-hover, var(--vb-button-border-color, var(--vb-border-color-darker)));
488
400
  box-shadow: var(--vb-button-box-shadow-hover, var(--vb-button-box-shadow, none));
489
401
  color: var(--vb-button-foreground-hover, var(--vb-button-foreground, var(--vb-foreground)));
490
402
  }
491
403
  .button:focus {
492
- border-color: var(--vb-button-border-color-focus, var(--vb-button-border-color-hover, var(--vb-button-border-color, var(--vb-border-color-darker))));
493
404
  background-color: var(--vb-button-background-focus, var(--vb-button-background-hover, var(--vb-button-background, transparent)));
405
+ border-color: var(--vb-button-border-color-focus, var(--vb-button-border-color-hover, var(--vb-button-border-color, var(--vb-border-color-darker))));
494
406
  box-shadow: var(--vb-button-box-shadow-focus, var(--vb-button-box-shadow-hover, var(--vb-button-box-shadow, none)));
495
407
  color: var(--vb-button-foreground-focus, var(--vb-button-foreground-hover, var(--vb-button-foreground, var(--vb-foreground))));
496
408
  }
497
409
  .button:focus-visible {
498
410
  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) hsl(from var(--vb-button-focus-ring-color, var(--vb-focus-ring-color, var(--vb-button-accent, var(--vb-form-control-accent)))) h s l/var(--vb-button-focus-ring-opacity, var(--vb-focus-ring-opacity, 40%)));
499
- border-color: var(--vb-button-border-color-focus-visible, var(--vb-button-border-color-focus, var(--vb-button-border-color-hover, var(--vb-button-border-color, var(--vb-button-accent, var(--vb-form-control-accent))))));
500
411
  background-color: var(--vb-button-background-focus-visible, var(--vb-button-background-focus, var(--vb-button-background-hover, var(--vb-button-background, transparent))));
412
+ border-color: var(--vb-button-border-color-focus-visible, var(--vb-button-border-color-focus, var(--vb-button-border-color-hover, var(--vb-button-border-color, var(--vb-button-accent, var(--vb-form-control-accent))))));
501
413
  box-shadow: var(--vb-button-box-shadow-focus-visible, var(--vb-button-box-shadow-focus, var(--vb-button-box-shadow-hover, var(--vb-button-box-shadow, none))));
502
414
  color: var(--vb-button-foreground-focus-visible, var(--vb-button-foreground-focus, var(--vb-button-foreground-hover, var(--vb-button-foreground, var(--vb-foreground)))));
503
415
  }
504
416
  .button:active {
505
- border-color: var(--vb-button-border-color-active, var(--vb-button-border-color, var(--vb-foreground)));
506
417
  background-color: var(--vb-button-background-active, var(--vb-button-background, transparent));
418
+ border-color: var(--vb-button-border-color-active, var(--vb-button-border-color, var(--vb-foreground)));
507
419
  box-shadow: var(--vb-button-box-shadow-active, var(--vb-button-box-shadow, none));
508
420
  color: var(--vb-button-foreground-active, var(--vb-button-foreground, var(--vb-foreground)));
509
421
  }
@@ -516,26 +428,18 @@ input::-moz-placeholder {
516
428
  pointer-events: none;
517
429
  }
518
430
  .button.is-loading::after {
519
- --vb-loading-color: var(--vb-button-foreground, var(--vb-foreground));
520
- width: var(--vb-loading-size);
521
- height: var(--vb-loading-size);
522
431
  content: "";
523
- position: absolute;
524
- top: calc(50% - var(--vb-loading-size) * 0.5);
525
- left: calc(50% - var(--vb-loading-size) * 0.5);
526
- display: inline-flex;
527
- animation: spin var(--vb-loading-duration) infinite linear;
528
- border: var(--vb-loading-border);
432
+ --vb-loading-color: var(--vb-button-foreground, var(--vb-foreground));
433
+ height: var(--vb-loading-size, 1em);
434
+ width: var(--vb-loading-size, 1em);
435
+ left: calc(50% - var(--vb-loading-size, 1em) * 0.5);
436
+ top: calc(50% - var(--vb-loading-size, 1em) * 0.5);
437
+ animation: spin var(--vb-loading-duration, 0.6s) infinite linear;
438
+ border: var(--vb-loading-border, 2px solid);
439
+ border-color: var(--vb-loading-color, currentcolor) var(--vb-loading-color, currentcolor) transparent transparent;
529
440
  border-radius: 9999px;
530
- border-color: var(--vb-loading-color) var(--vb-loading-color) transparent transparent;
531
- }
532
- @keyframes spin {
533
- from {
534
- transform: rotate(0deg);
535
- }
536
- to {
537
- transform: rotate(360deg);
538
- }
441
+ display: inline-block;
442
+ position: absolute;
539
443
  }
540
444
 
541
445
  .button_block {
@@ -543,59 +447,34 @@ input::-moz-placeholder {
543
447
  width: 100%;
544
448
  }
545
449
 
546
- .button_block_xs {
547
- display: flex;
548
- width: 100%;
549
- }
550
-
551
- @media (min-width: 480px) {
552
- .button_block_xs {
553
- display: inline-flex;
554
- width: auto;
450
+ @media (max-width: 479px) {
451
+ .xs\:button_block {
452
+ display: flex;
453
+ width: 100%;
555
454
  }
556
455
  }
557
- .button_block_sm {
558
- display: flex;
559
- width: 100%;
560
- }
561
-
562
- @media (min-width: 620px) {
563
- .button_block_sm {
564
- display: inline-flex;
565
- width: auto;
456
+ @media (max-width: 619px) {
457
+ .sm\:button_block {
458
+ display: flex;
459
+ width: 100%;
566
460
  }
567
461
  }
568
- .button_block_md {
569
- display: flex;
570
- width: 100%;
571
- }
572
-
573
- @media (min-width: 760px) {
574
- .button_block_md {
575
- display: inline-flex;
576
- width: auto;
462
+ @media (max-width: 759px) {
463
+ .md\:button_block {
464
+ display: flex;
465
+ width: 100%;
577
466
  }
578
467
  }
579
- .button_block_lg {
580
- display: flex;
581
- width: 100%;
582
- }
583
-
584
- @media (min-width: 990px) {
585
- .button_block_lg {
586
- display: inline-flex;
587
- width: auto;
468
+ @media (max-width: 989px) {
469
+ .lg\:button_block {
470
+ display: flex;
471
+ width: 100%;
588
472
  }
589
473
  }
590
- .button_block_xl {
591
- display: flex;
592
- width: 100%;
593
- }
594
-
595
- @media (min-width: 1380px) {
596
- .button_block_xl {
597
- display: inline-flex;
598
- width: auto;
474
+ @media (max-width: 1379px) {
475
+ .xl\:button_block {
476
+ display: flex;
477
+ width: 100%;
599
478
  }
600
479
  }
601
480
  .button_color_primary {
@@ -651,28 +530,28 @@ input::-moz-placeholder {
651
530
  }
652
531
 
653
532
  .card {
654
- position: relative;
533
+ background: var(--vb-card-background);
534
+ background-clip: padding-box;
535
+ border: var(--vb-card-border);
536
+ border-radius: var(--vb-card-border-radius);
537
+ box-shadow: var(--vb-card-box-shadow);
538
+ color: var(--vb-card-foreground);
655
539
  display: flex;
656
540
  flex-direction: column;
657
541
  overflow: hidden;
658
- transition-property: var(--vb-card-transition-property);
542
+ position: relative;
659
543
  transition-duration: var(--vb-card-transition-duration);
544
+ transition-property: var(--vb-card-transition-property);
660
545
  transition-timing-function: var(--vb-card-transition-timing-function);
661
- border: var(--vb-card-border);
662
- border-radius: var(--vb-card-border-radius);
663
- background: var(--vb-card-background);
664
- background-clip: padding-box;
665
- box-shadow: var(--vb-card-box-shadow);
666
- color: var(--vb-card-foreground);
667
546
  }
668
547
 
669
548
  a.card {
670
- transform: translate(0, 0);
671
549
  box-shadow: var(--vb-card-link-box-shadow);
550
+ transform: translate(0, 0);
672
551
  }
673
552
  a.card:hover, a.card:focus, a.card:focus-within {
674
- transform: translate(0, var(--vb-card-link-offset));
675
553
  box-shadow: var(--vb-card-link-box-shadow-hover);
554
+ transform: translate(0, var(--vb-card-link-offset));
676
555
  }
677
556
 
678
557
  .card__header,
@@ -720,13 +599,13 @@ a.card:hover, a.card:focus, a.card:focus-within {
720
599
 
721
600
  .card__image {
722
601
  flex: 0 1 auto;
723
- width: 100%;
724
602
  height: auto;
603
+ width: 100%;
725
604
  }
726
605
 
727
606
  .card__title {
728
- flex-grow: 1;
729
607
  color: var(--vb-card-title-color);
608
+ flex-grow: 1;
730
609
  font-size: var(--vb-card-title-font-size);
731
610
  font-weight: var(--vb-card-title-font-weight);
732
611
  line-height: var(--vb-card-title-line-height);
@@ -734,14 +613,14 @@ a.card:hover, a.card:focus, a.card:focus-within {
734
613
 
735
614
  .card__background,
736
615
  .card__screen {
737
- width: 100%;
738
616
  height: 100%;
739
- position: absolute;
617
+ width: 100%;
618
+ border-radius: var(--vb-card-border-radius);
740
619
  inset: 0;
741
- transition-property: var(--vb-card-transition-property);
620
+ position: absolute;
742
621
  transition-duration: var(--vb-card-transition-duration);
622
+ transition-property: var(--vb-card-transition-property);
743
623
  transition-timing-function: var(--vb-card-transition-timing-function);
744
- border-radius: var(--vb-card-border-radius);
745
624
  }
746
625
 
747
626
  .card__background {
@@ -750,110 +629,110 @@ a.card:hover, a.card:focus, a.card:focus-within {
750
629
  }
751
630
 
752
631
  .card__screen {
753
- z-index: 2;
754
632
  background: var(--vb-card-screen-background);
755
633
  opacity: var(--vb-card-screen-opacity);
634
+ z-index: 2;
756
635
  }
757
636
 
758
637
  .checkbox {
759
- position: relative;
638
+ align-items: center;
760
639
  display: inline-flex;
761
640
  flex: 0 0 auto;
762
- align-items: center;
763
- justify-content: center;
764
641
  font-size: var(--vb-checkbox-font-size, var(--vb-form-control-font-size));
642
+ justify-content: center;
643
+ position: relative;
765
644
  vertical-align: middle;
766
645
  }
767
646
 
768
647
  .checkbox__background {
769
- width: var(--vb-checkbox-size, var(--vb-form-control-size));
770
648
  height: var(--vb-checkbox-size, var(--vb-form-control-size));
771
- position: relative;
772
- z-index: 1;
773
- display: flex;
649
+ width: var(--vb-checkbox-size, var(--vb-form-control-size));
774
650
  align-items: center;
775
- justify-content: center;
776
- border-radius: var(--vb-checkbox-background-border-radius, var(--vb-form-control-background-border-radius));
777
651
  background-color: hsl(from var(--vb-checkbox-accent, var(--vb-form-control-accent)) h s l/var(--vb-checkbox-background-opacity, var(--vb-form-control-background-opacity)));
652
+ border-radius: var(--vb-checkbox-background-border-radius, var(--vb-form-control-background-border-radius));
653
+ display: flex;
654
+ justify-content: center;
655
+ position: relative;
656
+ z-index: 1;
778
657
  }
779
658
 
780
659
  .checkbox__box {
781
- width: var(--vb-checkbox-box-size, 1.2em);
782
660
  height: var(--vb-checkbox-box-size, 1.2em);
783
- display: flex;
661
+ width: var(--vb-checkbox-box-size, 1.2em);
784
662
  align-items: center;
785
- justify-content: center;
663
+ background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
786
664
  border: var(--vb-checkbox-border-width, 2px) solid var(--vb-checkbox-foreground, var(--vb-form-control-foreground));
787
665
  border-radius: var(--vb-checkbox-border-radius, var(--vb-border-radius));
788
- background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
789
666
  color: transparent;
667
+ display: flex;
668
+ justify-content: center;
790
669
  }
791
670
 
792
671
  .checkbox__icon {
793
- width: var(--vb-checkbox-icon-size, 0.8em);
794
672
  height: var(--vb-checkbox-icon-size, 0.8em);
673
+ width: var(--vb-checkbox-icon-size, 0.8em);
795
674
  background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
796
675
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="10,3 5,9 2,6"></polyline></svg>');
797
- mask-repeat: no-repeat;
798
676
  mask-position: center calc(var(--vb-checkbox-icon-size, 0.8em) * -1);
677
+ mask-repeat: no-repeat;
799
678
  mask-size: 100%;
800
679
  opacity: 0;
801
680
  }
802
681
 
803
682
  .checkbox__native {
804
- width: 100%;
805
683
  height: 100%;
806
- position: absolute;
807
- z-index: 2;
808
- top: 0;
684
+ width: 100%;
685
+ cursor: pointer;
809
686
  left: 0;
810
687
  opacity: 0;
811
- cursor: pointer;
688
+ position: absolute;
689
+ top: 0;
690
+ z-index: 2;
812
691
  }
813
692
  .checkbox__native:hover + .checkbox__background {
814
693
  background-color: hsl(from var(--vb-checkbox-accent, var(--vb-form-control-accent)) h s l/var(--vb-checkbox-background-opacity-hover, var(--vb-form-control-background-opacity-hover)));
815
694
  }
816
695
  .checkbox__native:hover + .checkbox__background .checkbox__box {
817
- border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
818
696
  background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
697
+ border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
819
698
  }
820
699
  .checkbox__native:focus + .checkbox__background {
821
700
  background-color: hsl(from var(--vb-checkbox-accent, var(--vb-form-control-accent)) h s l/var(--vb-checkbox-background-opacity-focus, var(--vb-form-control-background-opacity-focus)));
822
701
  }
823
702
  .checkbox__native:focus + .checkbox__background .checkbox__box {
824
- border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
825
703
  background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
704
+ border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
826
705
  }
827
706
  .checkbox__native:focus-visible + .checkbox__background, .checkbox__native:active + .checkbox__background {
828
707
  background-color: hsl(from var(--vb-checkbox-accent, var(--vb-form-control-accent)) h s l/var(--vb-checkbox-background-opacity-active, var(--vb-form-control-background-opacity-active)));
829
708
  }
830
709
  .checkbox__native:focus-visible + .checkbox__background .checkbox__box, .checkbox__native:active + .checkbox__background .checkbox__box {
831
- border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
832
710
  background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
711
+ border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
833
712
  }
834
713
  .checkbox__native:checked + .checkbox__background .checkbox__box {
835
- border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
836
714
  background-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
715
+ border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
837
716
  }
838
717
  .checkbox__native:checked + .checkbox__background .checkbox__icon {
839
- transition-property: opacity, mask-position;
840
- transition-duration: var(--vb-checkbox-transition-duration, var(--vb-form-control-transition-duration));
841
- transition-timing-function: var(--vb-checkbox-transition-timing-function, var(--vb-form-control-transition-timing-function));
842
718
  mask-position: center center;
843
719
  opacity: 1;
720
+ transition-duration: var(--vb-checkbox-transition-duration, var(--vb-form-control-transition-duration));
721
+ transition-property: opacity, mask-position;
722
+ transition-timing-function: var(--vb-checkbox-transition-timing-function, var(--vb-form-control-transition-timing-function));
844
723
  }
845
724
  .checkbox__native:indeterminate + .checkbox__background .checkbox__box {
846
- border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
847
725
  background-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
726
+ border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
848
727
  }
849
728
  .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
850
- transition-property: opacity, mask-position;
851
- transition-duration: var(--vb-checkbox-transition-duration, var(--vb-form-control-transition-duration));
852
- transition-timing-function: var(--vb-checkbox-transition-timing-function, var(--vb-form-control-transition-timing-function));
853
729
  background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
854
730
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
855
731
  mask-position: center center;
856
732
  opacity: 1;
733
+ transition-duration: var(--vb-checkbox-transition-duration, var(--vb-form-control-transition-duration));
734
+ transition-property: opacity, mask-position;
735
+ transition-timing-function: var(--vb-checkbox-transition-timing-function, var(--vb-form-control-transition-timing-function));
857
736
  }
858
737
 
859
738
  .checkbox_size_sm {
@@ -867,20 +746,20 @@ a.card:hover, a.card:focus, a.card:focus-within {
867
746
  .dialog {
868
747
  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) transparent;
869
748
  outline-offset: var(--vb-focus-ring-offset);
870
- position: relative;
871
- display: flex;
872
- flex-direction: column;
873
- overflow: auto;
874
- transition-property: outline, border-color;
875
- transition-duration: var(--vb-dialog-transition-duration, var(--vb-transition-duration));
876
- transition-timing-function: var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function));
877
- border: var(--vb-dialog-border, var(--vb-border));
878
- border-radius: var(--vb-dialog-border-radius, var(--vb-border-radius));
879
749
  background: var(--vb-dialog-background, var(--vb-background));
880
750
  background-clip: padding-box;
751
+ border: var(--vb-dialog-border, var(--vb-border));
752
+ border-radius: var(--vb-dialog-border-radius, var(--vb-border-radius));
881
753
  box-shadow: var(--vb-dialog-box-shadow, var(--vb-box-shadow-4));
882
754
  color: var(--vb-dialog-foreground, var(--vb-foreground));
755
+ display: flex;
756
+ flex-direction: column;
757
+ overflow: auto;
883
758
  -webkit-overflow-scrolling: touch;
759
+ position: relative;
760
+ transition-duration: var(--vb-dialog-transition-duration, var(--vb-transition-duration));
761
+ transition-property: outline, border-color;
762
+ transition-timing-function: var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function));
884
763
  }
885
764
  .dialog:focus-visible, .dialog[role=alertdialog] {
886
765
  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) hsl(from var(--vb-dialog-focus-ring-color, var(--vb-focus-ring-color, var(--vb-primary-50))) h s l/var(--vb-dialog-focus-ring-opacity, var(--vb-focus-ring-opacity, 1)));
@@ -899,18 +778,18 @@ a.card:hover, a.card:focus, a.card:focus-within {
899
778
 
900
779
  .dialog__header,
901
780
  .dialog__footer {
902
- position: sticky;
903
- z-index: 1;
904
- display: flex;
905
781
  align-items: center;
906
782
  background: var(--vb-dialog-background, var(--vb-background));
907
- vertical-align: middle;
783
+ display: flex;
908
784
  gap: var(--vb-dialog-gap, 0.5em);
785
+ position: sticky;
786
+ vertical-align: middle;
787
+ z-index: 1;
909
788
  }
910
789
 
911
790
  .dialog__header {
912
- top: 0;
913
791
  border-bottom: var(--vb-dialog-sep-border, var(--vb-border));
792
+ top: 0;
914
793
  }
915
794
 
916
795
  .dialog__body {
@@ -921,8 +800,8 @@ a.card:hover, a.card:focus, a.card:focus-within {
921
800
  }
922
801
 
923
802
  .dialog__footer {
924
- bottom: 0;
925
803
  border-top: var(--vb-dialog-sep-border, var(--vb-border));
804
+ bottom: 0;
926
805
  }
927
806
 
928
807
  .dialog__title {
@@ -932,65 +811,56 @@ a.card:hover, a.card:focus, a.card:focus-within {
932
811
  line-height: var(--vb-dialog-title-line-height);
933
812
  }
934
813
 
935
- /**
936
- * Required structure styles
937
- */
938
814
  .drawer-frame {
939
- position: relative;
940
815
  display: flex;
941
816
  height: var(--vb-drawer-frame-height, 100vh);
942
817
  overflow: hidden auto;
818
+ position: relative;
943
819
  }
944
820
 
945
821
  .drawer-main {
946
- position: relative;
947
822
  flex: 1 1 auto;
948
823
  height: 100%;
949
824
  overflow: auto;
950
825
  -webkit-overflow-scrolling: touch;
826
+ position: relative;
951
827
  }
952
828
 
953
- /**
954
- * Drawer
955
- */
956
829
  .drawer {
957
- position: absolute;
958
- z-index: var(--vb-drawer-z-index, 900);
959
- top: 0;
960
830
  bottom: 0;
961
- visibility: hidden;
962
831
  flex: 0 0 0;
963
- width: 0;
964
832
  height: 0;
965
833
  overflow: hidden;
834
+ position: absolute;
835
+ top: 0;
836
+ visibility: hidden;
837
+ width: 0;
838
+ z-index: var(--vb-drawer-z-index, 900);
966
839
  }
967
840
 
968
841
  .drawer__dialog {
969
- position: absolute;
970
- top: 0;
842
+ background-clip: border-box;
843
+ border-bottom: none;
844
+ border-radius: 0;
845
+ border-top: none;
971
846
  display: flex;
972
847
  flex-direction: column;
973
- width: var(--vb-drawer-width, 18em);
974
- max-width: 100%;
975
848
  height: 100%;
849
+ max-width: 100%;
850
+ opacity: 0;
976
851
  overflow: auto;
852
+ -webkit-overflow-scrolling: touch;
853
+ position: absolute;
854
+ top: 0;
977
855
  transition-duration: var(--vb-drawer-transition-duration, var(--vb-dialog-transition-duration, var(--vb-transition-duration)));
978
856
  transition-timing-function: var(--vb-drawer-transition-timing-function, var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function)));
979
- border-top: none;
980
- border-bottom: none;
981
- border-radius: 0;
982
- background-clip: border-box;
983
- opacity: 0;
984
- -webkit-overflow-scrolling: touch;
857
+ width: var(--vb-drawer-width, 18em);
985
858
  }
986
859
  .drawer:not(.drawer_modal) .drawer__dialog {
987
860
  --vb-dialog-background: var(--vb-background-darker);
988
861
  --vb-dialog-box-shadow: none;
989
862
  }
990
863
 
991
- /**
992
- * State classes
993
- */
994
864
  .drawer.is-closed {
995
865
  visibility: hidden;
996
866
  }
@@ -998,18 +868,18 @@ a.card:hover, a.card:focus, a.card:focus-within {
998
868
  .drawer.is-opening,
999
869
  .drawer.is-opened,
1000
870
  .drawer.is-closing {
1001
- visibility: visible;
1002
871
  flex: 0 0 auto;
1003
- width: var(--vb-drawer-width, 18em);
1004
- max-width: var(--vb-drawer-max-width, 80%);
1005
872
  height: 100%;
873
+ max-width: var(--vb-drawer-max-width, 80%);
1006
874
  overflow: visible;
875
+ visibility: visible;
876
+ width: var(--vb-drawer-width, 18em);
1007
877
  }
1008
878
 
1009
879
  .drawer.is-opening,
1010
880
  .drawer.is-closing {
1011
- transition-property: background-color, opacity, transform;
1012
881
  transition-duration: var(--vb-drawer-transition-duration, var(--vb-dialog-transition-duration, var(--vb-transition-duration)));
882
+ transition-property: background-color, opacity, transform;
1013
883
  transition-timing-function: var(--vb-drawer-transition-timing-function, var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function)));
1014
884
  }
1015
885
  .drawer.is-opening .drawer__dialog,
@@ -1030,9 +900,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
1030
900
  opacity: 0;
1031
901
  }
1032
902
 
1033
- /**
1034
- * Drawer slide transition
1035
- */
1036
903
  .drawer {
1037
904
  left: 0;
1038
905
  transform: translateX(-100%);
@@ -1050,12 +917,9 @@ a.card:hover, a.card:focus, a.card:focus-within {
1050
917
  transform: translateX(-100%);
1051
918
  }
1052
919
 
1053
- /**
1054
- * Drawer switched slide transition
1055
- */
1056
920
  .drawer_switch {
1057
- right: 0;
1058
921
  left: auto;
922
+ right: 0;
1059
923
  transform: translateX(100%);
1060
924
  }
1061
925
  .drawer_switch .drawer__dialog {
@@ -1066,9 +930,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
1066
930
  transform: translateX(100%);
1067
931
  }
1068
932
 
1069
- /**
1070
- * Drawer main margins
1071
- */
1072
933
  .drawer:not(.drawer_switch, .drawer_modal).is-opening ~ .drawer-main, .drawer:not(.drawer_switch, .drawer_modal).is-opened ~ .drawer-main {
1073
934
  margin-left: var(--vb-drawer-width, 18em);
1074
935
  }
@@ -1077,55 +938,49 @@ a.card:hover, a.card:focus, a.card:focus-within {
1077
938
  margin-right: var(--vb-drawer-width, 18em);
1078
939
  }
1079
940
 
1080
- /**
1081
- * Drawer modal styles
1082
- */
1083
941
  .drawer_modal {
1084
942
  --vb-drawer-z-index: 950;
1085
- right: auto;
1086
- left: 0;
1087
- width: 0;
1088
943
  height: 0;
944
+ left: 0;
1089
945
  overflow: hidden;
946
+ right: auto;
1090
947
  transform: translateX(0);
948
+ width: 0;
1091
949
  }
1092
950
  .drawer_modal::before {
951
+ background-color: var(--vb-drawer-screen-color, var(--vb-screen-color));
1093
952
  content: "";
1094
- position: absolute;
1095
- inset: 0;
1096
- width: 100%;
1097
953
  height: 100%;
1098
- background-color: var(--vb-drawer-screen-color, var(--vb-screen-color));
954
+ inset: 0;
1099
955
  opacity: 0;
956
+ position: absolute;
957
+ width: 100%;
1100
958
  }
1101
959
  .drawer_modal .drawer__dialog {
1102
- position: absolute;
960
+ background-clip: padding-box;
1103
961
  left: 0;
1104
- width: var(--vb-drawer-width, 18em);
1105
962
  max-width: var(--vb-drawer-max-width, 80%);
963
+ position: absolute;
1106
964
  transform: translateX(-100%);
1107
- background-clip: padding-box;
965
+ width: var(--vb-drawer-width, 18em);
1108
966
  }
1109
967
  .drawer_modal.drawer_switch {
1110
- right: auto;
1111
968
  left: 0;
969
+ right: auto;
1112
970
  transform: translateX(0);
1113
971
  }
1114
972
  .drawer_modal.drawer_switch .drawer__dialog {
1115
- right: 0;
1116
973
  left: auto;
974
+ right: 0;
1117
975
  transform: translateX(100%);
1118
976
  }
1119
977
 
1120
- /**
1121
- * Drawer modal transition
1122
- */
1123
978
  .drawer_modal.is-opening,
1124
979
  .drawer_modal.is-opened,
1125
980
  .drawer_modal.is-closing {
1126
- width: 100%;
1127
- max-width: 100%;
1128
981
  height: 100%;
982
+ max-width: 100%;
983
+ width: 100%;
1129
984
  }
1130
985
 
1131
986
  .drawer_modal.is-opening::before,
@@ -1162,8 +1017,8 @@ a.card:hover, a.card:focus, a.card:focus-within {
1162
1017
 
1163
1018
  .flex {
1164
1019
  display: flex;
1165
- gap: var(--vb-flex-gap-y, var(--vb-flex-gap)) var(--vb-flex-gap-x, var(--vb-flex-gap));
1166
1020
  flex-wrap: var(--vb-flex-wrap);
1021
+ gap: var(--vb-flex-gap-y, var(--vb-flex-gap)) var(--vb-flex-gap-x, var(--vb-flex-gap));
1167
1022
  }
1168
1023
 
1169
1024
  .flex_inline {
@@ -1964,10 +1819,10 @@ a.card:hover, a.card:focus, a.card:focus-within {
1964
1819
 
1965
1820
  .grid {
1966
1821
  display: grid;
1822
+ gap: var(--vb-grid-gap-y, var(--vb-grid-gap)) var(--vb-grid-gap-x, var(--vb-grid-gap));
1967
1823
  grid-auto-flow: var(--vb-grid-flow);
1968
1824
  grid-template-columns: repeat(var(--vb-grid-cols), minmax(0, 1fr));
1969
1825
  grid-template-rows: repeat(var(--vb-grid-rows), minmax(0, 1fr));
1970
- gap: var(--vb-grid-gap-y, var(--vb-grid-gap)) var(--vb-grid-gap-x, var(--vb-grid-gap));
1971
1826
  }
1972
1827
 
1973
1828
  .grid_inline {
@@ -2689,22 +2544,22 @@ a.card:hover, a.card:focus, a.card:focus-within {
2689
2544
  .xs\:col-full {
2690
2545
  grid-column: span var(--vb-grid-cols);
2691
2546
  }
2692
- .xs\:col-1 {
2547
+ .xs\:col-full-1 {
2693
2548
  grid-column: span 1;
2694
2549
  }
2695
- .xs\:col-2 {
2550
+ .xs\:col-full-2 {
2696
2551
  grid-column: span 2;
2697
2552
  }
2698
- .xs\:col-3 {
2553
+ .xs\:col-full-3 {
2699
2554
  grid-column: span 3;
2700
2555
  }
2701
- .xs\:col-4 {
2556
+ .xs\:col-full-4 {
2702
2557
  grid-column: span 4;
2703
2558
  }
2704
- .xs\:col-5 {
2559
+ .xs\:col-full-5 {
2705
2560
  grid-column: span 5;
2706
2561
  }
2707
- .xs\:col-6 {
2562
+ .xs\:col-full-6 {
2708
2563
  grid-column: span 6;
2709
2564
  }
2710
2565
  .xs\:col-start-1 {
@@ -2757,22 +2612,22 @@ a.card:hover, a.card:focus, a.card:focus-within {
2757
2612
  .sm\:col-full {
2758
2613
  grid-column: span var(--vb-grid-cols);
2759
2614
  }
2760
- .sm\:col-1 {
2615
+ .sm\:col-full-1 {
2761
2616
  grid-column: span 1;
2762
2617
  }
2763
- .sm\:col-2 {
2618
+ .sm\:col-full-2 {
2764
2619
  grid-column: span 2;
2765
2620
  }
2766
- .sm\:col-3 {
2621
+ .sm\:col-full-3 {
2767
2622
  grid-column: span 3;
2768
2623
  }
2769
- .sm\:col-4 {
2624
+ .sm\:col-full-4 {
2770
2625
  grid-column: span 4;
2771
2626
  }
2772
- .sm\:col-5 {
2627
+ .sm\:col-full-5 {
2773
2628
  grid-column: span 5;
2774
2629
  }
2775
- .sm\:col-6 {
2630
+ .sm\:col-full-6 {
2776
2631
  grid-column: span 6;
2777
2632
  }
2778
2633
  .sm\:col-start-1 {
@@ -2825,22 +2680,22 @@ a.card:hover, a.card:focus, a.card:focus-within {
2825
2680
  .md\:col-full {
2826
2681
  grid-column: span var(--vb-grid-cols);
2827
2682
  }
2828
- .md\:col-1 {
2683
+ .md\:col-full-1 {
2829
2684
  grid-column: span 1;
2830
2685
  }
2831
- .md\:col-2 {
2686
+ .md\:col-full-2 {
2832
2687
  grid-column: span 2;
2833
2688
  }
2834
- .md\:col-3 {
2689
+ .md\:col-full-3 {
2835
2690
  grid-column: span 3;
2836
2691
  }
2837
- .md\:col-4 {
2692
+ .md\:col-full-4 {
2838
2693
  grid-column: span 4;
2839
2694
  }
2840
- .md\:col-5 {
2695
+ .md\:col-full-5 {
2841
2696
  grid-column: span 5;
2842
2697
  }
2843
- .md\:col-6 {
2698
+ .md\:col-full-6 {
2844
2699
  grid-column: span 6;
2845
2700
  }
2846
2701
  .md\:col-start-1 {
@@ -2893,22 +2748,22 @@ a.card:hover, a.card:focus, a.card:focus-within {
2893
2748
  .lg\:col-full {
2894
2749
  grid-column: span var(--vb-grid-cols);
2895
2750
  }
2896
- .lg\:col-1 {
2751
+ .lg\:col-full-1 {
2897
2752
  grid-column: span 1;
2898
2753
  }
2899
- .lg\:col-2 {
2754
+ .lg\:col-full-2 {
2900
2755
  grid-column: span 2;
2901
2756
  }
2902
- .lg\:col-3 {
2757
+ .lg\:col-full-3 {
2903
2758
  grid-column: span 3;
2904
2759
  }
2905
- .lg\:col-4 {
2760
+ .lg\:col-full-4 {
2906
2761
  grid-column: span 4;
2907
2762
  }
2908
- .lg\:col-5 {
2763
+ .lg\:col-full-5 {
2909
2764
  grid-column: span 5;
2910
2765
  }
2911
- .lg\:col-6 {
2766
+ .lg\:col-full-6 {
2912
2767
  grid-column: span 6;
2913
2768
  }
2914
2769
  .lg\:col-start-1 {
@@ -2961,22 +2816,22 @@ a.card:hover, a.card:focus, a.card:focus-within {
2961
2816
  .xl\:col-full {
2962
2817
  grid-column: span var(--vb-grid-cols);
2963
2818
  }
2964
- .xl\:col-1 {
2819
+ .xl\:col-full-1 {
2965
2820
  grid-column: span 1;
2966
2821
  }
2967
- .xl\:col-2 {
2822
+ .xl\:col-full-2 {
2968
2823
  grid-column: span 2;
2969
2824
  }
2970
- .xl\:col-3 {
2825
+ .xl\:col-full-3 {
2971
2826
  grid-column: span 3;
2972
2827
  }
2973
- .xl\:col-4 {
2828
+ .xl\:col-full-4 {
2974
2829
  grid-column: span 4;
2975
2830
  }
2976
- .xl\:col-5 {
2831
+ .xl\:col-full-5 {
2977
2832
  grid-column: span 5;
2978
2833
  }
2979
- .xl\:col-6 {
2834
+ .xl\:col-full-6 {
2980
2835
  grid-column: span 6;
2981
2836
  }
2982
2837
  .xl\:col-start-1 {
@@ -3451,16 +3306,16 @@ a.card:hover, a.card:focus, a.card:focus-within {
3451
3306
  }
3452
3307
  }
3453
3308
  .icon {
3309
+ fill: none;
3454
3310
  stroke: var(--vb-icon-color);
3455
3311
  stroke-width: var(--vb-icon-stroke-width);
3456
- fill: none;
3457
- display: inline-block;
3458
3312
  box-sizing: content-box;
3313
+ display: inline-block;
3459
3314
  flex-shrink: 0;
3460
- width: 1em;
3461
- height: 1em;
3462
3315
  font-size: var(--vb-icon-size);
3316
+ height: 1em;
3463
3317
  vertical-align: top;
3318
+ width: 1em;
3464
3319
  }
3465
3320
 
3466
3321
  .icon_size_xs {
@@ -3484,55 +3339,55 @@ a.card:hover, a.card:focus, a.card:focus-within {
3484
3339
  }
3485
3340
 
3486
3341
  .icon_style_stroke {
3342
+ fill: none;
3487
3343
  stroke: var(--vb-icon-color);
3488
3344
  stroke-width: var(--vb-icon-stroke-width);
3489
- fill: none;
3490
3345
  }
3491
3346
 
3492
3347
  .icon_style_fill {
3348
+ fill: var(--vb-icon-color);
3493
3349
  stroke: none;
3494
3350
  stroke-width: 0;
3495
- fill: var(--vb-icon-color);
3496
3351
  }
3497
3352
 
3498
3353
  .icon_style_both {
3354
+ fill: var(--vb-icon-color);
3499
3355
  stroke: var(--vb-icon-color);
3500
3356
  stroke-width: var(--vb-icon-stroke-width);
3501
- fill: var(--vb-icon-color);
3502
3357
  }
3503
3358
 
3504
3359
  .input {
3505
3360
  font-size: var(--vb-input-font-size, var(--vb-form-control-font-size));
3506
3361
  line-height: var(--vb-input-line-height, var(--vb-form-control-line-height));
3507
3362
  padding: var(--vb-input-padding, var(--vb-form-control-padding-y));
3508
- transition-property: var(--vb-input-transition-property, var(--vb-form-control-transition-property));
3363
+ border-radius: var(--vb-input-border-radius, var(--vb-form-control-border-radius));
3364
+ border-width: var(--vb-input-border-width, var(--vb-form-control-border-width));
3509
3365
  transition-duration: var(--vb-input-transition-duration, var(--vb-form-control-transition-duration));
3366
+ transition-property: var(--vb-input-transition-property, var(--vb-form-control-transition-property));
3510
3367
  transition-timing-function: var(--vb-input-transition-timing-function, var(--vb-form-control-transition-timing-function));
3511
- border-width: var(--vb-input-border-width, var(--vb-form-control-border-width));
3512
- border-radius: var(--vb-input-border-radius, var(--vb-form-control-border-radius));
3513
3368
  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) transparent;
3514
3369
  outline-offset: var(--vb-focus-ring-offset);
3515
- position: relative;
3516
- display: block;
3517
- width: 100%;
3518
- max-width: 100%;
3370
+ appearance: none;
3519
3371
  border-style: solid;
3372
+ display: block;
3520
3373
  font-family: inherit;
3521
- appearance: none;
3522
- border-color: var(--vb-input-border-color, var(--vb-border-color-dark));
3374
+ max-width: 100%;
3375
+ position: relative;
3376
+ width: 100%;
3523
3377
  background-color: var(--vb-input-background, var(--vb-background));
3378
+ border-color: var(--vb-input-border-color, var(--vb-border-color-dark));
3524
3379
  box-shadow: var(--vb-input-box-shadow, inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1));
3525
3380
  color: var(--vb-input-foreground, var(--vb-foreground));
3526
3381
  }
3527
3382
  .input:hover {
3528
- border-color: var(--vb-input-border-color-hover, var(--vb-input-border-color, var(--vb-border-color-darker)));
3529
3383
  background-color: var(--vb-input-background-hover, var(--vb-input-background, var(--vb-background)));
3384
+ border-color: var(--vb-input-border-color-hover, var(--vb-input-border-color, var(--vb-border-color-darker)));
3530
3385
  box-shadow: var(--vb-input-box-shadow-hover, var(--vb-input-box-shadow, inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1)));
3531
3386
  color: var(--vb-input-foreground-hover, var(--vb-input-foreground, var(--vb-foreground)));
3532
3387
  }
3533
3388
  .input:focus {
3534
- border-color: var(--vb-input-border-color-focus, var(--vb-input-border-color-hover, var(--vb-input-border-color, var(--vb-input-accent, var(--vb-form-control-accent)))));
3535
3389
  background-color: var(--vb-input-background-focus, var(--vb-input-background-hover, var(--vb-input-background, var(--vb-background))));
3390
+ border-color: var(--vb-input-border-color-focus, var(--vb-input-border-color-hover, var(--vb-input-border-color, var(--vb-input-accent, var(--vb-form-control-accent)))));
3536
3391
  box-shadow: var(--vb-input-box-shadow-focus, var(--vb-input-box-shadow-hover, var(--vb-input-box-shadow, none)));
3537
3392
  color: var(--vb-input-foreground-focus, var(--vb-input-foreground-hover, var(--vb-input-foreground, var(--vb-foreground))));
3538
3393
  }
@@ -3573,12 +3428,12 @@ a.card:hover, a.card:focus, a.card:focus-within {
3573
3428
  }
3574
3429
 
3575
3430
  .input_type_select {
3576
- position: relative;
3577
- padding-right: 2em;
3578
3431
  background-image: var(--vb-input-select-icon);
3579
- background-repeat: no-repeat;
3580
3432
  background-position: 100% center;
3433
+ background-repeat: no-repeat;
3581
3434
  cursor: pointer;
3435
+ padding-right: 2em;
3436
+ position: relative;
3582
3437
  }
3583
3438
  .input_type_select:read-only {
3584
3439
  background-color: var(--vb-input-background, var(--vb-background));
@@ -3592,73 +3447,73 @@ a.card:hover, a.card:focus, a.card:focus-within {
3592
3447
  }
3593
3448
 
3594
3449
  .menu {
3450
+ align-items: stretch;
3595
3451
  display: flex;
3596
- gap: var(--vb-menu-gap, 1px);
3597
3452
  flex-direction: column;
3598
- align-items: stretch;
3599
3453
  font-size: var(--vb-menu-font-size, var(--vb-form-control-font-size));
3454
+ gap: var(--vb-menu-gap, 1px);
3600
3455
  line-height: var(--vb-menu-line-height, var(--vb-form-control-line-height));
3601
3456
  list-style: none;
3602
3457
  }
3603
3458
 
3604
3459
  .menu__sep {
3605
- flex: 0 0 auto;
3606
3460
  align-self: stretch;
3607
- width: auto;
3461
+ background: var(--vb-menu-sep-background, var(--vb-border-color));
3462
+ flex: 0 0 auto;
3608
3463
  height: var(--vb-menu-sep-size, 1px);
3609
3464
  margin: var(--vb-menu-sep-gap, 0.5em) 0;
3610
- background: var(--vb-menu-sep-background, var(--vb-border-color));
3465
+ width: auto;
3611
3466
  }
3612
3467
 
3613
3468
  .menu__action {
3614
3469
  padding: var(--vb-menu-padding, var(--vb-form-control-padding));
3615
- transition-property: var(--vb-menu-transition-property, var(--vb-form-control-transition-property));
3470
+ border-radius: var(--vb-menu-border-radius, var(--vb-form-control-border-radius));
3471
+ border-width: var(--vb-menu-border-width, var(--vb-form-control-border-width));
3616
3472
  transition-duration: var(--vb-menu-transition-duration, var(--vb-form-control-transition-duration));
3473
+ transition-property: var(--vb-menu-transition-property, var(--vb-form-control-transition-property));
3617
3474
  transition-timing-function: var(--vb-menu-transition-timing-function, var(--vb-form-control-transition-timing-function));
3618
- border-width: var(--vb-menu-border-width, var(--vb-form-control-border-width));
3619
- border-radius: var(--vb-menu-border-radius, var(--vb-form-control-border-radius));
3620
3475
  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) transparent;
3621
3476
  outline-offset: var(--vb-focus-ring-offset);
3622
- position: relative;
3623
- display: flex;
3624
- gap: var(--vb-menu-action-gap, 0.5em);
3625
3477
  align-items: center;
3626
- justify-content: flex-start;
3627
- width: 100%;
3628
- border-style: solid;
3629
3478
  background-clip: border-box;
3479
+ border-style: solid;
3480
+ cursor: pointer;
3481
+ display: flex;
3630
3482
  font-family: inherit;
3631
3483
  font-weight: inherit;
3484
+ gap: var(--vb-menu-action-gap, 0.5em);
3485
+ justify-content: flex-start;
3486
+ position: relative;
3632
3487
  text-decoration: none;
3633
3488
  white-space: normal;
3634
- cursor: pointer;
3635
- border-color: var(--vb-menu-border-color, transparent);
3489
+ width: 100%;
3636
3490
  background-color: var(--vb-menu-background, transparent);
3491
+ border-color: var(--vb-menu-border-color, transparent);
3637
3492
  box-shadow: var(--vb-menu-box-shadow, none);
3638
3493
  color: var(--vb-menu-foreground, var(--vb-foreground));
3639
3494
  }
3640
3495
  .menu__action:hover {
3641
- border-color: var(--vb-menu-border-color-hover, var(--vb-menu-border-color, transparent));
3642
3496
  background-color: var(--vb-menu-background-hover, var(--vb-menu-background, var(--vb-background-hover)));
3497
+ border-color: var(--vb-menu-border-color-hover, var(--vb-menu-border-color, transparent));
3643
3498
  box-shadow: var(--vb-menu-box-shadow-hover, var(--vb-menu-box-shadow, none));
3644
3499
  color: var(--vb-menu-foreground-hover, var(--vb-menu-foreground, var(--vb-foreground)));
3645
3500
  }
3646
3501
  .menu__action:focus {
3647
- border-color: var(--vb-menu-border-color-focus, var(--vb-menu-border-color-hover, var(--vb-menu-border-color, transparent)));
3648
3502
  background-color: var(--vb-menu-background-focus, var(--vb-menu-background-hover, var(--vb-menu-background, var(--vb-background-hover))));
3503
+ border-color: var(--vb-menu-border-color-focus, var(--vb-menu-border-color-hover, var(--vb-menu-border-color, transparent)));
3649
3504
  box-shadow: var(--vb-menu-box-shadow-focus, var(--vb-menu-box-shadow-hover, var(--vb-menu-box-shadow, none)));
3650
3505
  color: var(--vb-menu-foreground-focus, var(--vb-menu-foreground-hover, var(--vb-menu-foreground, var(--vb-foreground))));
3651
3506
  }
3652
3507
  .menu__action:focus-visible {
3653
3508
  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) hsl(from var(--vb-menu-focus-ring-color, var(--vb-focus-ring-color, var(--vb-menu-accent, var(--vb-form-control-accent)))) h s l/var(--vb-menu-focus-ring-opacity, var(--vb-focus-ring-opacity, 40%)));
3654
- border-color: var(--vb-menu-border-color-focus-visible, var(--vb-menu-border-color-focus, var(--vb-menu-border-color-hover, var(--vb-menu-border-color, var(--vb-menu-accent, var(--vb-form-control-accent))))));
3655
3509
  background-color: var(--vb-menu-background-focus-visible, var(--vb-menu-background-focus, var(--vb-menu-background-hover, var(--vb-menu-background, var(--vb-background-hover)))));
3510
+ border-color: var(--vb-menu-border-color-focus-visible, var(--vb-menu-border-color-focus, var(--vb-menu-border-color-hover, var(--vb-menu-border-color, var(--vb-menu-accent, var(--vb-form-control-accent))))));
3656
3511
  box-shadow: var(--vb-menu-box-shadow-focus-visible, var(--vb-menu-box-shadow-focus, var(--vb-menu-box-shadow-hover, var(--vb-menu-box-shadow, none))));
3657
3512
  color: var(--vb-menu-foreground-focus-visible, var(--vb-menu-foreground-focus, var(--vb-menu-foreground-hover, var(--vb-menu-foreground, var(--vb-foreground)))));
3658
3513
  }
3659
3514
  .menu__action:active {
3660
- border-color: var(--vb-menu-border-color-active, var(--vb-menu-border-color, transparent));
3661
3515
  background-color: var(--vb-menu-background-active, var(--vb-menu-background, var(--vb-background-active)));
3516
+ border-color: var(--vb-menu-border-color-active, var(--vb-menu-border-color, transparent));
3662
3517
  box-shadow: var(--vb-menu-box-shadow-active, var(--vb-menu-box-shadow, none));
3663
3518
  color: var(--vb-menu-foreground-active, var(--vb-menu-foreground, var(--vb-foreground)));
3664
3519
  }
@@ -3681,13 +3536,13 @@ a.card:hover, a.card:focus, a.card:focus-within {
3681
3536
  }
3682
3537
 
3683
3538
  .menu_inline {
3684
- flex-direction: row;
3685
3539
  align-items: center;
3540
+ flex-direction: row;
3686
3541
  }
3687
3542
  .menu_inline .menu__sep {
3688
- width: var(--vb-menu-sep-size, 1px);
3689
3543
  height: auto;
3690
3544
  margin: 0 var(--vb-menu-sep-gap, 0.5em);
3545
+ width: var(--vb-menu-sep-size, 1px);
3691
3546
  }
3692
3547
  .menu_inline .menu__action {
3693
3548
  justify-content: center;
@@ -3702,46 +3557,40 @@ a.card:hover, a.card:focus, a.card:focus-within {
3702
3557
  --vb-menu-font-size: var(--vb-font-size-lg);
3703
3558
  }
3704
3559
 
3705
- /**
3706
- * Modal
3707
- */
3708
3560
  .modal {
3709
- position: fixed;
3710
- z-index: var(--vb-modal-z-index, 1000);
3711
- top: 0;
3712
- right: 0;
3561
+ align-items: center;
3713
3562
  display: flex;
3714
- visibility: hidden;
3715
3563
  flex-direction: column;
3716
- align-items: center;
3717
- justify-content: center;
3718
- width: 0;
3719
3564
  height: 0;
3565
+ justify-content: center;
3720
3566
  overflow: hidden;
3567
+ position: fixed;
3568
+ right: 0;
3569
+ top: 0;
3570
+ visibility: hidden;
3571
+ width: 0;
3572
+ z-index: var(--vb-modal-z-index, 1000);
3721
3573
  }
3722
3574
  .modal::before {
3575
+ background-color: var(--vb-modal-screen-color, var(--vb-screen-color));
3723
3576
  content: "";
3724
- position: absolute;
3725
- inset: 0;
3726
- width: 100%;
3727
3577
  height: 100%;
3728
- background-color: var(--vb-modal-screen-color, var(--vb-screen-color));
3578
+ inset: 0;
3729
3579
  opacity: 0;
3580
+ position: absolute;
3581
+ width: 100%;
3730
3582
  }
3731
3583
 
3732
3584
  .modal__dialog {
3733
- width: var(--vb-modal-width, 36em);
3734
3585
  max-width: var(--vb-modal-max-width, 100%);
3586
+ opacity: 0;
3735
3587
  overflow: auto;
3736
3588
  transform: translateY(calc(var(--vb-modal-travel, 5em) * -1));
3737
3589
  transition-duration: var(--vb-modal-transition-duration, var(--vb-dialog-transition-duration, var(--vb-transition-duration)));
3738
3590
  transition-timing-function: var(--vb-modal-transition-timing-function, var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function)));
3739
- opacity: 0;
3591
+ width: var(--vb-modal-width, 36em);
3740
3592
  }
3741
3593
 
3742
- /**
3743
- * State classes
3744
- */
3745
3594
  .modal.is-closed {
3746
3595
  visibility: hidden;
3747
3596
  }
@@ -3749,10 +3598,10 @@ a.card:hover, a.card:focus, a.card:focus-within {
3749
3598
  .modal.is-opening,
3750
3599
  .modal.is-opened,
3751
3600
  .modal.is-closing {
3752
- visibility: visible;
3753
- width: 100%;
3754
3601
  height: 100%;
3755
3602
  padding: var(--vb-modal-screen-padding, var(--vb-screen-padding));
3603
+ visibility: visible;
3604
+ width: 100%;
3756
3605
  }
3757
3606
 
3758
3607
  .modal.is-opening::before,
@@ -3761,8 +3610,8 @@ a.card:hover, a.card:focus, a.card:focus-within {
3761
3610
  }
3762
3611
  .modal.is-opening .modal__dialog,
3763
3612
  .modal.is-closing .modal__dialog {
3764
- transition-property: opacity, transform;
3765
3613
  transition-duration: var(--vb-modal-transition-duration, var(--vb-dialog-transition-duration, var(--vb-transition-duration)));
3614
+ transition-property: opacity, transform;
3766
3615
  transition-timing-function: var(--vb-modal-transition-timing-function, var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function)));
3767
3616
  }
3768
3617
 
@@ -3772,8 +3621,8 @@ a.card:hover, a.card:focus, a.card:focus-within {
3772
3621
  }
3773
3622
  .modal.is-opening .modal__dialog,
3774
3623
  .modal.is-opened .modal__dialog {
3775
- transform: translateY(0);
3776
3624
  opacity: 1;
3625
+ transform: translateY(0);
3777
3626
  }
3778
3627
 
3779
3628
  .modal.is-closing .modal__dialog {
@@ -3781,9 +3630,9 @@ a.card:hover, a.card:focus, a.card:focus-within {
3781
3630
  }
3782
3631
 
3783
3632
  .modal_full .modal__dialog {
3784
- width: 100%;
3785
3633
  height: 100%;
3786
3634
  transform: scale(var(--vb-modal-full-scale, 0.75));
3635
+ width: 100%;
3787
3636
  }
3788
3637
  .modal_full.is-opened .modal__dialog, .modal_full.is-opening .modal__dialog {
3789
3638
  transform: scale(1);
@@ -3856,12 +3705,12 @@ a.card:hover, a.card:focus, a.card:focus-within {
3856
3705
  }
3857
3706
 
3858
3707
  .notice {
3859
- padding: var(--vb-notice-padding);
3708
+ background: var(--vb-notice-background);
3860
3709
  border: var(--vb-notice-border);
3861
3710
  border-radius: var(--vb-notice-border-radius);
3862
- background: var(--vb-notice-background);
3863
3711
  box-shadow: var(--vb-notice-box-shadow);
3864
3712
  color: var(--vb-notice-foreground);
3713
+ padding: var(--vb-notice-padding);
3865
3714
  }
3866
3715
  .notice > * + * {
3867
3716
  margin-top: var(--vb-notice-gap);
@@ -3894,84 +3743,84 @@ a.card:hover, a.card:focus, a.card:focus-within {
3894
3743
  }
3895
3744
 
3896
3745
  .popover {
3897
- position: absolute;
3898
- z-index: var(--vb-popover-z-index, 10);
3899
- top: 0;
3900
- left: 0;
3901
- display: block;
3902
- width: var(--vb-popover-width, 16em);
3903
- max-width: var(--vb-popover-max-width, calc(100vw - 20px));
3904
- margin: 0;
3905
- padding: var(--vb-popover-padding, 0.5em);
3906
- transition-property: var(--vb-popover-transition-property, opacity);
3907
- transition-duration: var(--vb-popover-transition-duration, var(--vb-transition-duration-short));
3908
- transition-timing-function: var(--vb-popover-transition-timing-function, var(--vb-transition-timing-function));
3909
- border: var(--vb-popover-border);
3910
- border-radius: var(--vb-popover-border-radius, 0.25rem);
3911
3746
  background: var(--vb-popover-background, var(--vb-background));
3912
3747
  background-clip: padding-box;
3748
+ border: var(--vb-popover-border);
3749
+ border-radius: var(--vb-popover-border-radius, 0.25rem);
3913
3750
  box-shadow: var(--vb-popover-box-shadow, var(--vb-box-shadow-2));
3914
- opacity: 0;
3915
3751
  color: var(--vb-popover-foreground, var(--vb-foreground));
3752
+ display: block;
3916
3753
  font-size: var(--vb-popover-font-size, 0.875rem);
3754
+ left: 0;
3917
3755
  line-height: var(--vb-popover-line-height);
3756
+ margin: 0;
3757
+ max-width: var(--vb-popover-max-width, calc(100vw - 20px));
3758
+ opacity: 0;
3759
+ padding: var(--vb-popover-padding, 0.5em);
3918
3760
  pointer-events: none;
3761
+ position: absolute;
3762
+ top: 0;
3763
+ transition-duration: var(--vb-popover-transition-duration, var(--vb-transition-duration-short));
3764
+ transition-property: var(--vb-popover-transition-property, opacity);
3765
+ transition-timing-function: var(--vb-popover-transition-timing-function, var(--vb-transition-timing-function));
3766
+ width: var(--vb-popover-width, 16em);
3767
+ z-index: var(--vb-popover-z-index, 10);
3919
3768
  }
3920
3769
  .popover::before {
3921
3770
  content: "";
3922
- position: absolute;
3771
+ height: calc((var(--vb-popover-offset) + 1) * 1px);
3923
3772
  inset: auto 0 100%;
3773
+ position: absolute;
3924
3774
  width: 100%;
3925
- height: calc((var(--vb-popover-offset) + 1) * 1px);
3926
3775
  }
3927
3776
  .popover.is-active {
3928
- z-index: calc(var(--vb-popover-z-index, 10) + 1);
3929
3777
  opacity: 1;
3930
3778
  pointer-events: auto;
3779
+ z-index: calc(var(--vb-popover-z-index, 10) + 1);
3931
3780
  }
3932
3781
  .popover:hover, .popover:focus, .popover:focus-within {
3933
3782
  z-index: calc(var(--vb-popover-z-index, 10) + 2);
3934
3783
  }
3935
3784
 
3936
3785
  .popover[data-floating-placement^=top]::before {
3786
+ height: calc((var(--vb-popover-offset) + 1) * 1px);
3937
3787
  inset: 100% 0 auto;
3938
3788
  width: 100%;
3939
- height: calc((var(--vb-popover-offset) + 1) * 1px);
3940
3789
  }
3941
3790
 
3942
3791
  .popover[data-floating-placement^=bottom]::before {
3792
+ height: calc((var(--vb-popover-offset) + 1) * 1px);
3943
3793
  inset: auto 0 100%;
3944
3794
  width: 100%;
3945
- height: calc((var(--vb-popover-offset) + 1) * 1px);
3946
3795
  }
3947
3796
 
3948
3797
  .popover[data-floating-placement^=left]::before {
3798
+ height: 100%;
3949
3799
  inset: 0 auto 0 100%;
3950
3800
  width: calc((var(--vb-popover-offset) + 1) * 1px);
3951
- height: 100%;
3952
3801
  }
3953
3802
 
3954
3803
  .popover[data-floating-placement^=right]::before {
3804
+ height: 100%;
3955
3805
  inset: 0 100% 0 auto;
3956
3806
  width: calc((var(--vb-popover-offset) + 1) * 1px);
3957
- height: 100%;
3958
3807
  }
3959
3808
 
3960
3809
  .popover__arrow,
3961
3810
  .popover__arrow::after {
3962
- width: var(--vb-popover-arrow-size, 8px);
3963
3811
  height: var(--vb-popover-arrow-size, 8px);
3812
+ width: var(--vb-popover-arrow-size, 8px);
3813
+ background-color: inherit;
3964
3814
  position: absolute;
3965
- z-index: -1;
3966
3815
  visibility: hidden;
3967
- background-color: inherit;
3816
+ z-index: -1;
3968
3817
  }
3969
3818
 
3970
3819
  .popover__arrow::after {
3820
+ background-clip: padding-box;
3971
3821
  content: "";
3972
- visibility: visible;
3973
3822
  transform: rotate(45deg);
3974
- background-clip: padding-box;
3823
+ visibility: visible;
3975
3824
  }
3976
3825
 
3977
3826
  [data-floating-placement^=top] > .popover__arrow {
@@ -4029,90 +3878,90 @@ a.card:hover, a.card:focus, a.card:focus-within {
4029
3878
  }
4030
3879
 
4031
3880
  .radio {
4032
- position: relative;
3881
+ align-items: center;
4033
3882
  display: inline-flex;
4034
3883
  flex: 0 0 auto;
4035
- align-items: center;
4036
- justify-content: center;
4037
3884
  font-size: var(--vb-radio-font-size, var(--vb-form-control-font-size));
3885
+ justify-content: center;
3886
+ position: relative;
4038
3887
  vertical-align: middle;
4039
3888
  }
4040
3889
 
4041
3890
  .radio__background {
4042
- width: var(--vb-radio-size, var(--vb-form-control-size));
4043
3891
  height: var(--vb-radio-size, var(--vb-form-control-size));
4044
- position: relative;
4045
- z-index: 1;
4046
- display: flex;
3892
+ width: var(--vb-radio-size, var(--vb-form-control-size));
4047
3893
  align-items: center;
4048
- justify-content: center;
4049
- border-radius: var(--vb-radio-background-border-radius, var(--vb-form-control-background-border-radius));
4050
3894
  background-color: hsl(from var(--vb-radio-accent, var(--vb-form-control-accent)) h s l/var(--vb-radio-background-opacity, var(--vb-form-control-background-opacity)));
3895
+ border-radius: var(--vb-radio-background-border-radius, var(--vb-form-control-background-border-radius));
3896
+ display: flex;
3897
+ justify-content: center;
3898
+ position: relative;
3899
+ z-index: 1;
4051
3900
  }
4052
3901
 
4053
3902
  .radio__circle {
4054
- width: var(--vb-radio-circle-size, 1.25em);
4055
3903
  height: var(--vb-radio-circle-size, 1.25em);
4056
- display: flex;
3904
+ width: var(--vb-radio-circle-size, 1.25em);
4057
3905
  align-items: center;
4058
- justify-content: center;
3906
+ background-color: var(--vb-radio-background, var(--vb-radio-background, var(--vb-form-control-background)));
4059
3907
  border: var(--vb-radio-border-width, 2px) solid var(--vb-radio-foreground, var(--vb-form-control-foreground));
4060
3908
  border-radius: var(--vb-radio-circle-size, 1.25em);
4061
- background-color: var(--vb-radio-background, var(--vb-radio-background, var(--vb-form-control-background)));
4062
3909
  color: transparent;
3910
+ display: flex;
3911
+ justify-content: center;
4063
3912
  }
4064
3913
 
4065
3914
  .radio__dot {
4066
- width: 0;
4067
3915
  height: 0;
4068
- border-radius: var(--vb-radio-dot-size, 0.5em);
3916
+ width: 0;
4069
3917
  background-color: var(--vb-radio-background, var(--vb-radio-background, var(--vb-form-control-background)));
3918
+ border-radius: var(--vb-radio-dot-size, 0.5em);
4070
3919
  opacity: 0;
4071
3920
  }
4072
3921
 
4073
3922
  .radio__native {
4074
- width: 100%;
4075
3923
  height: 100%;
4076
- position: absolute;
4077
- z-index: 2;
4078
- top: 0;
3924
+ width: 100%;
3925
+ cursor: pointer;
4079
3926
  left: 0;
4080
3927
  opacity: 0;
4081
- cursor: pointer;
3928
+ position: absolute;
3929
+ top: 0;
3930
+ z-index: 2;
4082
3931
  }
4083
3932
  .radio__native:hover + .radio__background {
4084
3933
  background-color: hsl(from var(--vb-radio-accent, var(--vb-form-control-accent)) h s l/var(--vb-radio-background-opacity-hover, var(--vb-form-control-background-opacity-hover)));
4085
3934
  }
4086
3935
  .radio__native:hover + .radio__background .radio__circle {
4087
- border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
4088
3936
  background-color: var(--vb-radio-background, var(--vb-radio-background, var(--vb-form-control-background)));
3937
+ border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
4089
3938
  }
4090
3939
  .radio__native:focus + .radio__background {
4091
3940
  background-color: hsl(from var(--vb-radio-accent, var(--vb-form-control-accent)) h s l/var(--vb-radio-background-opacity-focus, var(--vb-form-control-background-opacity-focus)));
4092
3941
  }
4093
3942
  .radio__native:focus + .radio__background .radio__circle {
4094
- border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
4095
3943
  background-color: var(--vb-radio-background, var(--vb-radio-background, var(--vb-form-control-background)));
3944
+ border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
4096
3945
  }
4097
3946
  .radio__native:focus-visible + .radio__background, .radio__native:active + .radio__background {
4098
3947
  background-color: hsl(from var(--vb-radio-accent, var(--vb-form-control-accent)) h s l/var(--vb-radio-background-opacity-active, var(--vb-form-control-background-opacity-active)));
4099
3948
  }
4100
3949
  .radio__native:focus-visible + .radio__background .radio__circle, .radio__native:active + .radio__background .radio__circle {
4101
- border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
4102
3950
  background-color: var(--vb-radio-background, var(--vb-radio-background, var(--vb-form-control-background)));
3951
+ border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
4103
3952
  }
4104
3953
  .radio__native:checked + .radio__background .radio__circle {
4105
- border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
4106
3954
  background-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
3955
+ border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
4107
3956
  }
4108
3957
  .radio__native:checked + .radio__background .radio__dot {
4109
- width: var(--vb-radio-dot-size, 0.5em);
4110
3958
  height: var(--vb-radio-dot-size, 0.5em);
4111
- transition-property: opacity, width, height;
4112
- transition-duration: var(--vb-radio-transition-duration, var(--vb-form-control-transition-duration));
4113
- transition-timing-function: var(--vb-radio-transition-timing-function, var(--vb-form-control-transition-timing-function));
3959
+ width: var(--vb-radio-dot-size, 0.5em);
4114
3960
  background-position: center center;
4115
3961
  opacity: 1;
3962
+ transition-duration: var(--vb-radio-transition-duration, var(--vb-form-control-transition-duration));
3963
+ transition-property: opacity, width, height;
3964
+ transition-timing-function: var(--vb-radio-transition-timing-function, var(--vb-form-control-transition-timing-function));
4116
3965
  }
4117
3966
 
4118
3967
  .radio_size_sm {
@@ -4124,12 +3973,12 @@ a.card:hover, a.card:focus, a.card:focus-within {
4124
3973
  }
4125
3974
 
4126
3975
  .section {
4127
- position: relative;
3976
+ background: var(--vb-section-background);
3977
+ color: var(--vb-section-foreground);
4128
3978
  display: flex;
4129
3979
  flex-direction: column;
4130
3980
  padding: var(--vb-section-padding);
4131
- background: var(--vb-section-background);
4132
- color: var(--vb-section-foreground);
3981
+ position: relative;
4133
3982
  --vb-section-padding: 1.5em;
4134
3983
  }
4135
3984
  @media (min-width: 760px) {
@@ -4144,31 +3993,31 @@ a.card:hover, a.card:focus, a.card:focus-within {
4144
3993
  }
4145
3994
 
4146
3995
  .section__container {
3996
+ margin: auto;
3997
+ max-width: var(--vb-section-max-width);
4147
3998
  position: relative;
4148
- z-index: 3;
4149
3999
  width: 100%;
4150
- max-width: var(--vb-section-max-width);
4151
- margin: auto;
4000
+ z-index: 3;
4152
4001
  }
4153
4002
 
4154
4003
  .section__image,
4155
4004
  .section__screen {
4156
- width: 100%;
4157
4005
  height: 100%;
4158
- position: absolute;
4006
+ width: 100%;
4159
4007
  inset: 0;
4008
+ position: absolute;
4160
4009
  }
4161
4010
 
4162
4011
  .section__image {
4163
4012
  object-fit: cover;
4164
- z-index: 1;
4165
4013
  opacity: var(--vb-section-image-opacity);
4014
+ z-index: 1;
4166
4015
  }
4167
4016
 
4168
4017
  .section__screen {
4169
- z-index: 2;
4170
4018
  background: var(--vb-section-screen-background);
4171
4019
  opacity: var(--vb-section-screen-opacity);
4020
+ z-index: 2;
4172
4021
  }
4173
4022
 
4174
4023
  .section_size_sm {
@@ -4223,71 +4072,71 @@ a.card:hover, a.card:focus, a.card:focus-within {
4223
4072
  }
4224
4073
 
4225
4074
  .switch {
4226
- position: relative;
4075
+ align-items: center;
4227
4076
  display: inline-flex;
4228
4077
  flex: 0 0 auto;
4229
- align-items: center;
4078
+ font-size: var(--vb-switch-font-size, var(--vb-form-control-font-size));
4230
4079
  justify-content: center;
4231
- padding-right: calc(var(--vb-switch-size, var(--vb-form-control-size)) * 0.25);
4232
4080
  padding-left: calc(var(--vb-switch-size, var(--vb-form-control-size)) * 0.25);
4233
- font-size: var(--vb-switch-font-size, var(--vb-form-control-font-size));
4081
+ padding-right: calc(var(--vb-switch-size, var(--vb-form-control-size)) * 0.25);
4082
+ position: relative;
4234
4083
  vertical-align: middle;
4235
4084
  }
4236
4085
 
4237
4086
  .switch__background {
4238
- width: var(--vb-switch-size, var(--vb-form-control-size));
4239
4087
  height: var(--vb-switch-size, var(--vb-form-control-size));
4240
- position: relative;
4241
- z-index: 1;
4242
- display: flex;
4088
+ width: var(--vb-switch-size, var(--vb-form-control-size));
4243
4089
  align-items: center;
4090
+ display: flex;
4244
4091
  justify-content: center;
4092
+ position: relative;
4093
+ z-index: 1;
4245
4094
  }
4246
4095
  .switch__background::after {
4247
- width: var(--vb-switch-size, var(--vb-form-control-size));
4248
4096
  height: var(--vb-switch-size, var(--vb-form-control-size));
4097
+ width: var(--vb-switch-size, var(--vb-form-control-size));
4098
+ background-color: hsl(from var(--vb-switch-accent, var(--vb-form-control-accent)) h s l/var(--vb-switch-background-opacity, var(--vb-form-control-background-opacity)));
4099
+ border-radius: var(--vb-switch-background-border-radius, var(--vb-form-control-background-border-radius));
4249
4100
  content: "";
4101
+ left: calc(var(--vb-switch-size, var(--vb-form-control-size)) * 0.25 * -1);
4250
4102
  position: absolute;
4251
4103
  top: 0;
4252
- left: calc(var(--vb-switch-size, var(--vb-form-control-size)) * 0.25 * -1);
4253
4104
  transition: left var(--vb-switch-transition-duration, var(--vb-form-control-transition-duration)) var(--vb-switch-transition-timing-function, var(--vb-form-control-transition-timing-function));
4254
- border-radius: var(--vb-switch-background-border-radius, var(--vb-form-control-background-border-radius));
4255
- background-color: hsl(from var(--vb-switch-accent, var(--vb-form-control-accent)) h s l/var(--vb-switch-background-opacity, var(--vb-form-control-background-opacity)));
4256
4105
  }
4257
4106
 
4258
4107
  .switch__track {
4259
- width: 100%;
4260
4108
  height: var(--vb-switch-track-size, 1.25em);
4261
- position: relative;
4262
- display: block;
4109
+ width: 100%;
4110
+ background-color: hsl(from var(--vb-switch-foreground, var(--vb-form-control-foreground)) h s l/20%);
4263
4111
  border: var(--vb-switch-border-width, 2px) solid var(--vb-switch-foreground, var(--vb-form-control-foreground));
4264
4112
  border-radius: var(--vb-switch-border-radius, var(--vb-border-radius-circle));
4265
- background-color: hsl(from var(--vb-switch-foreground, var(--vb-form-control-foreground)) h s l/20%);
4113
+ display: block;
4114
+ position: relative;
4266
4115
  }
4267
4116
 
4268
4117
  .switch__thumb {
4269
- width: calc(var(--vb-switch-track-size, 1.25em) - var(--vb-switch-border-width, 2px) * 2);
4270
4118
  height: calc(var(--vb-switch-track-size, 1.25em) - var(--vb-switch-border-width, 2px) * 2);
4119
+ width: calc(var(--vb-switch-track-size, 1.25em) - var(--vb-switch-border-width, 2px) * 2);
4120
+ background-color: var(--vb-switch-background, var(--vb-switch-background, var(--vb-form-control-background)));
4121
+ border-radius: var(--vb-switch-border-radius, var(--vb-border-radius-circle));
4122
+ box-shadow: 0 0 0 var(--vb-switch-border-width, 2px) var(--vb-switch-foreground, var(--vb-form-control-foreground));
4123
+ display: block;
4124
+ left: 0;
4271
4125
  position: absolute;
4272
- z-index: 1;
4273
4126
  top: 0;
4274
- left: 0;
4275
- display: block;
4276
4127
  transition: left var(--vb-switch-transition-duration, var(--vb-form-control-transition-duration)) var(--vb-switch-transition-timing-function, var(--vb-form-control-transition-timing-function));
4277
- border-radius: var(--vb-switch-border-radius, var(--vb-border-radius-circle));
4278
- background-color: var(--vb-switch-background, var(--vb-switch-background, var(--vb-form-control-background)));
4279
- box-shadow: 0 0 0 var(--vb-switch-border-width, 2px) var(--vb-switch-foreground, var(--vb-form-control-foreground));
4128
+ z-index: 1;
4280
4129
  }
4281
4130
 
4282
4131
  .switch__native {
4283
- width: 100%;
4284
4132
  height: 100%;
4285
- position: absolute;
4286
- z-index: 2;
4287
- top: 0;
4133
+ width: 100%;
4134
+ cursor: pointer;
4288
4135
  left: 0;
4289
4136
  opacity: 0;
4290
- cursor: pointer;
4137
+ position: absolute;
4138
+ top: 0;
4139
+ z-index: 2;
4291
4140
  }
4292
4141
  .switch__native:hover + .switch__background::after {
4293
4142
  background-color: hsl(from var(--vb-switch-accent, var(--vb-form-control-accent)) h s l/var(--vb-switch-background-opacity-hover, var(--vb-form-control-background-opacity-hover)));
@@ -4311,12 +4160,12 @@ a.card:hover, a.card:focus, a.card:focus-within {
4311
4160
  left: calc(100% - var(--vb-switch-size, var(--vb-form-control-size)) * 0.75);
4312
4161
  }
4313
4162
  .switch__native:checked + .switch__background .switch__track {
4314
- border-color: var(--vb-switch-accent, var(--vb-switch-accent, var(--vb-form-control-accent)));
4315
4163
  background-color: var(--vb-switch-accent, var(--vb-switch-accent, var(--vb-form-control-accent)));
4164
+ border-color: var(--vb-switch-accent, var(--vb-switch-accent, var(--vb-form-control-accent)));
4316
4165
  }
4317
4166
  .switch__native:checked + .switch__background .switch__thumb {
4318
- left: calc(100% - calc(var(--vb-switch-track-size, 1.25em) - var(--vb-switch-border-width, 2px) * 2));
4319
4167
  box-shadow: 0 0 0 var(--vb-switch-border-width, 2px) var(--vb-switch-accent, var(--vb-switch-accent, var(--vb-form-control-accent)));
4168
+ left: calc(100% - calc(var(--vb-switch-track-size, 1.25em) - var(--vb-switch-border-width, 2px) * 2));
4320
4169
  }
4321
4170
 
4322
4171
  .switch_size_sm {
@@ -4328,10 +4177,10 @@ a.card:hover, a.card:focus, a.card:focus-within {
4328
4177
  }
4329
4178
 
4330
4179
  .table {
4331
- width: 100%;
4332
4180
  background-color: var(--vb-table-background);
4333
4181
  color: var(--vb-table-foreground);
4334
4182
  text-align: left;
4183
+ width: 100%;
4335
4184
  }
4336
4185
  .table th,
4337
4186
  .table td,
@@ -4344,8 +4193,8 @@ a.card:hover, a.card:focus, a.card:focus-within {
4344
4193
  }
4345
4194
 
4346
4195
  .table__auto {
4347
- width: 0;
4348
4196
  white-space: nowrap;
4197
+ width: 0;
4349
4198
  }
4350
4199
 
4351
4200
  .table_ellipsis {
@@ -4364,9 +4213,9 @@ a.card:hover, a.card:focus, a.card:focus-within {
4364
4213
  }
4365
4214
  .table_hover tbody tr:hover,
4366
4215
  .table_hover tbody tr:focus {
4367
- z-index: 2;
4368
4216
  background-color: var(--vb-table-background-hover);
4369
4217
  color: var(--vb-table-foreground-hover);
4218
+ z-index: 2;
4370
4219
  }
4371
4220
 
4372
4221
  .table_responsive thead,
@@ -4378,29 +4227,29 @@ a.card:hover, a.card:focus, a.card:focus-within {
4378
4227
  }
4379
4228
  .table_responsive thead,
4380
4229
  .table_responsive [rowspan] {
4230
+ left: -9999px;
4381
4231
  position: absolute;
4382
4232
  top: -9999px;
4383
- left: -9999px;
4384
4233
  }
4385
4234
  .table_responsive [data-mobile-label] {
4386
- position: relative;
4387
4235
  padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
4236
+ position: relative;
4388
4237
  white-space: normal;
4389
4238
  }
4390
4239
  .table_responsive [data-mobile-label]::before {
4391
- content: attr(data-mobile-label);
4392
- position: absolute;
4393
- top: 0;
4394
- bottom: 0;
4395
- left: 0;
4396
- width: var(--vb-table-mobile-label-width);
4397
- padding: var(--vb-table-padding);
4398
- overflow: hidden;
4399
4240
  background-color: var(--vb-table-mobile-label-background);
4241
+ bottom: 0;
4400
4242
  color: var(--vb-table-mobile-label-foreground);
4243
+ content: attr(data-mobile-label);
4401
4244
  font-weight: var(--vb-font-weight-bold);
4245
+ left: 0;
4246
+ overflow: hidden;
4247
+ padding: var(--vb-table-padding);
4248
+ position: absolute;
4402
4249
  text-overflow: ellipsis;
4250
+ top: 0;
4403
4251
  white-space: nowrap;
4252
+ width: var(--vb-table-mobile-label-width);
4404
4253
  }
4405
4254
  .table_responsive.table_style_bordered {
4406
4255
  border: var(--vb-table-border);
@@ -4420,261 +4269,261 @@ a.card:hover, a.card:focus, a.card:focus-within {
4420
4269
  }
4421
4270
 
4422
4271
  @media (max-width: 479px) {
4423
- .table_responsive_xs thead,
4424
- .table_responsive_xs tbody,
4425
- .table_responsive_xs tr,
4426
- .table_responsive_xs th,
4427
- .table_responsive_xs td {
4272
+ .xs\:table_responsive thead,
4273
+ .xs\:table_responsive tbody,
4274
+ .xs\:table_responsive tr,
4275
+ .xs\:table_responsive th,
4276
+ .xs\:table_responsive td {
4428
4277
  display: block;
4429
4278
  }
4430
- .table_responsive_xs thead,
4431
- .table_responsive_xs [rowspan] {
4279
+ .xs\:table_responsive thead,
4280
+ .xs\:table_responsive [rowspan] {
4281
+ left: -9999px;
4432
4282
  position: absolute;
4433
4283
  top: -9999px;
4434
- left: -9999px;
4435
4284
  }
4436
- .table_responsive_xs [data-mobile-label] {
4437
- position: relative;
4285
+ .xs\:table_responsive [data-mobile-label] {
4438
4286
  padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
4287
+ position: relative;
4439
4288
  white-space: normal;
4440
4289
  }
4441
- .table_responsive_xs [data-mobile-label]::before {
4442
- content: attr(data-mobile-label);
4443
- position: absolute;
4444
- top: 0;
4445
- bottom: 0;
4446
- left: 0;
4447
- width: var(--vb-table-mobile-label-width);
4448
- padding: var(--vb-table-padding);
4449
- overflow: hidden;
4290
+ .xs\:table_responsive [data-mobile-label]::before {
4450
4291
  background-color: var(--vb-table-mobile-label-background);
4292
+ bottom: 0;
4451
4293
  color: var(--vb-table-mobile-label-foreground);
4294
+ content: attr(data-mobile-label);
4452
4295
  font-weight: var(--vb-font-weight-bold);
4296
+ left: 0;
4297
+ overflow: hidden;
4298
+ padding: var(--vb-table-padding);
4299
+ position: absolute;
4453
4300
  text-overflow: ellipsis;
4301
+ top: 0;
4454
4302
  white-space: nowrap;
4303
+ width: var(--vb-table-mobile-label-width);
4455
4304
  }
4456
- .table_responsive_xs.table_style_bordered {
4305
+ .xs\:table_responsive.table_style_bordered {
4457
4306
  border: var(--vb-table-border);
4458
4307
  }
4459
- .table_responsive_xs.table_style_bordered td {
4308
+ .xs\:table_responsive.table_style_bordered td {
4460
4309
  border: none;
4461
4310
  }
4462
- .table_responsive_xs.table_style_bordered td + td,
4463
- .table_responsive_xs.table_style_bordered th + td {
4311
+ .xs\:table_responsive.table_style_bordered td + td,
4312
+ .xs\:table_responsive.table_style_bordered th + td {
4464
4313
  border-top: var(--vb-table-border-alt);
4465
4314
  }
4466
- .table_responsive_xs.table_style_bordered [data-mobile-label]::before {
4315
+ .xs\:table_responsive.table_style_bordered [data-mobile-label]::before {
4467
4316
  border-right: var(--vb-table-border);
4468
4317
  }
4469
- .table_responsive_xs.table_style_bordered tr + tr {
4318
+ .xs\:table_responsive.table_style_bordered tr + tr {
4470
4319
  border-top: var(--vb-table-border);
4471
4320
  }
4472
4321
  }
4473
4322
 
4474
4323
  @media (max-width: 619px) {
4475
- .table_responsive_sm thead,
4476
- .table_responsive_sm tbody,
4477
- .table_responsive_sm tr,
4478
- .table_responsive_sm th,
4479
- .table_responsive_sm td {
4324
+ .sm\:table_responsive thead,
4325
+ .sm\:table_responsive tbody,
4326
+ .sm\:table_responsive tr,
4327
+ .sm\:table_responsive th,
4328
+ .sm\:table_responsive td {
4480
4329
  display: block;
4481
4330
  }
4482
- .table_responsive_sm thead,
4483
- .table_responsive_sm [rowspan] {
4331
+ .sm\:table_responsive thead,
4332
+ .sm\:table_responsive [rowspan] {
4333
+ left: -9999px;
4484
4334
  position: absolute;
4485
4335
  top: -9999px;
4486
- left: -9999px;
4487
4336
  }
4488
- .table_responsive_sm [data-mobile-label] {
4489
- position: relative;
4337
+ .sm\:table_responsive [data-mobile-label] {
4490
4338
  padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
4339
+ position: relative;
4491
4340
  white-space: normal;
4492
4341
  }
4493
- .table_responsive_sm [data-mobile-label]::before {
4494
- content: attr(data-mobile-label);
4495
- position: absolute;
4496
- top: 0;
4497
- bottom: 0;
4498
- left: 0;
4499
- width: var(--vb-table-mobile-label-width);
4500
- padding: var(--vb-table-padding);
4501
- overflow: hidden;
4342
+ .sm\:table_responsive [data-mobile-label]::before {
4502
4343
  background-color: var(--vb-table-mobile-label-background);
4344
+ bottom: 0;
4503
4345
  color: var(--vb-table-mobile-label-foreground);
4346
+ content: attr(data-mobile-label);
4504
4347
  font-weight: var(--vb-font-weight-bold);
4348
+ left: 0;
4349
+ overflow: hidden;
4350
+ padding: var(--vb-table-padding);
4351
+ position: absolute;
4505
4352
  text-overflow: ellipsis;
4353
+ top: 0;
4506
4354
  white-space: nowrap;
4355
+ width: var(--vb-table-mobile-label-width);
4507
4356
  }
4508
- .table_responsive_sm.table_style_bordered {
4357
+ .sm\:table_responsive.table_style_bordered {
4509
4358
  border: var(--vb-table-border);
4510
4359
  }
4511
- .table_responsive_sm.table_style_bordered td {
4360
+ .sm\:table_responsive.table_style_bordered td {
4512
4361
  border: none;
4513
4362
  }
4514
- .table_responsive_sm.table_style_bordered td + td,
4515
- .table_responsive_sm.table_style_bordered th + td {
4363
+ .sm\:table_responsive.table_style_bordered td + td,
4364
+ .sm\:table_responsive.table_style_bordered th + td {
4516
4365
  border-top: var(--vb-table-border-alt);
4517
4366
  }
4518
- .table_responsive_sm.table_style_bordered [data-mobile-label]::before {
4367
+ .sm\:table_responsive.table_style_bordered [data-mobile-label]::before {
4519
4368
  border-right: var(--vb-table-border);
4520
4369
  }
4521
- .table_responsive_sm.table_style_bordered tr + tr {
4370
+ .sm\:table_responsive.table_style_bordered tr + tr {
4522
4371
  border-top: var(--vb-table-border);
4523
4372
  }
4524
4373
  }
4525
4374
 
4526
4375
  @media (max-width: 759px) {
4527
- .table_responsive_md thead,
4528
- .table_responsive_md tbody,
4529
- .table_responsive_md tr,
4530
- .table_responsive_md th,
4531
- .table_responsive_md td {
4376
+ .md\:table_responsive thead,
4377
+ .md\:table_responsive tbody,
4378
+ .md\:table_responsive tr,
4379
+ .md\:table_responsive th,
4380
+ .md\:table_responsive td {
4532
4381
  display: block;
4533
4382
  }
4534
- .table_responsive_md thead,
4535
- .table_responsive_md [rowspan] {
4383
+ .md\:table_responsive thead,
4384
+ .md\:table_responsive [rowspan] {
4385
+ left: -9999px;
4536
4386
  position: absolute;
4537
4387
  top: -9999px;
4538
- left: -9999px;
4539
4388
  }
4540
- .table_responsive_md [data-mobile-label] {
4541
- position: relative;
4389
+ .md\:table_responsive [data-mobile-label] {
4542
4390
  padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
4391
+ position: relative;
4543
4392
  white-space: normal;
4544
4393
  }
4545
- .table_responsive_md [data-mobile-label]::before {
4546
- content: attr(data-mobile-label);
4547
- position: absolute;
4548
- top: 0;
4549
- bottom: 0;
4550
- left: 0;
4551
- width: var(--vb-table-mobile-label-width);
4552
- padding: var(--vb-table-padding);
4553
- overflow: hidden;
4394
+ .md\:table_responsive [data-mobile-label]::before {
4554
4395
  background-color: var(--vb-table-mobile-label-background);
4396
+ bottom: 0;
4555
4397
  color: var(--vb-table-mobile-label-foreground);
4398
+ content: attr(data-mobile-label);
4556
4399
  font-weight: var(--vb-font-weight-bold);
4400
+ left: 0;
4401
+ overflow: hidden;
4402
+ padding: var(--vb-table-padding);
4403
+ position: absolute;
4557
4404
  text-overflow: ellipsis;
4405
+ top: 0;
4558
4406
  white-space: nowrap;
4407
+ width: var(--vb-table-mobile-label-width);
4559
4408
  }
4560
- .table_responsive_md.table_style_bordered {
4409
+ .md\:table_responsive.table_style_bordered {
4561
4410
  border: var(--vb-table-border);
4562
4411
  }
4563
- .table_responsive_md.table_style_bordered td {
4412
+ .md\:table_responsive.table_style_bordered td {
4564
4413
  border: none;
4565
4414
  }
4566
- .table_responsive_md.table_style_bordered td + td,
4567
- .table_responsive_md.table_style_bordered th + td {
4415
+ .md\:table_responsive.table_style_bordered td + td,
4416
+ .md\:table_responsive.table_style_bordered th + td {
4568
4417
  border-top: var(--vb-table-border-alt);
4569
4418
  }
4570
- .table_responsive_md.table_style_bordered [data-mobile-label]::before {
4419
+ .md\:table_responsive.table_style_bordered [data-mobile-label]::before {
4571
4420
  border-right: var(--vb-table-border);
4572
4421
  }
4573
- .table_responsive_md.table_style_bordered tr + tr {
4422
+ .md\:table_responsive.table_style_bordered tr + tr {
4574
4423
  border-top: var(--vb-table-border);
4575
4424
  }
4576
4425
  }
4577
4426
 
4578
4427
  @media (max-width: 989px) {
4579
- .table_responsive_lg thead,
4580
- .table_responsive_lg tbody,
4581
- .table_responsive_lg tr,
4582
- .table_responsive_lg th,
4583
- .table_responsive_lg td {
4428
+ .lg\:table_responsive thead,
4429
+ .lg\:table_responsive tbody,
4430
+ .lg\:table_responsive tr,
4431
+ .lg\:table_responsive th,
4432
+ .lg\:table_responsive td {
4584
4433
  display: block;
4585
4434
  }
4586
- .table_responsive_lg thead,
4587
- .table_responsive_lg [rowspan] {
4435
+ .lg\:table_responsive thead,
4436
+ .lg\:table_responsive [rowspan] {
4437
+ left: -9999px;
4588
4438
  position: absolute;
4589
4439
  top: -9999px;
4590
- left: -9999px;
4591
4440
  }
4592
- .table_responsive_lg [data-mobile-label] {
4593
- position: relative;
4441
+ .lg\:table_responsive [data-mobile-label] {
4594
4442
  padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
4443
+ position: relative;
4595
4444
  white-space: normal;
4596
4445
  }
4597
- .table_responsive_lg [data-mobile-label]::before {
4598
- content: attr(data-mobile-label);
4599
- position: absolute;
4600
- top: 0;
4601
- bottom: 0;
4602
- left: 0;
4603
- width: var(--vb-table-mobile-label-width);
4604
- padding: var(--vb-table-padding);
4605
- overflow: hidden;
4446
+ .lg\:table_responsive [data-mobile-label]::before {
4606
4447
  background-color: var(--vb-table-mobile-label-background);
4448
+ bottom: 0;
4607
4449
  color: var(--vb-table-mobile-label-foreground);
4450
+ content: attr(data-mobile-label);
4608
4451
  font-weight: var(--vb-font-weight-bold);
4452
+ left: 0;
4453
+ overflow: hidden;
4454
+ padding: var(--vb-table-padding);
4455
+ position: absolute;
4609
4456
  text-overflow: ellipsis;
4457
+ top: 0;
4610
4458
  white-space: nowrap;
4459
+ width: var(--vb-table-mobile-label-width);
4611
4460
  }
4612
- .table_responsive_lg.table_style_bordered {
4461
+ .lg\:table_responsive.table_style_bordered {
4613
4462
  border: var(--vb-table-border);
4614
4463
  }
4615
- .table_responsive_lg.table_style_bordered td {
4464
+ .lg\:table_responsive.table_style_bordered td {
4616
4465
  border: none;
4617
4466
  }
4618
- .table_responsive_lg.table_style_bordered td + td,
4619
- .table_responsive_lg.table_style_bordered th + td {
4467
+ .lg\:table_responsive.table_style_bordered td + td,
4468
+ .lg\:table_responsive.table_style_bordered th + td {
4620
4469
  border-top: var(--vb-table-border-alt);
4621
4470
  }
4622
- .table_responsive_lg.table_style_bordered [data-mobile-label]::before {
4471
+ .lg\:table_responsive.table_style_bordered [data-mobile-label]::before {
4623
4472
  border-right: var(--vb-table-border);
4624
4473
  }
4625
- .table_responsive_lg.table_style_bordered tr + tr {
4474
+ .lg\:table_responsive.table_style_bordered tr + tr {
4626
4475
  border-top: var(--vb-table-border);
4627
4476
  }
4628
4477
  }
4629
4478
 
4630
4479
  @media (max-width: 1379px) {
4631
- .table_responsive_xl thead,
4632
- .table_responsive_xl tbody,
4633
- .table_responsive_xl tr,
4634
- .table_responsive_xl th,
4635
- .table_responsive_xl td {
4480
+ .xl\:table_responsive thead,
4481
+ .xl\:table_responsive tbody,
4482
+ .xl\:table_responsive tr,
4483
+ .xl\:table_responsive th,
4484
+ .xl\:table_responsive td {
4636
4485
  display: block;
4637
4486
  }
4638
- .table_responsive_xl thead,
4639
- .table_responsive_xl [rowspan] {
4487
+ .xl\:table_responsive thead,
4488
+ .xl\:table_responsive [rowspan] {
4489
+ left: -9999px;
4640
4490
  position: absolute;
4641
4491
  top: -9999px;
4642
- left: -9999px;
4643
4492
  }
4644
- .table_responsive_xl [data-mobile-label] {
4645
- position: relative;
4493
+ .xl\:table_responsive [data-mobile-label] {
4646
4494
  padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
4495
+ position: relative;
4647
4496
  white-space: normal;
4648
4497
  }
4649
- .table_responsive_xl [data-mobile-label]::before {
4650
- content: attr(data-mobile-label);
4651
- position: absolute;
4652
- top: 0;
4653
- bottom: 0;
4654
- left: 0;
4655
- width: var(--vb-table-mobile-label-width);
4656
- padding: var(--vb-table-padding);
4657
- overflow: hidden;
4498
+ .xl\:table_responsive [data-mobile-label]::before {
4658
4499
  background-color: var(--vb-table-mobile-label-background);
4500
+ bottom: 0;
4659
4501
  color: var(--vb-table-mobile-label-foreground);
4502
+ content: attr(data-mobile-label);
4660
4503
  font-weight: var(--vb-font-weight-bold);
4504
+ left: 0;
4505
+ overflow: hidden;
4506
+ padding: var(--vb-table-padding);
4507
+ position: absolute;
4661
4508
  text-overflow: ellipsis;
4509
+ top: 0;
4662
4510
  white-space: nowrap;
4511
+ width: var(--vb-table-mobile-label-width);
4663
4512
  }
4664
- .table_responsive_xl.table_style_bordered {
4513
+ .xl\:table_responsive.table_style_bordered {
4665
4514
  border: var(--vb-table-border);
4666
4515
  }
4667
- .table_responsive_xl.table_style_bordered td {
4516
+ .xl\:table_responsive.table_style_bordered td {
4668
4517
  border: none;
4669
4518
  }
4670
- .table_responsive_xl.table_style_bordered td + td,
4671
- .table_responsive_xl.table_style_bordered th + td {
4519
+ .xl\:table_responsive.table_style_bordered td + td,
4520
+ .xl\:table_responsive.table_style_bordered th + td {
4672
4521
  border-top: var(--vb-table-border-alt);
4673
4522
  }
4674
- .table_responsive_xl.table_style_bordered [data-mobile-label]::before {
4523
+ .xl\:table_responsive.table_style_bordered [data-mobile-label]::before {
4675
4524
  border-right: var(--vb-table-border);
4676
4525
  }
4677
- .table_responsive_xl.table_style_bordered tr + tr {
4526
+ .xl\:table_responsive.table_style_bordered tr + tr {
4678
4527
  border-top: var(--vb-table-border);
4679
4528
  }
4680
4529
  }
@@ -4734,16 +4583,8 @@ a.card:hover, a.card:focus, a.card:focus-within {
4734
4583
  background-clip: padding-box !important;
4735
4584
  }
4736
4585
 
4737
- .background {
4738
- background-color: var(--vb-background) !important;
4739
- }
4740
-
4741
- .background-dark {
4742
- background-color: var(--vb-background-dark) !important;
4743
- }
4744
-
4745
- .background-darker {
4746
- background-color: var(--vb-background-darker) !important;
4586
+ .background-clip-text {
4587
+ background-clip: text !important;
4747
4588
  }
4748
4589
 
4749
4590
  .background-black {
@@ -4758,6 +4599,18 @@ a.card:hover, a.card:focus, a.card:focus-within {
4758
4599
  background-color: transparent !important;
4759
4600
  }
4760
4601
 
4602
+ .background {
4603
+ background-color: var(--vb-background) !important;
4604
+ }
4605
+
4606
+ .background-dark {
4607
+ background-color: var(--vb-background-dark) !important;
4608
+ }
4609
+
4610
+ .background-darker {
4611
+ background-color: var(--vb-background-darker) !important;
4612
+ }
4613
+
4761
4614
  .background-primary {
4762
4615
  background-color: var(--vb-primary-50) !important;
4763
4616
  }
@@ -5030,18 +4883,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
5030
4883
  background-color: var(--vb-important-100) !important;
5031
4884
  }
5032
4885
 
5033
- .foreground {
5034
- color: var(--vb-foreground) !important;
5035
- }
5036
-
5037
- .foreground-light {
5038
- color: var(--vb-foreground-light) !important;
5039
- }
5040
-
5041
- .foreground-lighter {
5042
- color: var(--vb-foreground-lighter) !important;
5043
- }
5044
-
5045
4886
  .foreground-black {
5046
4887
  color: black !important;
5047
4888
  }
@@ -5054,6 +4895,18 @@ a.card:hover, a.card:focus, a.card:focus-within {
5054
4895
  color: transparent !important;
5055
4896
  }
5056
4897
 
4898
+ .foreground {
4899
+ color: var(--vb-foreground) !important;
4900
+ }
4901
+
4902
+ .foreground-light {
4903
+ color: var(--vb-foreground-light) !important;
4904
+ }
4905
+
4906
+ .foreground-lighter {
4907
+ color: var(--vb-foreground-lighter) !important;
4908
+ }
4909
+
5057
4910
  .foreground-primary {
5058
4911
  color: var(--vb-primary-50) !important;
5059
4912
  }
@@ -5379,87 +5232,87 @@ a.card:hover, a.card:focus, a.card:focus-within {
5379
5232
  }
5380
5233
 
5381
5234
  .radius {
5382
- border-radius: 0.25rem !important;
5235
+ border-radius: var(--vb-border-radius) !important;
5383
5236
  }
5384
5237
 
5385
5238
  .radius-top,
5386
5239
  .radius-left,
5387
5240
  .radius-top-left {
5388
- border-top-left-radius: 0.25rem !important;
5241
+ border-top-left-radius: var(--vb-border-radius) !important;
5389
5242
  }
5390
5243
 
5391
5244
  .radius-top,
5392
5245
  .radius-right,
5393
5246
  .radius-top-right {
5394
- border-top-right-radius: 0.25rem !important;
5247
+ border-top-right-radius: var(--vb-border-radius) !important;
5395
5248
  }
5396
5249
 
5397
5250
  .radius-bottom,
5398
5251
  .radius-right,
5399
5252
  .radius-bottom-right {
5400
- border-bottom-right-radius: 0.25rem !important;
5253
+ border-bottom-right-radius: var(--vb-border-radius) !important;
5401
5254
  }
5402
5255
 
5403
5256
  .radius-bottom,
5404
5257
  .radius-left,
5405
5258
  .radius-bottom-left {
5406
- border-bottom-left-radius: 0.25rem !important;
5259
+ border-bottom-left-radius: var(--vb-border-radius) !important;
5407
5260
  }
5408
5261
 
5409
5262
  .radius-lg {
5410
- border-radius: 0.5rem !important;
5263
+ border-radius: var(--vb-border-radius-lg) !important;
5411
5264
  }
5412
5265
 
5413
5266
  .radius-lg-top,
5414
5267
  .radius-lg-left,
5415
5268
  .radius-lg-top-left {
5416
- border-top-left-radius: 0.5rem !important;
5269
+ border-top-left-radius: var(--vb-border-radius-lg) !important;
5417
5270
  }
5418
5271
 
5419
5272
  .radius-lg-top,
5420
5273
  .radius-lg-right,
5421
5274
  .radius-lg-top-right {
5422
- border-top-right-radius: 0.5rem !important;
5275
+ border-top-right-radius: var(--vb-border-radius-lg) !important;
5423
5276
  }
5424
5277
 
5425
5278
  .radius-lg-bottom,
5426
5279
  .radius-lg-right,
5427
5280
  .radius-lg-bottom-right {
5428
- border-bottom-right-radius: 0.5rem !important;
5281
+ border-bottom-right-radius: var(--vb-border-radius-lg) !important;
5429
5282
  }
5430
5283
 
5431
5284
  .radius-lg-bottom,
5432
5285
  .radius-lg-left,
5433
5286
  .radius-lg-bottom-left {
5434
- border-bottom-left-radius: 0.5rem !important;
5287
+ border-bottom-left-radius: var(--vb-border-radius-lg) !important;
5435
5288
  }
5436
5289
 
5437
5290
  .radius-circle {
5438
- border-radius: 9999px !important;
5291
+ border-radius: var(--vb-border-radius-circle) !important;
5439
5292
  }
5440
5293
 
5441
5294
  .radius-circle-top,
5442
5295
  .radius-circle-left,
5443
5296
  .radius-circle-top-left {
5444
- border-top-left-radius: 9999px !important;
5297
+ border-top-left-radius: var(--vb-border-radius-circle) !important;
5445
5298
  }
5446
5299
 
5447
5300
  .radius-circle-top,
5448
5301
  .radius-circle-right,
5449
5302
  .radius-circle-top-right {
5450
- border-top-right-radius: 9999px !important;
5303
+ border-top-right-radius: var(--vb-border-radius-circle) !important;
5451
5304
  }
5452
5305
 
5453
5306
  .radius-circle-bottom,
5454
5307
  .radius-circle-right,
5455
5308
  .radius-circle-bottom-right {
5456
- border-bottom-right-radius: 9999px !important;
5309
+ border-bottom-right-radius: var(--vb-border-radius-circle) !important;
5457
5310
  }
5458
5311
 
5459
5312
  .radius-circle-bottom,
5460
5313
  .radius-circle-left,
5461
5314
  .radius-circle-bottom-left {
5462
- border-bottom-left-radius: 9999px !important;
5315
+ border-bottom-left-radius: var(--vb-border-radius-circle) !important;
5463
5316
  }
5464
5317
 
5465
5318
  .radius-square {
@@ -5551,132 +5404,132 @@ a.card:hover, a.card:focus, a.card:focus-within {
5551
5404
  }
5552
5405
 
5553
5406
  @media (min-width: 480px) {
5554
- .display-inline-xs {
5407
+ .xs\:display-inline {
5555
5408
  display: inline !important;
5556
5409
  }
5557
- .display-flex-xs {
5410
+ .xs\:display-flex {
5558
5411
  display: flex !important;
5559
5412
  }
5560
- .display-inline-flex-xs {
5413
+ .xs\:display-inline-flex {
5561
5414
  display: inline-flex !important;
5562
5415
  }
5563
- .display-grid-xs {
5416
+ .xs\:display-grid {
5564
5417
  display: grid !important;
5565
5418
  }
5566
- .display-inline-grid-xs {
5419
+ .xs\:display-inline-grid {
5567
5420
  display: inline-grid !important;
5568
5421
  }
5569
- .display-block-xs {
5422
+ .xs\:display-block {
5570
5423
  display: block !important;
5571
5424
  }
5572
- .display-inline-block-xs {
5425
+ .xs\:display-inline-block {
5573
5426
  display: inline-block !important;
5574
5427
  }
5575
- .display-none-xs {
5428
+ .xs\:display-none {
5576
5429
  display: none !important;
5577
5430
  }
5578
5431
  }
5579
5432
  @media (min-width: 620px) {
5580
- .display-inline-sm {
5433
+ .sm\:display-inline {
5581
5434
  display: inline !important;
5582
5435
  }
5583
- .display-flex-sm {
5436
+ .sm\:display-flex {
5584
5437
  display: flex !important;
5585
5438
  }
5586
- .display-inline-flex-sm {
5439
+ .sm\:display-inline-flex {
5587
5440
  display: inline-flex !important;
5588
5441
  }
5589
- .display-grid-sm {
5442
+ .sm\:display-grid {
5590
5443
  display: grid !important;
5591
5444
  }
5592
- .display-inline-grid-sm {
5445
+ .sm\:display-inline-grid {
5593
5446
  display: inline-grid !important;
5594
5447
  }
5595
- .display-block-sm {
5448
+ .sm\:display-block {
5596
5449
  display: block !important;
5597
5450
  }
5598
- .display-inline-block-sm {
5451
+ .sm\:display-inline-block {
5599
5452
  display: inline-block !important;
5600
5453
  }
5601
- .display-none-sm {
5454
+ .sm\:display-none {
5602
5455
  display: none !important;
5603
5456
  }
5604
5457
  }
5605
5458
  @media (min-width: 760px) {
5606
- .display-inline-md {
5459
+ .md\:display-inline {
5607
5460
  display: inline !important;
5608
5461
  }
5609
- .display-flex-md {
5462
+ .md\:display-flex {
5610
5463
  display: flex !important;
5611
5464
  }
5612
- .display-inline-flex-md {
5465
+ .md\:display-inline-flex {
5613
5466
  display: inline-flex !important;
5614
5467
  }
5615
- .display-grid-md {
5468
+ .md\:display-grid {
5616
5469
  display: grid !important;
5617
5470
  }
5618
- .display-inline-grid-md {
5471
+ .md\:display-inline-grid {
5619
5472
  display: inline-grid !important;
5620
5473
  }
5621
- .display-block-md {
5474
+ .md\:display-block {
5622
5475
  display: block !important;
5623
5476
  }
5624
- .display-inline-block-md {
5477
+ .md\:display-inline-block {
5625
5478
  display: inline-block !important;
5626
5479
  }
5627
- .display-none-md {
5480
+ .md\:display-none {
5628
5481
  display: none !important;
5629
5482
  }
5630
5483
  }
5631
5484
  @media (min-width: 990px) {
5632
- .display-inline-lg {
5485
+ .lg\:display-inline {
5633
5486
  display: inline !important;
5634
5487
  }
5635
- .display-flex-lg {
5488
+ .lg\:display-flex {
5636
5489
  display: flex !important;
5637
5490
  }
5638
- .display-inline-flex-lg {
5491
+ .lg\:display-inline-flex {
5639
5492
  display: inline-flex !important;
5640
5493
  }
5641
- .display-grid-lg {
5494
+ .lg\:display-grid {
5642
5495
  display: grid !important;
5643
5496
  }
5644
- .display-inline-grid-lg {
5497
+ .lg\:display-inline-grid {
5645
5498
  display: inline-grid !important;
5646
5499
  }
5647
- .display-block-lg {
5500
+ .lg\:display-block {
5648
5501
  display: block !important;
5649
5502
  }
5650
- .display-inline-block-lg {
5503
+ .lg\:display-inline-block {
5651
5504
  display: inline-block !important;
5652
5505
  }
5653
- .display-none-lg {
5506
+ .lg\:display-none {
5654
5507
  display: none !important;
5655
5508
  }
5656
5509
  }
5657
5510
  @media (min-width: 1380px) {
5658
- .display-inline-xl {
5511
+ .xl\:display-inline {
5659
5512
  display: inline !important;
5660
5513
  }
5661
- .display-flex-xl {
5514
+ .xl\:display-flex {
5662
5515
  display: flex !important;
5663
5516
  }
5664
- .display-inline-flex-xl {
5517
+ .xl\:display-inline-flex {
5665
5518
  display: inline-flex !important;
5666
5519
  }
5667
- .display-grid-xl {
5520
+ .xl\:display-grid {
5668
5521
  display: grid !important;
5669
5522
  }
5670
- .display-inline-grid-xl {
5523
+ .xl\:display-inline-grid {
5671
5524
  display: inline-grid !important;
5672
5525
  }
5673
- .display-block-xl {
5526
+ .xl\:display-block {
5674
5527
  display: block !important;
5675
5528
  }
5676
- .display-inline-block-xl {
5529
+ .xl\:display-inline-block {
5677
5530
  display: inline-block !important;
5678
5531
  }
5679
- .display-none-xl {
5532
+ .xl\:display-none {
5680
5533
  display: none !important;
5681
5534
  }
5682
5535
  }
@@ -5821,63 +5674,63 @@ a.card:hover, a.card:focus, a.card:focus-within {
5821
5674
  }
5822
5675
 
5823
5676
  .margin-x-none {
5824
- margin-right: 0 !important;
5825
5677
  margin-left: 0 !important;
5678
+ margin-right: 0 !important;
5826
5679
  }
5827
5680
 
5828
5681
  .margin-x-xs {
5829
- margin-right: 0.25em !important;
5830
5682
  margin-left: 0.25em !important;
5683
+ margin-right: 0.25em !important;
5831
5684
  }
5832
5685
 
5833
5686
  .margin-x-sm {
5834
- margin-right: 0.5em !important;
5835
5687
  margin-left: 0.5em !important;
5688
+ margin-right: 0.5em !important;
5836
5689
  }
5837
5690
 
5838
5691
  .margin-x-md {
5839
- margin-right: 1em !important;
5840
5692
  margin-left: 1em !important;
5693
+ margin-right: 1em !important;
5841
5694
  }
5842
5695
 
5843
5696
  .margin-x-lg {
5844
- margin-right: 1.5em !important;
5845
5697
  margin-left: 1.5em !important;
5698
+ margin-right: 1.5em !important;
5846
5699
  }
5847
5700
 
5848
5701
  .margin-x-xl {
5849
- margin-right: 2em !important;
5850
5702
  margin-left: 2em !important;
5703
+ margin-right: 2em !important;
5851
5704
  }
5852
5705
 
5853
5706
  .margin-y-none {
5854
- margin-top: 0 !important;
5855
5707
  margin-bottom: 0 !important;
5708
+ margin-top: 0 !important;
5856
5709
  }
5857
5710
 
5858
5711
  .margin-y-xs {
5859
- margin-top: 0.25em !important;
5860
5712
  margin-bottom: 0.25em !important;
5713
+ margin-top: 0.25em !important;
5861
5714
  }
5862
5715
 
5863
5716
  .margin-y-sm {
5864
- margin-top: 0.5em !important;
5865
5717
  margin-bottom: 0.5em !important;
5718
+ margin-top: 0.5em !important;
5866
5719
  }
5867
5720
 
5868
5721
  .margin-y-md {
5869
- margin-top: 1em !important;
5870
5722
  margin-bottom: 1em !important;
5723
+ margin-top: 1em !important;
5871
5724
  }
5872
5725
 
5873
5726
  .margin-y-lg {
5874
- margin-top: 1.5em !important;
5875
5727
  margin-bottom: 1.5em !important;
5728
+ margin-top: 1.5em !important;
5876
5729
  }
5877
5730
 
5878
5731
  .margin-y-xl {
5879
- margin-top: 2em !important;
5880
5732
  margin-bottom: 2em !important;
5733
+ margin-top: 2em !important;
5881
5734
  }
5882
5735
 
5883
5736
  .margin-auto {
@@ -5901,13 +5754,13 @@ a.card:hover, a.card:focus, a.card:focus-within {
5901
5754
  }
5902
5755
 
5903
5756
  .margin-x-auto {
5904
- margin-right: auto !important;
5905
5757
  margin-left: auto !important;
5758
+ margin-right: auto !important;
5906
5759
  }
5907
5760
 
5908
5761
  .margin-y-auto {
5909
- margin-top: auto !important;
5910
5762
  margin-bottom: auto !important;
5763
+ margin-top: auto !important;
5911
5764
  }
5912
5765
 
5913
5766
  .padding {
@@ -6051,63 +5904,63 @@ a.card:hover, a.card:focus, a.card:focus-within {
6051
5904
  }
6052
5905
 
6053
5906
  .padding-x-none {
6054
- padding-right: 0 !important;
6055
5907
  padding-left: 0 !important;
5908
+ padding-right: 0 !important;
6056
5909
  }
6057
5910
 
6058
5911
  .padding-x-xs {
6059
- padding-right: 0.25em !important;
6060
5912
  padding-left: 0.25em !important;
5913
+ padding-right: 0.25em !important;
6061
5914
  }
6062
5915
 
6063
5916
  .padding-x-sm {
6064
- padding-right: 0.5em !important;
6065
5917
  padding-left: 0.5em !important;
5918
+ padding-right: 0.5em !important;
6066
5919
  }
6067
5920
 
6068
5921
  .padding-x-md {
6069
- padding-right: 1em !important;
6070
5922
  padding-left: 1em !important;
5923
+ padding-right: 1em !important;
6071
5924
  }
6072
5925
 
6073
5926
  .padding-x-lg {
6074
- padding-right: 1.5em !important;
6075
5927
  padding-left: 1.5em !important;
5928
+ padding-right: 1.5em !important;
6076
5929
  }
6077
5930
 
6078
5931
  .padding-x-xl {
6079
- padding-right: 2em !important;
6080
5932
  padding-left: 2em !important;
5933
+ padding-right: 2em !important;
6081
5934
  }
6082
5935
 
6083
5936
  .padding-y-none {
6084
- padding-top: 0 !important;
6085
5937
  padding-bottom: 0 !important;
5938
+ padding-top: 0 !important;
6086
5939
  }
6087
5940
 
6088
5941
  .padding-y-xs {
6089
- padding-top: 0.25em !important;
6090
5942
  padding-bottom: 0.25em !important;
5943
+ padding-top: 0.25em !important;
6091
5944
  }
6092
5945
 
6093
5946
  .padding-y-sm {
6094
- padding-top: 0.5em !important;
6095
5947
  padding-bottom: 0.5em !important;
5948
+ padding-top: 0.5em !important;
6096
5949
  }
6097
5950
 
6098
5951
  .padding-y-md {
6099
- padding-top: 1em !important;
6100
5952
  padding-bottom: 1em !important;
5953
+ padding-top: 1em !important;
6101
5954
  }
6102
5955
 
6103
5956
  .padding-y-lg {
6104
- padding-top: 1.5em !important;
6105
5957
  padding-bottom: 1.5em !important;
5958
+ padding-top: 1.5em !important;
6106
5959
  }
6107
5960
 
6108
5961
  .padding-y-xl {
6109
- padding-top: 2em !important;
6110
5962
  padding-bottom: 2em !important;
5963
+ padding-top: 2em !important;
6111
5964
  }
6112
5965
 
6113
5966
  .spacing > * + * {
@@ -6876,15 +6729,15 @@ a.card:hover, a.card:focus, a.card:focus-within {
6876
6729
  }
6877
6730
 
6878
6731
  .font-family-sans {
6879
- font-family: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif !important;
6732
+ font-family: var(--vb-font-family-sans) !important;
6880
6733
  }
6881
6734
 
6882
6735
  .font-family-serif {
6883
- font-family: constantia, "Lucida Bright", lucidabright, "Lucida Serif", lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", georgia, serif !important;
6736
+ font-family: var(--vb-font-family-serif) !important;
6884
6737
  }
6885
6738
 
6886
6739
  .font-family-mono {
6887
- font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace !important;
6740
+ font-family: var(--vb-font-family-mono) !important;
6888
6741
  }
6889
6742
 
6890
6743
  .font-size-base {
@@ -6892,29 +6745,17 @@ a.card:hover, a.card:focus, a.card:focus-within {
6892
6745
  }
6893
6746
 
6894
6747
  .font-size-sm {
6895
- font-size: 0.875rem !important;
6748
+ font-size: var(--vb-font-size-sm) !important;
6896
6749
  }
6897
6750
 
6898
6751
  .font-size-lg {
6899
- font-size: 1.125rem !important;
6752
+ font-size: var(--vb-font-size-lg) !important;
6900
6753
  }
6901
6754
 
6902
- .font-leading-base {
6755
+ .font-line-height {
6903
6756
  line-height: var(--vb-line-height) !important;
6904
6757
  }
6905
6758
 
6906
- .font-kerning-0 {
6907
- letter-spacing: 0 !important;
6908
- }
6909
-
6910
- .font-kerning-1 {
6911
- letter-spacing: 0.1em !important;
6912
- }
6913
-
6914
- .font-kerning-2 {
6915
- letter-spacing: 0.2em !important;
6916
- }
6917
-
6918
6759
  .font-weight-thin {
6919
6760
  font-weight: 100 !important;
6920
6761
  }
@@ -7023,12 +6864,20 @@ a.card:hover, a.card:focus, a.card:focus-within {
7023
6864
  white-space: nowrap !important;
7024
6865
  }
7025
6866
 
6867
+ .transition {
6868
+ transition: all var(--vb-transition-duration) var(--vb-transition-timing-function) !important;
6869
+ }
6870
+
7026
6871
  .transition-none {
7027
6872
  transition: none !important;
7028
6873
  }
7029
6874
 
7030
- .transition-all {
7031
- transition: all var(--vb-transition-duration) var(--vb-transition-timing-function) !important;
6875
+ .transition-duration-short {
6876
+ transition-duration: var(--vb-transition-duration-short) !important;
6877
+ }
6878
+
6879
+ .transition-duration-long {
6880
+ transition-duration: var(--vb-transition-duration-long) !important;
7032
6881
  }
7033
6882
 
7034
6883
  /*# sourceMappingURL=base.css.map */