@volverjs/style 0.1.9-beta.7 → 0.1.9-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/base.css +1 -1
  2. package/dist/components/vv-alert-group.css +1 -0
  3. package/dist/components/vv-alert.css +1 -1
  4. package/dist/components/vv-dropdown-option.css +1 -1
  5. package/dist/components/vv-input-text.css +1 -1
  6. package/dist/components/vv-select.css +1 -1
  7. package/dist/components/vv-textarea.css +1 -1
  8. package/dist/components.css +1 -1
  9. package/dist/props/input.css +1 -1
  10. package/dist/props.css +1 -1
  11. package/dist/volver.css +1 -1
  12. package/package.json +19 -19
  13. package/src/_config.scss +1 -1
  14. package/src/components/index.scss +1 -1
  15. package/src/components/{vv-toast.scss → vv-alert-group.scss} +2 -2
  16. package/src/settings/_index.scss +1 -1
  17. package/src/settings/_input.scss +19 -19
  18. package/src/settings/components/_vv-alert-group.scss +171 -0
  19. package/src/settings/components/_vv-alert.scss +254 -58
  20. package/src/settings/components/_vv-dropdown-option.scss +6 -2
  21. package/src/settings/components/_vv-input-text.scss +2 -2
  22. package/src/settings/components/_vv-select.scss +3 -1
  23. package/src/settings/components/_vv-textarea.scss +2 -2
  24. package/src/tools/_mixins.scss +1 -1
  25. package/dist/components/vv-toast.css +0 -1
  26. package/src/settings/components/_vv-toast.scss +0 -259
package/src/settings/components/_vv-alert.scss CHANGED
@@ -1,22 +1,38 @@
1
1
  $vv-alert: (
2
- display: flex,
3
- min-width: 0,
4
- overflow: hidden,
5
- align-items: center,
6
- padding: var(--spacing-sm) var(--spacing-md),
2
+ --alert-pie-animation-duration: 3s,
7
3
  background-color: var(--color-surface-2),
4
+ box-shadow: var(--shadow-lg),
8
5
  border-color: var(--color-gray-lighten-4),
9
- border-width: var(--border),
10
- border-style: solid,
11
6
  border-radius: var(--rounded),
12
- position: relative,
7
+ border-style: solid,
8
+ border-width: var(--border),
9
+ display: flex,
10
+ flex-wrap: wrap,
11
+ align-items: center,
12
+ gap: var(--spacing-sm),
13
+ min-width: 0,
14
+ overflow: hidden,
15
+ font-size: var(--text-sm),
16
+ padding: var(--spacing-sm),
13
17
  element: (
14
- icon: (
15
- _alias: '> :where(svg, [data-icon])',
16
- position: absolute,
17
- left: var(--spacing-md),
18
- inline-size: 1.2em,
19
- block-size: 1.2em,
18
+ header: (
19
+ display: flex,
20
+ align-items: center,
21
+ gap: var(--spacing-sm),
22
+ line-height: var(--leading-none),
23
+ color: var(--color-word),
24
+ ),
25
+ title: (
26
+ font-weight: var(--font-bold),
27
+ ),
28
+ content: (
29
+ line-height: var(--leading-normal),
30
+ color: var(--color-word-1),
31
+ text-overflow: ellipsis,
32
+ overflow: hidden,
33
+ ),
34
+ footer: (
35
+ display: flex,
20
36
  ),
21
37
  close: (
22
38
  position: absolute,
@@ -28,41 +44,63 @@ $vv-alert: (
28
44
  background-position: center,
29
45
  background-size: 100% auto,
30
46
  background-repeat: no-repeat,
47
+ align-self: center,
31
48
  ),
32
- title: (
33
- display: flex,
34
- margin-right: 1ch,
35
- line-height: var(--leading-normal),
36
- font-weight: var(--font-bold),
37
- color: var(--color-word),
49
+ icon: (
50
+ flex-shrink: 0,
38
51
  ),
39
- content: (
40
- line-height: var(--leading-normal),
41
- color: var(--color-word-1),
42
- text-overflow: ellipsis,
43
- white-space: nowrap,
52
+ pie: (
53
+ position: absolute,
54
+ display: block,
55
+ right: var(--spacing-10),
56
+ width: 1.1em,
57
+ height: 1.1em,
58
+ background-color: var(--color-white),
59
+ border: 1px solid var(--color-white),
60
+ border-radius: 50%,
44
61
  overflow: hidden,
62
+ opacity: var(--opacity-80),
63
+ cursor: pointer,
64
+ pseudo: (
65
+ before: (
66
+ position: absolute,
67
+ top: 0,
68
+ width: 50%,
69
+ height: 100%,
70
+ transform-origin: 100% 50%,
71
+ background-color: var(--color-gray),
72
+ border-radius: 100% 0 0 100% / 50% 0 0 50%,
73
+ will-change: transform,
74
+ [animation]: spin var(--alert-pie-animation-duration) linear,
75
+ ),
76
+ after: (
77
+ position: absolute,
78
+ top: 0,
79
+ width: 50%,
80
+ height: 100%,
81
+ background-color: var(--color-white),
82
+ will-change: opacity,
83
+ border-radius: 100% 0 0 100% / 50% 0 0 50%,
84
+ [animation]: pie-masks var(--alert-pie-animation-duration)
85
+ steps(1, end),
86
+ opacity: var(--opacity-0),
87
+ ),
88
+ ),
45
89
  ),
46
- separator: (
47
- _alias: '> hr',
48
- height: var(--border),
49
- background-color: var(--color-alpha-2),
50
- margin-block: var(--spacing-sm),
90
+ pie-mask: (
91
+ position: absolute,
92
+ top: 0,
93
+ width: 50%,
94
+ height: 100%,
95
+ left: 50%,
96
+ background-color: var(--color-gray),
97
+ will-change: opacity,
98
+ [animation]: pie-masks var(--alert-pie-animation-duration)
99
+ steps(1, end) reverse,
100
+ z-index: 1,
51
101
  ),
52
102
  ),
53
103
  modifier: (
54
- fixed: (
55
- position: fixed,
56
- z-index: var(--z-notification-alert),
57
- ),
58
- top: (
59
- inset-inline: var(--spacing-lg),
60
- inset-block: var(--spacing-lg) auto,
61
- ),
62
- bottom: (
63
- inset-inline: var(--spacing-lg),
64
- inset-block: auto var(--spacing-lg),
65
- ),
66
104
  success: (
67
105
  border-color: var(--color-success-lighten-5),
68
106
  background-color: var(--color-surface-success),
@@ -70,7 +108,7 @@ $vv-alert: (
70
108
  icon: (
71
109
  color: var(--color-success),
72
110
  ),
73
- title: (
111
+ header: (
74
112
  color: var(--color-success),
75
113
  ),
76
114
  ),
@@ -82,31 +120,31 @@ $vv-alert: (
82
120
  icon: (
83
121
  color: var(--color-danger),
84
122
  ),
85
- title: (
123
+ header: (
86
124
  color: var(--color-danger),
87
125
  ),
88
126
  ),
89
127
  ),
90
128
  warning: (
91
- border-color: var(--color-warning-lighten-5),
129
+ border-color: var(--color-warning-lighten-1),
92
130
  background-color: var(--color-surface-warning),
93
131
  element: (
94
132
  icon: (
95
133
  color: var(--color-warning-darken-2),
96
134
  ),
97
- title: (
135
+ header: (
98
136
  color: var(--color-warning-darken-2),
99
137
  ),
100
138
  ),
101
139
  ),
102
140
  info: (
103
- border-color: var(--color-info-lighten-5),
141
+ border-color: var(--color-info-lighten-1),
104
142
  background-color: var(--color-surface-info),
105
143
  element: (
106
144
  icon: (
107
145
  color: var(--color-info-darken-2),
108
146
  ),
109
- title: (
147
+ header: (
110
148
  color: var(--color-info-darken-2),
111
149
  ),
112
150
  ),
@@ -118,7 +156,7 @@ $vv-alert: (
118
156
  icon: (
119
157
  color: var(--color-accent),
120
158
  ),
121
- title: (
159
+ header: (
122
160
  color: var(--color-accent),
123
161
  ),
124
162
  ),
@@ -130,32 +168,190 @@ $vv-alert: (
130
168
  icon: (
131
169
  color: var(--color-brand),
132
170
  ),
133
- title: (
171
+ header: (
134
172
  color: var(--color-brand),
135
173
  ),
136
174
  ),
137
175
  ),
176
+ dismissable: (
177
+ position: relative,
178
+ padding-right: calc(var(--spacing-md) * 2 + 1em),
179
+ ),
180
+ notification: (
181
+ padding: var(--spacing-0),
182
+ width: clamp(15vw, 20rem, 80vw),
183
+ border-color: var(--color-gray),
184
+ flex-direction: column,
185
+ align-items: none,
186
+ gap: var(--spacing-0),
187
+ element: (
188
+ header: (
189
+ padding: var(--spacing-sm),
190
+ background-color: var(--color-gray),
191
+ color: var(--color-white),
192
+ ),
193
+ title: (
194
+ font-weight: var(--font-normal),
195
+ margin-right: auto,
196
+ ),
197
+ icon: (
198
+ color: var(--color-white),
199
+ ),
200
+ content: (
201
+ padding: var(--spacing-sm),
202
+ font-size: var(--text-xs),
203
+ ),
204
+ footer: (
205
+ padding: 0 var(--spacing-sm) var(--spacing-sm)
206
+ var(--spacing-sm),
207
+ ),
208
+ close: (
209
+ background-color: var(--color-surface-2),
210
+ border-radius: var(--rounded),
211
+ background-size: 70% auto,
212
+ inline-size: 1.1em,
213
+ block-size: 1.1em,
214
+ ),
215
+ ),
216
+ modifier: (
217
+ dismissable: (
218
+ padding-right: 0,
219
+ element: (
220
+ header: (
221
+ position: relative,
222
+ padding-right: calc(var(--spacing-md) * 2 + 1em),
223
+ ),
224
+ ),
225
+ ),
226
+ success: (
227
+ border-color: var(--color-success),
228
+ element: (
229
+ header: (
230
+ background-color: var(--color-success),
231
+ ),
232
+ ),
233
+ ),
234
+ danger: (
235
+ border-color: var(--color-danger),
236
+ element: (
237
+ header: (
238
+ background-color: var(--color-danger),
239
+ ),
240
+ ),
241
+ ),
242
+ warning: (
243
+ border-color: var(--color-warning),
244
+ element: (
245
+ header: (
246
+ background-color: var(--color-warning),
247
+ ),
248
+ ),
249
+ ),
250
+ info: (
251
+ border-color: var(--color-info),
252
+ element: (
253
+ header: (
254
+ background-color: var(--color-info),
255
+ ),
256
+ ),
257
+ ),
258
+ accent: (
259
+ border-color: var(--color-accent),
260
+ element: (
261
+ header: (
262
+ background-color: var(--color-accent),
263
+ ),
264
+ ),
265
+ ),
266
+ brand: (
267
+ border-color: var(--color-brand),
268
+ element: (
269
+ header: (
270
+ background-color: var(--color-brand),
271
+ ),
272
+ ),
273
+ ),
274
+ ),
275
+ ),
138
276
  callout: (
139
- display: block,
277
+ box-shadow: none,
140
278
  border-radius: var(--rounded-none),
141
279
  border-width: 0 0 0 var(--spacing-4),
280
+ flex-direction: column,
281
+ align-items: none,
142
282
  element: (
143
283
  title: (
144
- margin-bottom: var(--spacing-sm),
145
- margin-right: 0,
146
284
  text-transform: uppercase,
147
285
  ),
148
286
  content: (
149
287
  line-height: var(--leading-normal),
150
- white-space: wrap,
151
288
  ),
152
289
  ),
153
290
  ),
154
- icon: (
155
- padding-left: calc(var(--spacing-md) * 2 + 1em),
291
+ ),
292
+ transition: (
293
+ fade-inline-end: (
294
+ active: (
295
+ transition: var(--transition-transform),
296
+ ),
297
+ enter-from: (
298
+ opacity: var(--opacity-0),
299
+ transform: translateX(100%),
300
+ ),
301
+ leave-to: (
302
+ opacity: var(--opacity-0),
303
+ transform: translateX(100%),
304
+ ),
156
305
  ),
157
- close: (
158
- padding-right: calc(var(--spacing-md) * 2 + 1em),
306
+ fade-inline-start: (
307
+ active: (
308
+ transition: var(--transition-transform),
309
+ ),
310
+ enter-from: (
311
+ opacity: var(--opacity-0),
312
+ transform: translateX(-100%),
313
+ ),
314
+ leave-to: (
315
+ opacity: var(--opacity-0),
316
+ transform: translateX(-100%),
317
+ ),
318
+ ),
319
+ fade-block-top: (
320
+ active: (
321
+ transition: var(--transition-transform),
322
+ ),
323
+ enter-from: (
324
+ opacity: var(--opacity-0),
325
+ transform: translateY(-100%),
326
+ ),
327
+ leave-to: (
328
+ opacity: var(--opacity-0),
329
+ transform: translateY(-100%),
330
+ ),
331
+ ),
332
+ fade-block-bottom: (
333
+ active: (
334
+ transition: var(--transition-transform),
335
+ ),
336
+ enter-from: (
337
+ opacity: var(--opacity-0),
338
+ transform: translateY(100%),
339
+ ),
340
+ leave-to: (
341
+ opacity: var(--opacity-0),
342
+ transform: translateY(100%),
343
+ ),
344
+ ),
345
+ fade: (
346
+ active: (
347
+ transition: var(--transition-opacity),
348
+ ),
349
+ enter-from: (
350
+ opacity: var(--opacity-0),
351
+ ),
352
+ leave-to: (
353
+ opacity: var(--opacity-0),
354
+ ),
159
355
  ),
160
356
  ),
161
357
  ) !default;
package/src/settings/components/_vv-dropdown-option.scss CHANGED
@@ -3,9 +3,8 @@ $vv-dropdown-option: (
3
3
  min-width: 0,
4
4
  overflow: hidden,
5
5
  gap: var(--spacing-sm),
6
- align-items: center,
6
+ align-items: flex-end,
7
7
  padding: var(--spacing-sm),
8
- white-space: nowrap,
9
8
  state: (
10
9
  disabled: (
11
10
  opacity: var(--opacity-50),
@@ -60,5 +59,10 @@ $vv-dropdown-option: (
60
59
  white-space: nowrap,
61
60
  overflow: hidden,
62
61
  ),
62
+ label: (
63
+ text-overflow: ellipsis,
64
+ white-space: nowrap,
65
+ overflow: hidden,
66
+ ),
63
67
  ),
64
68
  ) !default;
package/src/settings/components/_vv-input-text.scss CHANGED
@@ -78,10 +78,10 @@ $vv-input-text: (
78
78
  var(--input-spacing-right),
79
79
  min-width: 0,
80
80
  min-height: var(--input-min-height),
81
+ text-overflow: var(--input-text-overflow),
81
82
  pseudo: (
82
83
  placeholder: (
83
84
  color: var(--input-placeholder-color),
84
- text-overflow: ellipsis,
85
85
  ),
86
86
  calendar-picker-indicator: (
87
87
  position: absolute,
@@ -206,7 +206,6 @@ $vv-input-text: (
206
206
  white-space: var(--input-hint-white-space),
207
207
  text-overflow: var(--input-hint-text-overflow),
208
208
  overflow: var(--input-hint-overflow),
209
- max-width: var(--input-hint-max-width),
210
209
  ),
211
210
  limit: (
212
211
  [padding-right]: var(--input-spacing-right),
@@ -290,6 +289,7 @@ $vv-input-text: (
290
289
  ),
291
290
  ),
292
291
  floating: (
292
+ position: relative,
293
293
  [margin-left]: var(--input-spacing-left),
294
294
  [margin-right]: var(--input-spacing-right),
295
295
  element: (
package/src/settings/components/_vv-select.scss CHANGED
@@ -91,6 +91,8 @@ $vv-select: (
91
91
  background-size: 1em,
92
92
  min-height: var(--input-min-height),
93
93
  gap: 0.5ch,
94
+ text-overflow: var(--input-text-overflow),
95
+ white-space: nowrap,
94
96
  state: (
95
97
  disabled: (
96
98
  cursor: not-allowed,
@@ -138,7 +140,6 @@ $vv-select: (
138
140
  white-space: var(--input-hint-white-space),
139
141
  text-overflow: var(--input-hint-text-overflow),
140
142
  overflow: var(--input-hint-overflow),
141
- max-width: var(--input-hint-max-width),
142
143
  ),
143
144
  ),
144
145
  modifier: (
@@ -234,6 +235,7 @@ $vv-select: (
234
235
  ),
235
236
  ),
236
237
  floating: (
238
+ position: relative,
237
239
  [margin-left]: var(--input-spacing-left),
238
240
  [margin-right]: var(--input-spacing-right),
239
241
  element: (
package/src/settings/components/_vv-textarea.scss CHANGED
@@ -80,10 +80,10 @@ $vv-textarea: (
80
80
  [padding]: var(--input-spacing-top) var(--input-spacing-right)
81
81
  var(--input-spacing-bottom) var(--input-spacing-left),
82
82
  overflow: auto,
83
+ text-overflow: var(--input-text-overflow),
83
84
  pseudo: (
84
85
  placeholder: (
85
86
  color: var(--input-placeholder-color),
86
- text-overflow: ellipsis,
87
87
  ),
88
88
  ),
89
89
  state: (
@@ -138,7 +138,6 @@ $vv-textarea: (
138
138
  white-space: var(--input-hint-white-space),
139
139
  text-overflow: var(--input-hint-text-overflow),
140
140
  overflow: var(--input-hint-overflow),
141
- max-width: var(--input-hint-max-width),
142
141
  ),
143
142
  ),
144
143
  modifier: (
@@ -210,6 +209,7 @@ $vv-textarea: (
210
209
  ),
211
210
  ),
212
211
  floating: (
212
+ position: relative,
213
213
  [margin-left]: var(--input-spacing-left),
214
214
  [margin-right]: var(--input-spacing-right),
215
215
  element: (
package/src/tools/_mixins.scss CHANGED
@@ -1048,7 +1048,7 @@
1048
1048
  @each $state, $value in $states {
1049
1049
  @if $state in [ 'enter-from', 'enter-active', 'enter-to',
1050
1050
  'leave-from', 'leave-active', 'leave-to', 'active',
1051
- 'inert' ] and type-of($value) == 'map'
1051
+ 'inert'] and type-of($value) == 'map'
1052
1052
  {
1053
1053
  $selector: '.#{$transition}';
1054
1054
 
package/dist/components/vv-toast.css DELETED
@@ -1 +0,0 @@
1
- :where(:host,:root,.theme){--vv-toast-position: relative;--vv-toast-display: flex;--vv-toast-flex-direction: column;--vv-toast-overflow: hidden;--vv-toast-border-radius: var(--rounded);--vv-toast-background-color: var(--color-surface);--vv-toast-box-shadow: var(--shadow-lg);--vv-toast-color: var(--color-word-2);--vv-toast-backdrop-filter: none;--vv-toast-border-width: var(--border);--vv-toast-border-style: solid;--vv-toast-border-color: var(--color-gray);--vv-toast-width: max(15vw, min(20rem, 80vw));--vv-toast-element-header-display: flex;--vv-toast-element-header-overflow: hidden;--vv-toast-element-header-align-items: center;--vv-toast-element-header-padding: var(--spacing-10);--vv-toast-element-header-color: var(--color-white);--vv-toast-element-header-background-color: var(--color-gray);--vv-toast-element-header-font-size: var(--text-16);--vv-toast-element-content-padding: var(--spacing-10);--vv-toast-element-content-background-color: var(--color-surface-2);--vv-toast-element-content-flex-grow: 1;--vv-toast-element-content-min-height: 0;--vv-toast-element-content-overflow: auto;--vv-toast-element-content-font-size: var(--text-14);--vv-toast-element-close-position: absolute;--vv-toast-element-close-right: var(--spacing-10);--vv-toast-element-close-inline-size: 1.1em;--vv-toast-element-close-block-size: 1.1em;--vv-toast-element-close-cursor: pointer;--vv-toast-element-close-border-radius: var(--rounded);--vv-toast-element-close-background-image: var(--bg-close);--vv-toast-element-close-background-color: var(--color-surface-2);--vv-toast-element-close-background-position: center;--vv-toast-element-close-background-size: 70% auto;--vv-toast-element-close-background-repeat: no-repeat;--vv-toast-element-pie-position: absolute;--vv-toast-element-pie-display: block;--vv-toast-element-pie-right: var(--spacing-10);--vv-toast-element-pie-width: 1.1em;--vv-toast-element-pie-height: 1.1em;--vv-toast-element-pie-background-color: var(--color-white);--vv-toast-element-pie-border: 1px solid var(--color-white);--vv-toast-element-pie-border-radius: 50%;--vv-toast-element-pie-overflow: hidden;--vv-toast-element-pie-opacity: var(--opacity-80);--vv-toast-element-pie-cursor: pointer;--vv-toast-element-pie-pseudo-before-position: absolute;--vv-toast-element-pie-pseudo-before-top: 0;--vv-toast-element-pie-pseudo-before-width: 50%;--vv-toast-element-pie-pseudo-before-height: 100%;--vv-toast-element-pie-pseudo-before-transform-origin: 100% 50%;--vv-toast-element-pie-pseudo-before-background-color: var(--color-gray);--vv-toast-element-pie-pseudo-before-border-radius: 100% 0 0 100%/50% 0 0 50%;--vv-toast-element-pie-pseudo-before-will-change: transform;--vv-toast-element-pie-pseudo-after-position: absolute;--vv-toast-element-pie-pseudo-after-top: 0;--vv-toast-element-pie-pseudo-after-width: 50%;--vv-toast-element-pie-pseudo-after-height: 100%;--vv-toast-element-pie-pseudo-after-background-color: var(--color-white);--vv-toast-element-pie-pseudo-after-will-change: opacity;--vv-toast-element-pie-pseudo-after-border-radius: 100% 0 0 100%/50% 0 0 50%;--vv-toast-element-pie-pseudo-after-opacity: var(--opacity-0);--vv-toast-element-pie-mask-position: absolute;--vv-toast-element-pie-mask-top: 0;--vv-toast-element-pie-mask-width: 50%;--vv-toast-element-pie-mask-height: 100%;--vv-toast-element-pie-mask-left: 50%;--vv-toast-element-pie-mask-background-color: var(--color-gray);--vv-toast-element-pie-mask-will-change: opacity;--vv-toast-element-pie-mask-z-index: 1;--vv-toast-modifier-fixed-position: fixed;--vv-toast-modifier-fixed-z-index: var(--z-toast);--vv-toast-modifier-top-inset-block: var(--spacing-lg) auto;--vv-toast-modifier-right-inset-inline: auto var(--spacing-lg);--vv-toast-modifier-bottom-inset-block: auto var(--spacing-lg);--vv-toast-modifier-left-inset-inline: var(--spacing-lg) auto;--vv-toast-modifier-center-inset-inline: 50% auto;--vv-toast-modifier-center-transform: translateX(-50%);--vv-toast-modifier-dismissable-element-header-padding-right: calc(var(--spacing-10) * 2 + 1.1em);--vv-toast-modifier-success-border-color: var(--color-success);--vv-toast-modifier-success-element-header-background-color: var(--color-success);--vv-toast-modifier-success-element-content-border-color: var(--color-success);--vv-toast-modifier-success-element-content-background-color: var(--color-surface-success);--vv-toast-modifier-success-element-pie-pseudo-before-background-color: var(--color-success);--vv-toast-modifier-success-element-pie-mask-background-color: var(--color-success);--vv-toast-modifier-danger-border-color: var(--color-danger);--vv-toast-modifier-danger-element-header-background-color: var(--color-danger);--vv-toast-modifier-danger-element-content-border-color: var(--color-danger);--vv-toast-modifier-danger-element-content-background-color: var(--color-surface-danger);--vv-toast-modifier-danger-element-pie-pseudo-before-background-color: var(--color-danger);--vv-toast-modifier-danger-element-pie-mask-background-color: var(--color-danger);--vv-toast-modifier-warning-border-color: var(--color-warning-darken-1);--vv-toast-modifier-warning-element-header-background-color: var(--color-warning-darken-1);--vv-toast-modifier-warning-element-content-border-color: var(--color-warning);--vv-toast-modifier-warning-element-content-background-color: var(--color-surface-warning);--vv-toast-modifier-warning-element-pie-pseudo-before-background-color: var(--color-warning);--vv-toast-modifier-warning-element-pie-mask-background-color: var(--color-warning);--vv-toast-modifier-info-border-color: var(--color-info-darken-1);--vv-toast-modifier-info-element-header-background-color: var(--color-info-darken-1);--vv-toast-modifier-info-element-content-border-color: var(--color-info);--vv-toast-modifier-info-element-content-background-color: var(--color-surface-info);--vv-toast-modifier-info-element-pie-pseudo-before-background-color: var(--color-info-darken-1);--vv-toast-modifier-info-element-pie-mask-background-color: var(--color-info-darken-1);--vv-toast-modifier-accent-border-color: var(--color-accent);--vv-toast-modifier-accent-element-header-background-color: var(--color-accent);--vv-toast-modifier-accent-element-content-border-color: var(--color-accent);--vv-toast-modifier-accent-element-content-background-color: var(--color-surface-accent);--vv-toast-modifier-accent-element-pie-pseudo-before-background-color: var(--color-accent);--vv-toast-modifier-accent-element-pie-mask-background-color: var(--color-accent);--vv-toast-modifier-brand-border-color: var(--color-brand);--vv-toast-modifier-brand-element-header-background-color: var(--color-brand);--vv-toast-modifier-brand-element-content-border-color: var(--color-brand);--vv-toast-modifier-brand-element-content-background-color: var(--color-surface-brand);--vv-toast-modifier-brand-element-pie-pseudo-before-background-color: var(--color-brand);--vv-toast-modifier-brand-element-pie-mask-background-color: var(--color-brand)}:where(.vv-toast){--toast-pie-animation-duration: 3s;position:var(--vv-toast-position);display:var(--vv-toast-display);flex-direction:var(--vv-toast-flex-direction);overflow:var(--vv-toast-overflow);border-radius:var(--vv-toast-border-radius);background-color:var(--vv-toast-background-color);box-shadow:var(--vv-toast-box-shadow);color:var(--vv-toast-color);-webkit-backdrop-filter:var(--vv-toast-backdrop-filter);backdrop-filter:var(--vv-toast-backdrop-filter);border-width:var(--vv-toast-border-width);border-style:var(--vv-toast-border-style);border-color:var(--vv-toast-border-color);width:var(--vv-toast-width)}:where(.vv-toast__header){display:var(--vv-toast-element-header-display);overflow:var(--vv-toast-element-header-overflow);align-items:var(--vv-toast-element-header-align-items);padding:var(--vv-toast-element-header-padding);color:var(--vv-toast-element-header-color);background-color:var(--vv-toast-element-header-background-color);font-size:var(--vv-toast-element-header-font-size)}:where(.vv-toast__content){padding:var(--vv-toast-element-content-padding);background-color:var(--vv-toast-element-content-background-color);flex-grow:var(--vv-toast-element-content-flex-grow);min-height:var(--vv-toast-element-content-min-height);overflow:var(--vv-toast-element-content-overflow);font-size:var(--vv-toast-element-content-font-size)}:where(.vv-toast__close){position:var(--vv-toast-element-close-position);right:var(--vv-toast-element-close-right);inline-size:var(--vv-toast-element-close-inline-size);block-size:var(--vv-toast-element-close-block-size);cursor:var(--vv-toast-element-close-cursor);border-radius:var(--vv-toast-element-close-border-radius);background-image:var(--vv-toast-element-close-background-image);background-color:var(--vv-toast-element-close-background-color);background-position:var(--vv-toast-element-close-background-position);background-size:var(--vv-toast-element-close-background-size);background-repeat:var(--vv-toast-element-close-background-repeat)}:where(.vv-toast__pie){position:var(--vv-toast-element-pie-position);display:var(--vv-toast-element-pie-display);right:var(--vv-toast-element-pie-right);width:var(--vv-toast-element-pie-width);height:var(--vv-toast-element-pie-height);background-color:var(--vv-toast-element-pie-background-color);border:var(--vv-toast-element-pie-border);border-radius:var(--vv-toast-element-pie-border-radius);overflow:var(--vv-toast-element-pie-overflow);opacity:var(--vv-toast-element-pie-opacity);cursor:var(--vv-toast-element-pie-cursor)}:where(.vv-toast__pie):before{content:"";position:var(--vv-toast-element-pie-pseudo-before-position);top:var(--vv-toast-element-pie-pseudo-before-top);width:var(--vv-toast-element-pie-pseudo-before-width);height:var(--vv-toast-element-pie-pseudo-before-height);transform-origin:var(--vv-toast-element-pie-pseudo-before-transform-origin);background-color:var(--vv-toast-element-pie-pseudo-before-background-color);border-radius:var(--vv-toast-element-pie-pseudo-before-border-radius);will-change:var(--vv-toast-element-pie-pseudo-before-will-change);animation:spin var(--toast-pie-animation-duration) linear}:where(.vv-toast__pie):after{content:"";position:var(--vv-toast-element-pie-pseudo-after-position);top:var(--vv-toast-element-pie-pseudo-after-top);width:var(--vv-toast-element-pie-pseudo-after-width);height:var(--vv-toast-element-pie-pseudo-after-height);background-color:var(--vv-toast-element-pie-pseudo-after-background-color);will-change:var(--vv-toast-element-pie-pseudo-after-will-change);border-radius:var(--vv-toast-element-pie-pseudo-after-border-radius);animation:pie-masks var(--toast-pie-animation-duration) steps(1,end);opacity:var(--vv-toast-element-pie-pseudo-after-opacity)}:where(.vv-toast__pie-mask){position:var(--vv-toast-element-pie-mask-position);top:var(--vv-toast-element-pie-mask-top);width:var(--vv-toast-element-pie-mask-width);height:var(--vv-toast-element-pie-mask-height);left:var(--vv-toast-element-pie-mask-left);background-color:var(--vv-toast-element-pie-mask-background-color);will-change:var(--vv-toast-element-pie-mask-will-change);animation:pie-masks var(--toast-pie-animation-duration) steps(1,end) reverse;z-index:var(--vv-toast-element-pie-mask-z-index)}:where(.vv-toast--fixed.vv-toast){--vv-toast-position: var(--vv-toast-modifier-fixed-position);z-index:var(--vv-toast-modifier-fixed-z-index)}:where(.vv-toast--top.vv-toast){inset-block:var(--vv-toast-modifier-top-inset-block)}:where(.vv-toast--right.vv-toast){inset-inline:var(--vv-toast-modifier-right-inset-inline)}:where(.vv-toast--bottom.vv-toast){inset-block:var(--vv-toast-modifier-bottom-inset-block)}:where(.vv-toast--left.vv-toast){inset-inline:var(--vv-toast-modifier-left-inset-inline)}:where(.vv-toast--center.vv-toast){inset-inline:var(--vv-toast-modifier-center-inset-inline);transform:var(--vv-toast-modifier-center-transform)}:where(.vv-toast--dismissable .vv-toast__header){padding-right:var(--vv-toast-modifier-dismissable-element-header-padding-right)}:where(.vv-toast--success.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-success-border-color)}:where(.vv-toast--success .vv-toast__header){background-color:var(--vv-toast-modifier-success-element-header-background-color)}:where(.vv-toast--success .vv-toast__content){border-color:var(--vv-toast-modifier-success-element-content-border-color);background-color:var(--vv-toast-modifier-success-element-content-background-color)}:where(.vv-toast--success .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-success-element-pie-pseudo-before-background-color)}:where(.vv-toast--success .vv-toast__pie-mask){background-color:var(--vv-toast-modifier-success-element-pie-mask-background-color)}:where(.vv-toast--danger.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-danger-border-color)}:where(.vv-toast--danger .vv-toast__header){background-color:var(--vv-toast-modifier-danger-element-header-background-color)}:where(.vv-toast--danger .vv-toast__content){border-color:var(--vv-toast-modifier-danger-element-content-border-color);background-color:var(--vv-toast-modifier-danger-element-content-background-color)}:where(.vv-toast--danger .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-danger-element-pie-pseudo-before-background-color)}:where(.vv-toast--danger .vv-toast__pie-mask){background-color:var(--vv-toast-modifier-danger-element-pie-mask-background-color)}:where(.vv-toast--warning.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-warning-border-color)}:where(.vv-toast--warning .vv-toast__header){background-color:var(--vv-toast-modifier-warning-element-header-background-color)}:where(.vv-toast--warning .vv-toast__content){border-color:var(--vv-toast-modifier-warning-element-content-border-color);background-color:var(--vv-toast-modifier-warning-element-content-background-color)}:where(.vv-toast--warning .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-warning-element-pie-pseudo-before-background-color)}:where(.vv-toast--warning .vv-toast__pie-mask){background-color:var(--vv-toast-modifier-warning-element-pie-mask-background-color)}:where(.vv-toast--info.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-info-border-color)}:where(.vv-toast--info .vv-toast__header){background-color:var(--vv-toast-modifier-info-element-header-background-color)}:where(.vv-toast--info .vv-toast__content){border-color:var(--vv-toast-modifier-info-element-content-border-color);background-color:var(--vv-toast-modifier-info-element-content-background-color)}:where(.vv-toast--info .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-info-element-pie-pseudo-before-background-color)}:where(.vv-toast--info .vv-toast__pie-mask){background-color:var(--vv-toast-modifier-info-element-pie-mask-background-color)}:where(.vv-toast--accent.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-accent-border-color)}:where(.vv-toast--accent .vv-toast__header){background-color:var(--vv-toast-modifier-accent-element-header-background-color)}:where(.vv-toast--accent .vv-toast__content){border-color:var(--vv-toast-modifier-accent-element-content-border-color);background-color:var(--vv-toast-modifier-accent-element-content-background-color)}:where(.vv-toast--accent .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-accent-element-pie-pseudo-before-background-color)}:where(.vv-toast--accent .vv-toast__pie-mask){background-color:var(--vv-toast-modifier-accent-element-pie-mask-background-color)}:where(.vv-toast--brand.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-brand-border-color)}:where(.vv-toast--brand .vv-toast__header){background-color:var(--vv-toast-modifier-brand-element-header-background-color)}:where(.vv-toast--brand .vv-toast__content){border-color:var(--vv-toast-modifier-brand-element-content-border-color);background-color:var(--vv-toast-modifier-brand-element-content-background-color)}:where(.vv-toast--brand .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-brand-element-pie-pseudo-before-background-color)}:where(.vv-toast--brand .vv-toast__pie-mask){background-color:var(--vv-toast-modifier-brand-element-pie-mask-background-color)}