@aws-amplify/ui-react-notifications 0.0.0-studio-41bd6b8-20230725225637 → 0.0.0-studio-e5b8195-20230912200241

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 (2) hide show
  1. package/dist/styles.css +1540 -218
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -83,6 +83,28 @@
83
83
  --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
84
84
  --amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
85
85
  --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
86
+ --amplify-components-breadcrumbs-flex-direction: row;
87
+ --amplify-components-breadcrumbs-flex-wrap: wrap;
88
+ --amplify-components-breadcrumbs-gap: 0;
89
+ --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary);
90
+ --amplify-components-breadcrumbs-item-flex-direction: row;
91
+ --amplify-components-breadcrumbs-item-color: inherit;
92
+ --amplify-components-breadcrumbs-item-font-size: inherit;
93
+ --amplify-components-breadcrumbs-item-align-items: center;
94
+ --amplify-components-breadcrumbs-item-line-height: 1;
95
+ --amplify-components-breadcrumbs-separator-color: inherit;
96
+ --amplify-components-breadcrumbs-separator-font-size: inherit;
97
+ --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs);
98
+ --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color);
99
+ --amplify-components-breadcrumbs-link-font-size: inherit;
100
+ --amplify-components-breadcrumbs-link-font-weight: normal;
101
+ --amplify-components-breadcrumbs-link-text-decoration: none;
102
+ --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs);
103
+ --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs);
104
+ --amplify-components-breadcrumbs-link-current-color: inherit;
105
+ --amplify-components-breadcrumbs-link-current-font-size: inherit;
106
+ --amplify-components-breadcrumbs-link-current-font-weight: normal;
107
+ --amplify-components-breadcrumbs-link-current-text-decoration: none;
86
108
  --amplify-components-button-font-weight: var(--amplify-font-weights-bold);
87
109
  --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
88
110
  --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
@@ -91,6 +113,7 @@
91
113
  --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
92
114
  --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
93
115
  --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
116
+ --amplify-components-button-background-color: transparent;
94
117
  --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
95
118
  --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
96
119
  --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
@@ -112,6 +135,71 @@
112
135
  --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
113
136
  --amplify-components-button-disabled-background-color: transparent;
114
137
  --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
138
+ --amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60);
139
+ --amplify-components-button-outlined-info-background-color: transparent;
140
+ --amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100);
141
+ --amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60);
142
+ --amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10);
143
+ --amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100);
144
+ --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
145
+ --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
146
+ --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100);
147
+ --amplify-components-button-outlined-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
148
+ --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
149
+ --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
150
+ --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
151
+ --amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60);
152
+ --amplify-components-button-outlined-warning-background-color: transparent;
153
+ --amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100);
154
+ --amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60);
155
+ --amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10);
156
+ --amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100);
157
+ --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
158
+ --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
159
+ --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100);
160
+ --amplify-components-button-outlined-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
161
+ --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
162
+ --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
163
+ --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
164
+ --amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60);
165
+ --amplify-components-button-outlined-success-background-color: transparent;
166
+ --amplify-components-button-outlined-success-color: var(--amplify-colors-green-100);
167
+ --amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60);
168
+ --amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10);
169
+ --amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100);
170
+ --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
171
+ --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
172
+ --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100);
173
+ --amplify-components-button-outlined-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
174
+ --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
175
+ --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
176
+ --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
177
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
178
+ --amplify-components-button-outlined-error-background-color: transparent;
179
+ --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
180
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
181
+ --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
182
+ --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
183
+ --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
184
+ --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
185
+ --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100);
186
+ --amplify-components-button-outlined-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
187
+ --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
188
+ --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
189
+ --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
190
+ --amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60);
191
+ --amplify-components-button-outlined-overlay-background-color: transparent;
192
+ --amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary);
193
+ --amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60);
194
+ --amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5);
195
+ --amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90);
196
+ --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
197
+ --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
198
+ --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90);
199
+ --amplify-components-button-outlined-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
200
+ --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
201
+ --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
202
+ --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
115
203
  --amplify-components-button-primary-border-color: transparent;
116
204
  --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
117
205
  --amplify-components-button-primary-border-style: solid;
@@ -133,6 +221,71 @@
133
221
  --amplify-components-button-primary-active-border-color: transparent;
134
222
  --amplify-components-button-primary-active-background-color: var(--amplify-colors-brand-primary-100);
135
223
  --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse);
224
+ --amplify-components-button-primary-info-border-color: transparent;
225
+ --amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80);
226
+ --amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse);
227
+ --amplify-components-button-primary-info-hover-border-color: transparent;
228
+ --amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90);
229
+ --amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse);
230
+ --amplify-components-button-primary-info-focus-border-color: transparent;
231
+ --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
232
+ --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse);
233
+ --amplify-components-button-primary-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
234
+ --amplify-components-button-primary-info-active-border-color: transparent;
235
+ --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
236
+ --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
237
+ --amplify-components-button-primary-warning-border-color: transparent;
238
+ --amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80);
239
+ --amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse);
240
+ --amplify-components-button-primary-warning-hover-border-color: transparent;
241
+ --amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90);
242
+ --amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse);
243
+ --amplify-components-button-primary-warning-focus-border-color: transparent;
244
+ --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
245
+ --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse);
246
+ --amplify-components-button-primary-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
247
+ --amplify-components-button-primary-warning-active-border-color: transparent;
248
+ --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
249
+ --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
250
+ --amplify-components-button-primary-error-border-color: transparent;
251
+ --amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80);
252
+ --amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse);
253
+ --amplify-components-button-primary-error-hover-border-color: transparent;
254
+ --amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90);
255
+ --amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse);
256
+ --amplify-components-button-primary-error-focus-border-color: transparent;
257
+ --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
258
+ --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse);
259
+ --amplify-components-button-primary-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
260
+ --amplify-components-button-primary-error-active-border-color: transparent;
261
+ --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
262
+ --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
263
+ --amplify-components-button-primary-success-border-color: transparent;
264
+ --amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80);
265
+ --amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse);
266
+ --amplify-components-button-primary-success-hover-border-color: transparent;
267
+ --amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90);
268
+ --amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse);
269
+ --amplify-components-button-primary-success-focus-border-color: transparent;
270
+ --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
271
+ --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse);
272
+ --amplify-components-button-primary-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
273
+ --amplify-components-button-primary-success-active-border-color: transparent;
274
+ --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
275
+ --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
276
+ --amplify-components-button-primary-overlay-border-color: transparent;
277
+ --amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70);
278
+ --amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse);
279
+ --amplify-components-button-primary-overlay-hover-border-color: transparent;
280
+ --amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90);
281
+ --amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse);
282
+ --amplify-components-button-primary-overlay-focus-border-color: transparent;
283
+ --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
284
+ --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse);
285
+ --amplify-components-button-primary-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
286
+ --amplify-components-button-primary-overlay-active-border-color: transparent;
287
+ --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
288
+ --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
136
289
  --amplify-components-button-menu-border-width: var(--amplify-space-zero);
137
290
  --amplify-components-button-menu-background-color: transparent;
138
291
  --amplify-components-button-menu-justify-content: start;
@@ -145,7 +298,7 @@
145
298
  --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
146
299
  --amplify-components-button-link-background-color: transparent;
147
300
  --amplify-components-button-link-border-color: transparent;
148
- --amplify-components-button-link-border-width: var(--amplify-space-zero);
301
+ --amplify-components-button-link-border-width: var(--amplify-border-widths-small);
149
302
  --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
150
303
  --amplify-components-button-link-hover-border-color: transparent;
151
304
  --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
@@ -163,6 +316,71 @@
163
316
  --amplify-components-button-link-loading-border-color: transparent;
164
317
  --amplify-components-button-link-loading-background-color: transparent;
165
318
  --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
319
+ --amplify-components-button-link-info-border-color: transparent;
320
+ --amplify-components-button-link-info-background-color: transparent;
321
+ --amplify-components-button-link-info-color: var(--amplify-colors-blue-100);
322
+ --amplify-components-button-link-info-hover-border-color: transparent;
323
+ --amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10);
324
+ --amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90);
325
+ --amplify-components-button-link-info-focus-border-color: transparent;
326
+ --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
327
+ --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100);
328
+ --amplify-components-button-link-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
329
+ --amplify-components-button-link-info-active-border-color: transparent;
330
+ --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
331
+ --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
332
+ --amplify-components-button-link-warning-border-color: transparent;
333
+ --amplify-components-button-link-warning-background-color: transparent;
334
+ --amplify-components-button-link-warning-color: var(--amplify-colors-orange-100);
335
+ --amplify-components-button-link-warning-hover-border-color: transparent;
336
+ --amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10);
337
+ --amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90);
338
+ --amplify-components-button-link-warning-focus-border-color: transparent;
339
+ --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
340
+ --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100);
341
+ --amplify-components-button-link-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
342
+ --amplify-components-button-link-warning-active-border-color: transparent;
343
+ --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
344
+ --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
345
+ --amplify-components-button-link-success-border-color: transparent;
346
+ --amplify-components-button-link-success-background-color: transparent;
347
+ --amplify-components-button-link-success-color: var(--amplify-colors-green-100);
348
+ --amplify-components-button-link-success-hover-border-color: transparent;
349
+ --amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10);
350
+ --amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90);
351
+ --amplify-components-button-link-success-focus-border-color: transparent;
352
+ --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
353
+ --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100);
354
+ --amplify-components-button-link-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
355
+ --amplify-components-button-link-success-active-border-color: transparent;
356
+ --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
357
+ --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
358
+ --amplify-components-button-link-error-border-color: transparent;
359
+ --amplify-components-button-link-error-background-color: transparent;
360
+ --amplify-components-button-link-error-color: var(--amplify-colors-red-100);
361
+ --amplify-components-button-link-error-hover-border-color: transparent;
362
+ --amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10);
363
+ --amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90);
364
+ --amplify-components-button-link-error-focus-border-color: transparent;
365
+ --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
366
+ --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100);
367
+ --amplify-components-button-link-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
368
+ --amplify-components-button-link-error-active-border-color: transparent;
369
+ --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
370
+ --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
371
+ --amplify-components-button-link-overlay-border-color: transparent;
372
+ --amplify-components-button-link-overlay-background-color: transparent;
373
+ --amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100);
374
+ --amplify-components-button-link-overlay-hover-border-color: transparent;
375
+ --amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5);
376
+ --amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80);
377
+ --amplify-components-button-link-overlay-focus-border-color: transparent;
378
+ --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
379
+ --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90);
380
+ --amplify-components-button-link-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
381
+ --amplify-components-button-link-overlay-active-border-color: transparent;
382
+ --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
383
+ --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
166
384
  --amplify-components-button-warning-background-color: transparent;
167
385
  --amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
168
386
  --amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
@@ -313,6 +531,40 @@
313
531
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
314
532
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
315
533
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
534
+ --amplify-components-dropzone-background-color: var(--amplify-colors-background-primary);
535
+ --amplify-components-dropzone-border-radius: var(--amplify-radii-small);
536
+ --amplify-components-dropzone-border-color: var(--amplify-colors-border-primary);
537
+ --amplify-components-dropzone-border-style: dashed;
538
+ --amplify-components-dropzone-border-width: var(--amplify-border-widths-small);
539
+ --amplify-components-dropzone-color: var(--amplify-colors-font-primary);
540
+ --amplify-components-dropzone-gap: var(--amplify-space-small);
541
+ --amplify-components-dropzone-padding-block: var(--amplify-space-xl);
542
+ --amplify-components-dropzone-padding-inline: var(--amplify-space-large);
543
+ --amplify-components-dropzone-text-align: center;
544
+ --amplify-components-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
545
+ --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius);
546
+ --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed);
547
+ --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style);
548
+ --amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width);
549
+ --amplify-components-dropzone-active-color: var(--amplify-colors-font-primary);
550
+ --amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled);
551
+ --amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius);
552
+ --amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled);
553
+ --amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style);
554
+ --amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width);
555
+ --amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled);
556
+ --amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success);
557
+ --amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius);
558
+ --amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success);
559
+ --amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style);
560
+ --amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width);
561
+ --amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success);
562
+ --amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error);
563
+ --amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius);
564
+ --amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed);
565
+ --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style);
566
+ --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width);
567
+ --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error);
316
568
  --amplify-components-expander-display: block;
317
569
  --amplify-components-expander-background-color: var(--amplify-colors-background-primary);
318
570
  --amplify-components-expander-border-radius: var(--amplify-radii-medium);
@@ -407,6 +659,24 @@
407
659
  --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
408
660
  --amplify-components-fieldmessages-description-font-style: italic;
409
661
  --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
662
+ --amplify-components-fieldset-background-color: transparent;
663
+ --amplify-components-fieldset-border-radius: var(--amplify-radii-xs);
664
+ --amplify-components-fieldset-flex-direction: column;
665
+ --amplify-components-fieldset-gap: var(--amplify-components-field-gap);
666
+ --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary);
667
+ --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size);
668
+ --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold);
669
+ --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium);
670
+ --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size);
671
+ --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size);
672
+ --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium);
673
+ --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40);
674
+ --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small);
675
+ --amplify-components-fieldset-outlined-border-style: solid;
676
+ --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small);
677
+ --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
678
+ --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
679
+ --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
410
680
  --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
411
681
  --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
412
682
  --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
@@ -508,6 +778,10 @@
508
778
  --amplify-components-inappmessaging-dialog-width: 30vw;
509
779
  --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium);
510
780
  --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold);
781
+ --amplify-components-input-color: var(--amplify-components-fieldcontrol-color);
782
+ --amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color);
783
+ --amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size);
784
+ --amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
511
785
  --amplify-components-link-active-color: var(--amplify-colors-font-active);
512
786
  --amplify-components-link-color: var(--amplify-colors-font-interactive);
513
787
  --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
@@ -557,6 +831,66 @@
557
831
  --amplify-components-menu-item-min-height: 2.5rem;
558
832
  --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
559
833
  --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
834
+ --amplify-components-message-align-items: center;
835
+ --amplify-components-message-background-color: var(--amplify-colors-background-tertiary);
836
+ --amplify-components-message-border-color: transparent;
837
+ --amplify-components-message-border-style: solid;
838
+ --amplify-components-message-border-width: var(--amplify-border-widths-small);
839
+ --amplify-components-message-border-radius: var(--amplify-radii-xs);
840
+ --amplify-components-message-color: var(--amplify-colors-font-primary);
841
+ --amplify-components-message-justify-content: flex-start;
842
+ --amplify-components-message-padding-block: var(--amplify-space-small);
843
+ --amplify-components-message-padding-inline: var(--amplify-space-medium);
844
+ --amplify-components-message-line-height: var(--amplify-line-heights-small);
845
+ --amplify-components-message-icon-size: var(--amplify-font-sizes-xl);
846
+ --amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium);
847
+ --amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold);
848
+ --amplify-components-message-dismiss-gap: var(--amplify-space-xxs);
849
+ --amplify-components-message-plain-color: var(--amplify-colors-font-primary);
850
+ --amplify-components-message-plain-background-color: var(--amplify-colors-background-primary);
851
+ --amplify-components-message-plain-border-color: transparent;
852
+ --amplify-components-message-plain-info-color: var(--amplify-colors-font-info);
853
+ --amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary);
854
+ --amplify-components-message-plain-info-border-color: transparent;
855
+ --amplify-components-message-plain-error-color: var(--amplify-colors-font-error);
856
+ --amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary);
857
+ --amplify-components-message-plain-error-border-color: transparent;
858
+ --amplify-components-message-plain-success-color: var(--amplify-colors-font-success);
859
+ --amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary);
860
+ --amplify-components-message-plain-success-border-color: transparent;
861
+ --amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning);
862
+ --amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary);
863
+ --amplify-components-message-plain-warning-border-color: transparent;
864
+ --amplify-components-message-outlined-color: var(--amplify-colors-font-primary);
865
+ --amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary);
866
+ --amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary);
867
+ --amplify-components-message-outlined-info-color: var(--amplify-colors-font-info);
868
+ --amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary);
869
+ --amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info);
870
+ --amplify-components-message-outlined-error-color: var(--amplify-colors-font-error);
871
+ --amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary);
872
+ --amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error);
873
+ --amplify-components-message-outlined-success-color: var(--amplify-colors-font-success);
874
+ --amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary);
875
+ --amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success);
876
+ --amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning);
877
+ --amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary);
878
+ --amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning);
879
+ --amplify-components-message-filled-color: var(--amplify-colors-font-primary);
880
+ --amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary);
881
+ --amplify-components-message-filled-border-color: transparent;
882
+ --amplify-components-message-filled-info-color: var(--amplify-colors-font-info);
883
+ --amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info);
884
+ --amplify-components-message-filled-info-border-color: transparent;
885
+ --amplify-components-message-filled-error-color: var(--amplify-colors-font-error);
886
+ --amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error);
887
+ --amplify-components-message-filled-error-border-color: transparent;
888
+ --amplify-components-message-filled-success-color: var(--amplify-colors-font-success);
889
+ --amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success);
890
+ --amplify-components-message-filled-success-border-color: transparent;
891
+ --amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning);
892
+ --amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning);
893
+ --amplify-components-message-filled-warning-border-color: transparent;
560
894
  --amplify-components-pagination-current-align-items: center;
561
895
  --amplify-components-pagination-current-justify-content: center;
562
896
  --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse);
@@ -677,13 +1011,17 @@
677
1011
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
678
1012
  --amplify-components-select-icon-wrapper-transform: translateY(-50%);
679
1013
  --amplify-components-select-icon-wrapper-pointer-events: none;
1014
+ --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
1015
+ --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
680
1016
  --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
681
1017
  --amplify-components-select-option-color: var(--amplify-colors-font-primary);
682
1018
  --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
683
1019
  --amplify-components-select-white-space: nowrap;
684
1020
  --amplify-components-select-min-width: 6.5rem;
685
1021
  --amplify-components-select-small-min-width: 5.5rem;
1022
+ --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
686
1023
  --amplify-components-select-large-min-width: 7.5rem;
1024
+ --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
687
1025
  --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
688
1026
  --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
689
1027
  --amplify-components-selectfield-flex-direction: column;
@@ -792,12 +1130,7 @@
792
1130
  --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium);
793
1131
  --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium);
794
1132
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
795
- --amplify-components-storagemanager-previewer-footer-border-color: var(--amplify-colors-border-secondary);
796
- --amplify-components-storagemanager-previewer-footer-border-style: solid;
797
- --amplify-components-storagemanager-previewer-footer-border-width: var(--amplify-border-widths-small);
798
- --amplify-components-storagemanager-previewer-footer-padding-block: var(--amplify-space-medium);
799
- --amplify-components-storagemanager-previewer-footer-padding-inline: var(--amplify-space-medium);
800
- --amplify-components-storagemanager-previewer-footer-justify-content: space-between;
1133
+ --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
801
1134
  --amplify-components-storagemanager-filelist-flex-direction: column;
802
1135
  --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
803
1136
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
@@ -1057,10 +1390,10 @@
1057
1390
  --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
1058
1391
  --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60);
1059
1392
  --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
1060
- --amplify-colors-background-info: var(--amplify-colors-blue-20);
1061
- --amplify-colors-background-warning: var(--amplify-colors-orange-20);
1062
- --amplify-colors-background-error: var(--amplify-colors-red-20);
1063
- --amplify-colors-background-success: var(--amplify-colors-green-20);
1393
+ --amplify-colors-background-info: var(--amplify-colors-blue-10);
1394
+ --amplify-colors-background-warning: var(--amplify-colors-orange-10);
1395
+ --amplify-colors-background-error: var(--amplify-colors-red-10);
1396
+ --amplify-colors-background-success: var(--amplify-colors-green-10);
1064
1397
  --amplify-colors-border-primary: var(--amplify-colors-neutral-60);
1065
1398
  --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
1066
1399
  --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
@@ -1068,9 +1401,13 @@
1068
1401
  --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
1069
1402
  --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
1070
1403
  --amplify-colors-border-error: var(--amplify-colors-red-80);
1404
+ --amplify-colors-border-info: var(--amplify-colors-blue-80);
1405
+ --amplify-colors-border-success: var(--amplify-colors-green-80);
1406
+ --amplify-colors-border-warning: var(--amplify-colors-orange-80);
1071
1407
  --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);
1072
1408
  --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15);
1073
1409
  --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05);
1410
+ --amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05);
1074
1411
  --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1);
1075
1412
  --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2);
1076
1413
  --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3);
@@ -1306,27 +1643,37 @@ strong.amplify-text {
1306
1643
  * Button base styles
1307
1644
  */
1308
1645
  .amplify-button {
1646
+ --amplify-internal-button-background-color: var(
1647
+ --amplify-components-button-background-color
1648
+ );
1649
+ --amplify-internal-button-border-color: var(
1650
+ --amplify-components-button-border-color
1651
+ );
1652
+ --amplify-internal-button-color: var(--amplify-components-button-color);
1653
+ --amplify-internal-button-focus-box-shadow: var(
1654
+ --amplify-components-button-focus-box-shadow
1655
+ );
1656
+ --amplify-internal-button-border-width: var(
1657
+ --amplify-components-button-border-width
1658
+ );
1309
1659
  align-items: center;
1310
- border-color: var(--amplify-components-button-border-color);
1660
+ background-color: var(--amplify-internal-button-background-color);
1661
+ border-color: var(--amplify-internal-button-border-color);
1311
1662
  border-radius: var(--amplify-components-button-border-radius);
1312
1663
  border-style: var(--amplify-components-button-border-style);
1313
- border-width: var(--amplify-components-button-border-width);
1664
+ border-width: var(--amplify-internal-button-border-width);
1314
1665
  box-sizing: border-box;
1315
- color: var(--amplify-components-button-color);
1666
+ color: var(--amplify-internal-button-color);
1316
1667
  cursor: pointer;
1317
1668
  display: inline-flex;
1318
1669
  font-size: var(--amplify-components-button-font-size);
1319
1670
  font-weight: var(--amplify-components-button-font-weight);
1320
1671
  justify-content: center;
1321
1672
  line-height: var(--amplify-components-button-line-height);
1322
- -webkit-padding-before: var(--amplify-components-button-padding-block-start);
1323
- padding-block-start: var(--amplify-components-button-padding-block-start);
1324
- -webkit-padding-after: var(--amplify-components-button-padding-block-end);
1325
- padding-block-end: var(--amplify-components-button-padding-block-end);
1326
- -webkit-padding-start: var(--amplify-components-button-padding-inline-start);
1327
- padding-inline-start: var(--amplify-components-button-padding-inline-start);
1328
- -webkit-padding-end: var(--amplify-components-button-padding-inline-end);
1329
- padding-inline-end: var(--amplify-components-button-padding-inline-end);
1673
+ padding-block-start: var(--amplify-components-button-padding-block-start);
1674
+ padding-block-end: var(--amplify-components-button-padding-block-end);
1675
+ padding-inline-start: var(--amplify-components-button-padding-inline-start);
1676
+ padding-inline-end: var(--amplify-components-button-padding-inline-end);
1330
1677
  transition: all var(--amplify-components-button-transition-duration);
1331
1678
  -webkit-user-select: none;
1332
1679
  -moz-user-select: none;
@@ -1353,24 +1700,277 @@ strong.amplify-text {
1353
1700
  --amplify-internal-button-loading-text-decoration: initial;
1354
1701
  }
1355
1702
  .amplify-button:hover {
1356
- background-color: var(--amplify-components-button-hover-background-color);
1357
- border-color: var(--amplify-components-button-hover-border-color);
1358
- color: var(--amplify-components-button-hover-color);
1703
+ --amplify-internal-button-background-color: var(
1704
+ --amplify-components-button-hover-background-color
1705
+ );
1706
+ --amplify-internal-button-border-color: var(
1707
+ --amplify-components-button-hover-border-color
1708
+ );
1709
+ --amplify-internal-button-color: var(
1710
+ --amplify-components-button-hover-color
1711
+ );
1359
1712
  }
1360
1713
  .amplify-button:focus {
1361
- background-color: var(--amplify-components-button-hover-background-color);
1362
- border-color: var(--amplify-components-button-focus-border-color);
1363
- color: var(--amplify-components-button-focus-color);
1364
- box-shadow: var(--amplify-components-button-focus-box-shadow);
1714
+ --amplify-internal-button-background-color: var(
1715
+ --amplify-components-button-hover-background-color
1716
+ );
1717
+ --amplify-internal-button-border-color: var(
1718
+ --amplify-components-button-focus-border-color
1719
+ );
1720
+ --amplify-internal-button-color: var(
1721
+ --amplify-components-button-focus-color
1722
+ );
1723
+ box-shadow: var(--amplify-internal-button-focus-box-shadow);
1365
1724
  }
1366
1725
  .amplify-button:active {
1367
- background-color: var(--amplify-components-button-active-background-color);
1368
- border-color: var(--amplify-components-button-active-border-color);
1369
- color: var(--amplify-components-button-active-color);
1726
+ --amplify-internal-button-background-color: var(
1727
+ --amplify-components-button-active-background-color
1728
+ );
1729
+ --amplify-internal-button-border-color: var(
1730
+ --amplify-components-button-active-border-color
1731
+ );
1732
+ --amplify-internal-button-color: var(
1733
+ --amplify-components-button-active-color
1734
+ );
1370
1735
  }
1371
1736
  .amplify-button--fullwidth {
1372
1737
  width: 100%;
1373
1738
  }
1739
+ .amplify-button--outlined--info {
1740
+ --amplify-internal-button-background-color: var(
1741
+ --amplify-components-button-outlined-info-background-color
1742
+ );
1743
+ --amplify-internal-button-border-color: var(
1744
+ --amplify-components-button-outlined-info-border-color
1745
+ );
1746
+ --amplify-internal-button-color: var(
1747
+ --amplify-components-button-outlined-info-color
1748
+ );
1749
+ }
1750
+ .amplify-button--outlined--info:hover {
1751
+ --amplify-internal-button-background-color: var(
1752
+ --amplify-components-button-outlined-info-hover-background-color
1753
+ );
1754
+ --amplify-internal-button-border-color: var(
1755
+ --amplify-components-button-outlined-info-hover-border-color
1756
+ );
1757
+ --amplify-internal-button-color: var(
1758
+ --amplify-components-button-outlined-info-hover-color
1759
+ );
1760
+ }
1761
+ .amplify-button--outlined--info:focus {
1762
+ --amplify-internal-button-background-color: var(
1763
+ --amplify-components-button-outlined-info-focus-background-color
1764
+ );
1765
+ --amplify-internal-button-border-color: var(
1766
+ --amplify-components-button-outlined-info-focus-border-color
1767
+ );
1768
+ --amplify-internal-button-color: var(
1769
+ --amplify-components-button-outlined-info-focus-color
1770
+ );
1771
+ --amplify-internal-button-focus-box-shadow: var(
1772
+ --amplify-components-button-outlined-info-focus-box-shadow
1773
+ );
1774
+ }
1775
+ .amplify-button--outlined--info:active {
1776
+ --amplify-internal-button-background-color: var(
1777
+ --amplify-components-button-outlined-info-active-background-color
1778
+ );
1779
+ --amplify-internal-button-border-color: var(
1780
+ --amplify-components-button-outlined-info-active-border-color
1781
+ );
1782
+ --amplify-internal-button-color: var(
1783
+ --amplify-components-button-outlined-info-active-color
1784
+ );
1785
+ }
1786
+ .amplify-button--outlined--warning {
1787
+ --amplify-internal-button-background-color: var(
1788
+ --amplify-components-button-outlined-warning-background-color
1789
+ );
1790
+ --amplify-internal-button-border-color: var(
1791
+ --amplify-components-button-outlined-warning-border-color
1792
+ );
1793
+ --amplify-internal-button-color: var(
1794
+ --amplify-components-button-outlined-warning-color
1795
+ );
1796
+ }
1797
+ .amplify-button--outlined--warning:hover {
1798
+ --amplify-internal-button-background-color: var(
1799
+ --amplify-components-button-outlined-warning-hover-background-color
1800
+ );
1801
+ --amplify-internal-button-border-color: var(
1802
+ --amplify-components-button-outlined-warning-hover-border-color
1803
+ );
1804
+ --amplify-internal-button-color: var(
1805
+ --amplify-components-button-outlined-warning-hover-color
1806
+ );
1807
+ }
1808
+ .amplify-button--outlined--warning:focus {
1809
+ --amplify-internal-button-background-color: var(
1810
+ --amplify-components-button-outlined-warning-focus-background-color
1811
+ );
1812
+ --amplify-internal-button-border-color: var(
1813
+ --amplify-components-button-outlined-warning-focus-border-color
1814
+ );
1815
+ --amplify-internal-button-color: var(
1816
+ --amplify-components-button-outlined-warning-focus-color
1817
+ );
1818
+ --amplify-internal-button-focus-box-shadow: var(
1819
+ --amplify-components-button-outlined-warning-focus-box-shadow
1820
+ );
1821
+ }
1822
+ .amplify-button--outlined--warning:active {
1823
+ --amplify-internal-button-background-color: var(
1824
+ --amplify-components-button-outlined-warning-active-background-color
1825
+ );
1826
+ --amplify-internal-button-border-color: var(
1827
+ --amplify-components-button-outlined-warning-active-border-color
1828
+ );
1829
+ --amplify-internal-button-color: var(
1830
+ --amplify-components-button-outlined-warning-active-color
1831
+ );
1832
+ }
1833
+ .amplify-button--outlined--error {
1834
+ --amplify-internal-button-background-color: var(
1835
+ --amplify-components-button-outlined-error-background-color
1836
+ );
1837
+ --amplify-internal-button-border-color: var(
1838
+ --amplify-components-button-outlined-error-border-color
1839
+ );
1840
+ --amplify-internal-button-color: var(
1841
+ --amplify-components-button-outlined-error-color
1842
+ );
1843
+ }
1844
+ .amplify-button--outlined--error:hover {
1845
+ --amplify-internal-button-background-color: var(
1846
+ --amplify-components-button-outlined-error-hover-background-color
1847
+ );
1848
+ --amplify-internal-button-border-color: var(
1849
+ --amplify-components-button-outlined-error-hover-border-color
1850
+ );
1851
+ --amplify-internal-button-color: var(
1852
+ --amplify-components-button-outlined-error-hover-color
1853
+ );
1854
+ }
1855
+ .amplify-button--outlined--error:focus {
1856
+ --amplify-internal-button-background-color: var(
1857
+ --amplify-components-button-outlined-error-focus-background-color
1858
+ );
1859
+ --amplify-internal-button-border-color: var(
1860
+ --amplify-components-button-outlined-error-focus-border-color
1861
+ );
1862
+ --amplify-internal-button-color: var(
1863
+ --amplify-components-button-outlined-error-focus-color
1864
+ );
1865
+ --amplify-internal-button-focus-box-shadow: var(
1866
+ --amplify-components-button-outlined-error-focus-box-shadow
1867
+ );
1868
+ }
1869
+ .amplify-button--outlined--error:active {
1870
+ --amplify-internal-button-background-color: var(
1871
+ --amplify-components-button-outlined-error-active-background-color
1872
+ );
1873
+ --amplify-internal-button-border-color: var(
1874
+ --amplify-components-button-outlined-error-active-border-color
1875
+ );
1876
+ --amplify-internal-button-color: var(
1877
+ --amplify-components-button-outlined-error-active-color
1878
+ );
1879
+ }
1880
+ .amplify-button--outlined--success {
1881
+ --amplify-internal-button-background-color: var(
1882
+ --amplify-components-button-outlined-success-background-color
1883
+ );
1884
+ --amplify-internal-button-border-color: var(
1885
+ --amplify-components-button-outlined-success-border-color
1886
+ );
1887
+ --amplify-internal-button-color: var(
1888
+ --amplify-components-button-outlined-success-color
1889
+ );
1890
+ }
1891
+ .amplify-button--outlined--success:hover {
1892
+ --amplify-internal-button-background-color: var(
1893
+ --amplify-components-button-outlined-success-hover-background-color
1894
+ );
1895
+ --amplify-internal-button-border-color: var(
1896
+ --amplify-components-button-outlined-success-hover-border-color
1897
+ );
1898
+ --amplify-internal-button-color: var(
1899
+ --amplify-components-button-outlined-success-hover-color
1900
+ );
1901
+ }
1902
+ .amplify-button--outlined--success:focus {
1903
+ --amplify-internal-button-background-color: var(
1904
+ --amplify-components-button-outlined-success-focus-background-color
1905
+ );
1906
+ --amplify-internal-button-border-color: var(
1907
+ --amplify-components-button-outlined-success-focus-border-color
1908
+ );
1909
+ --amplify-internal-button-color: var(
1910
+ --amplify-components-button-outlined-success-focus-color
1911
+ );
1912
+ --amplify-internal-button-focus-box-shadow: var(
1913
+ --amplify-components-button-outlined-success-focus-box-shadow
1914
+ );
1915
+ }
1916
+ .amplify-button--outlined--success:active {
1917
+ --amplify-internal-button-background-color: var(
1918
+ --amplify-components-button-outlined-success-active-background-color
1919
+ );
1920
+ --amplify-internal-button-border-color: var(
1921
+ --amplify-components-button-outlined-success-active-border-color
1922
+ );
1923
+ --amplify-internal-button-color: var(
1924
+ --amplify-components-button-outlined-success-active-color
1925
+ );
1926
+ }
1927
+ .amplify-button--outlined--overlay {
1928
+ --amplify-internal-button-background-color: var(
1929
+ --amplify-components-button-outlined-overlay-background-color
1930
+ );
1931
+ --amplify-internal-button-border-color: var(
1932
+ --amplify-components-button-outlined-overlay-border-color
1933
+ );
1934
+ --amplify-internal-button-color: var(
1935
+ --amplify-components-button-outlined-overlay-color
1936
+ );
1937
+ }
1938
+ .amplify-button--outlined--overlay:hover {
1939
+ --amplify-internal-button-background-color: var(
1940
+ --amplify-components-button-outlined-overlay-hover-background-color
1941
+ );
1942
+ --amplify-internal-button-border-color: var(
1943
+ --amplify-components-button-outlined-overlay-hover-border-color
1944
+ );
1945
+ --amplify-internal-button-color: var(
1946
+ --amplify-components-button-outlined-overlay-hover-color
1947
+ );
1948
+ }
1949
+ .amplify-button--outlined--overlay:focus {
1950
+ --amplify-internal-button-background-color: var(
1951
+ --amplify-components-button-outlined-overlay-focus-background-color
1952
+ );
1953
+ --amplify-internal-button-border-color: var(
1954
+ --amplify-components-button-outlined-overlay-focus-border-color
1955
+ );
1956
+ --amplify-internal-button-color: var(
1957
+ --amplify-components-button-outlined-overlay-focus-color
1958
+ );
1959
+ --amplify-internal-button-focus-box-shadow: var(
1960
+ --amplify-components-button-outlined-overlay-focus-box-shadow
1961
+ );
1962
+ }
1963
+ .amplify-button--outlined--overlay:active {
1964
+ --amplify-internal-button-background-color: var(
1965
+ --amplify-components-button-outlined-overlay-active-background-color
1966
+ );
1967
+ --amplify-internal-button-border-color: var(
1968
+ --amplify-components-button-outlined-overlay-active-border-color
1969
+ );
1970
+ --amplify-internal-button-color: var(
1971
+ --amplify-components-button-outlined-overlay-active-color
1972
+ );
1973
+ }
1374
1974
  .amplify-button--menu {
1375
1975
  border-width: var(--amplify-components-button-menu-border-width);
1376
1976
  background-color: var(--amplify-components-button-menu-background-color);
@@ -1393,10 +1993,18 @@ strong.amplify-text {
1393
1993
  background-color: var(--amplify-components-button-menu-active-background-color);
1394
1994
  }
1395
1995
  .amplify-button--primary {
1396
- border-width: var(--amplify-components-button-primary-border-width);
1397
- background-color: var(--amplify-components-button-primary-background-color);
1398
- border-color: var(--amplify-components-button-primary-border-color);
1399
- color: var(--amplify-components-button-primary-color);
1996
+ --amplify-internal-button-border-width: var(
1997
+ --amplify-components-button-primary-border-width
1998
+ );
1999
+ --amplify-internal-button-background-color: var(
2000
+ --amplify-components-button-primary-background-color
2001
+ );
2002
+ --amplify-internal-button-border-color: var(
2003
+ --amplify-components-button-primary-border-color
2004
+ );
2005
+ --amplify-internal-button-color: var(
2006
+ --amplify-components-button-primary-color
2007
+ );
1400
2008
  --amplify-internal-button-disabled-border-color: var(
1401
2009
  --amplify-components-button-primary-disabled-border-color
1402
2010
  );
@@ -1417,26 +2025,289 @@ strong.amplify-text {
1417
2025
  );
1418
2026
  }
1419
2027
  .amplify-button--primary:hover {
1420
- background-color: var(--amplify-components-button-primary-hover-background-color);
1421
- border-color: var(--amplify-components-button-primary-hover-border-color);
1422
- color: var(--amplify-components-button-primary-hover-color);
2028
+ --amplify-internal-button-background-color: var(
2029
+ --amplify-components-button-primary-hover-background-color
2030
+ );
2031
+ --amplify-internal-button-border-color: var(
2032
+ --amplify-components-button-primary-hover-border-color
2033
+ );
2034
+ --amplify-internal-button-color: var(
2035
+ --amplify-components-button-primary-hover-color
2036
+ );
1423
2037
  }
1424
2038
  .amplify-button--primary:focus {
1425
- background-color: var(--amplify-components-button-primary-focus-background-color);
1426
- border-color: var(--amplify-components-button-primary-focus-border-color);
1427
- color: var(--amplify-components-button-primary-focus-color);
1428
- box-shadow: var(--amplify-components-button-primary-focus-box-shadow);
2039
+ --amplify-internal-button-background-color: var(
2040
+ --amplify-components-button-primary-focus-background-color
2041
+ );
2042
+ --amplify-internal-button-border-color: var(
2043
+ --amplify-components-button-primary-focus-border-color
2044
+ );
2045
+ --amplify-internal-button-color: var(
2046
+ --amplify-components-button-primary-focus-color
2047
+ );
2048
+ --amplify-internal-button-focus-box-shadow: var(
2049
+ --amplify-components-button-primary-focus-box-shadow
2050
+ );
1429
2051
  }
1430
2052
  .amplify-button--primary:active {
1431
- background-color: var(--amplify-components-button-primary-active-background-color);
1432
- border-color: var(--amplify-components-button-primary-active-border-color);
1433
- color: var(--amplify-components-button-primary-active-color);
2053
+ --amplify-internal-button-background-color: var(
2054
+ --amplify-components-button-primary-active-background-color
2055
+ );
2056
+ --amplify-internal-button-border-color: var(
2057
+ --amplify-components-button-primary-active-border-color
2058
+ );
2059
+ --amplify-internal-button-color: var(
2060
+ --amplify-components-button-primary-active-color
2061
+ );
2062
+ }
2063
+ .amplify-button--primary--info {
2064
+ --amplify-internal-button-background-color: var(
2065
+ --amplify-components-button-primary-info-background-color
2066
+ );
2067
+ --amplify-internal-button-border-color: var(
2068
+ --amplify-components-button-primary-info-border-color
2069
+ );
2070
+ --amplify-internal-button-color: var(
2071
+ --amplify-components-button-primary-info-color
2072
+ );
2073
+ }
2074
+ .amplify-button--primary--info:hover {
2075
+ --amplify-internal-button-background-color: var(
2076
+ --amplify-components-button-primary-info-hover-background-color
2077
+ );
2078
+ --amplify-internal-button-border-color: var(
2079
+ --amplify-components-button-primary-info-hover-border-color
2080
+ );
2081
+ --amplify-internal-button-color: var(
2082
+ --amplify-components-button-primary-info-hover-color
2083
+ );
2084
+ }
2085
+ .amplify-button--primary--info:focus {
2086
+ --amplify-internal-button-background-color: var(
2087
+ --amplify-components-button-primary-info-focus-background-color
2088
+ );
2089
+ --amplify-internal-button-border-color: var(
2090
+ --amplify-components-button-primary-info-focus-border-color
2091
+ );
2092
+ --amplify-internal-button-color: var(
2093
+ --amplify-components-button-primary-info-focus-color
2094
+ );
2095
+ --amplify-internal-button-focus-box-shadow: var(
2096
+ --amplify-components-button-primary-info-focus-box-shadow
2097
+ );
2098
+ }
2099
+ .amplify-button--primary--info:active {
2100
+ --amplify-internal-button-background-color: var(
2101
+ --amplify-components-button-primary-info-active-background-color
2102
+ );
2103
+ --amplify-internal-button-border-color: var(
2104
+ --amplify-components-button-primary-info-active-border-color
2105
+ );
2106
+ --amplify-internal-button-color: var(
2107
+ --amplify-components-button-primary-info-active-color
2108
+ );
2109
+ }
2110
+ .amplify-button--primary--warning {
2111
+ --amplify-internal-button-background-color: var(
2112
+ --amplify-components-button-primary-warning-background-color
2113
+ );
2114
+ --amplify-internal-button-border-color: var(
2115
+ --amplify-components-button-primary-warning-border-color
2116
+ );
2117
+ --amplify-internal-button-color: var(
2118
+ --amplify-components-button-primary-warning-color
2119
+ );
2120
+ }
2121
+ .amplify-button--primary--warning:hover {
2122
+ --amplify-internal-button-background-color: var(
2123
+ --amplify-components-button-primary-warning-hover-background-color
2124
+ );
2125
+ --amplify-internal-button-border-color: var(
2126
+ --amplify-components-button-primary-warning-hover-border-color
2127
+ );
2128
+ --amplify-internal-button-color: var(
2129
+ --amplify-components-button-primary-warning-hover-color
2130
+ );
2131
+ }
2132
+ .amplify-button--primary--warning:focus {
2133
+ --amplify-internal-button-background-color: var(
2134
+ --amplify-components-button-primary-warning-focus-background-color
2135
+ );
2136
+ --amplify-internal-button-border-color: var(
2137
+ --amplify-components-button-primary-warning-focus-border-color
2138
+ );
2139
+ --amplify-internal-button-color: var(
2140
+ --amplify-components-button-primary-warning-focus-color
2141
+ );
2142
+ --amplify-internal-button-focus-box-shadow: var(
2143
+ --amplify-components-button-primary-warning-focus-box-shadow
2144
+ );
2145
+ }
2146
+ .amplify-button--primary--warning:active {
2147
+ --amplify-internal-button-background-color: var(
2148
+ --amplify-components-button-primary-warning-active-background-color
2149
+ );
2150
+ --amplify-internal-button-border-color: var(
2151
+ --amplify-components-button-primary-warning-active-border-color
2152
+ );
2153
+ --amplify-internal-button-color: var(
2154
+ --amplify-components-button-primary-warning-active-color
2155
+ );
2156
+ }
2157
+ .amplify-button--primary--error {
2158
+ --amplify-internal-button-background-color: var(
2159
+ --amplify-components-button-primary-error-background-color
2160
+ );
2161
+ --amplify-internal-button-border-color: var(
2162
+ --amplify-components-button-primary-error-border-color
2163
+ );
2164
+ --amplify-internal-button-color: var(
2165
+ --amplify-components-button-primary-error-color
2166
+ );
2167
+ }
2168
+ .amplify-button--primary--error:hover {
2169
+ --amplify-internal-button-background-color: var(
2170
+ --amplify-components-button-primary-error-hover-background-color
2171
+ );
2172
+ --amplify-internal-button-border-color: var(
2173
+ --amplify-components-button-primary-error-hover-border-color
2174
+ );
2175
+ --amplify-internal-button-color: var(
2176
+ --amplify-components-button-primary-error-hover-color
2177
+ );
2178
+ }
2179
+ .amplify-button--primary--error:focus {
2180
+ --amplify-internal-button-background-color: var(
2181
+ --amplify-components-button-primary-error-focus-background-color
2182
+ );
2183
+ --amplify-internal-button-border-color: var(
2184
+ --amplify-components-button-primary-error-focus-border-color
2185
+ );
2186
+ --amplify-internal-button-color: var(
2187
+ --amplify-components-button-primary-error-focus-color
2188
+ );
2189
+ --amplify-internal-button-focus-box-shadow: var(
2190
+ --amplify-components-button-primary-error-focus-box-shadow
2191
+ );
2192
+ }
2193
+ .amplify-button--primary--error:active {
2194
+ --amplify-internal-button-background-color: var(
2195
+ --amplify-components-button-primary-error-active-background-color
2196
+ );
2197
+ --amplify-internal-button-border-color: var(
2198
+ --amplify-components-button-primary-error-active-border-color
2199
+ );
2200
+ --amplify-internal-button-color: var(
2201
+ --amplify-components-button-primary-error-active-color
2202
+ );
2203
+ }
2204
+ .amplify-button--primary--success {
2205
+ --amplify-internal-button-background-color: var(
2206
+ --amplify-components-button-primary-success-background-color
2207
+ );
2208
+ --amplify-internal-button-border-color: var(
2209
+ --amplify-components-button-primary-success-border-color
2210
+ );
2211
+ --amplify-internal-button-color: var(
2212
+ --amplify-components-button-primary-success-color
2213
+ );
2214
+ }
2215
+ .amplify-button--primary--success:hover {
2216
+ --amplify-internal-button-background-color: var(
2217
+ --amplify-components-button-primary-success-hover-background-color
2218
+ );
2219
+ --amplify-internal-button-border-color: var(
2220
+ --amplify-components-button-primary-success-hover-border-color
2221
+ );
2222
+ --amplify-internal-button-color: var(
2223
+ --amplify-components-button-primary-success-hover-color
2224
+ );
2225
+ }
2226
+ .amplify-button--primary--success:focus {
2227
+ --amplify-internal-button-background-color: var(
2228
+ --amplify-components-button-primary-success-focus-background-color
2229
+ );
2230
+ --amplify-internal-button-border-color: var(
2231
+ --amplify-components-button-primary-success-focus-border-color
2232
+ );
2233
+ --amplify-internal-button-color: var(
2234
+ --amplify-components-button-primary-success-focus-color
2235
+ );
2236
+ --amplify-internal-button-focus-box-shadow: var(
2237
+ --amplify-components-button-primary-success-focus-box-shadow
2238
+ );
2239
+ }
2240
+ .amplify-button--primary--success:active {
2241
+ --amplify-internal-button-background-color: var(
2242
+ --amplify-components-button-primary-success-active-background-color
2243
+ );
2244
+ --amplify-internal-button-border-color: var(
2245
+ --amplify-components-button-primary-success-active-border-color
2246
+ );
2247
+ --amplify-internal-button-color: var(
2248
+ --amplify-components-button-primary-success-active-color
2249
+ );
2250
+ }
2251
+ .amplify-button--primary--overlay {
2252
+ --amplify-internal-button-background-color: var(
2253
+ --amplify-components-button-primary-overlay-background-color
2254
+ );
2255
+ --amplify-internal-button-border-color: var(
2256
+ --amplify-components-button-primary-overlay-border-color
2257
+ );
2258
+ --amplify-internal-button-color: var(
2259
+ --amplify-components-button-primary-overlay-color
2260
+ );
2261
+ }
2262
+ .amplify-button--primary--overlay:hover {
2263
+ --amplify-internal-button-background-color: var(
2264
+ --amplify-components-button-primary-overlay-hover-background-color
2265
+ );
2266
+ --amplify-internal-button-border-color: var(
2267
+ --amplify-components-button-primary-overlay-hover-border-color
2268
+ );
2269
+ --amplify-internal-button-color: var(
2270
+ --amplify-components-button-primary-overlay-hover-color
2271
+ );
2272
+ }
2273
+ .amplify-button--primary--overlay:focus {
2274
+ --amplify-internal-button-background-color: var(
2275
+ --amplify-components-button-primary-overlay-focus-background-color
2276
+ );
2277
+ --amplify-internal-button-border-color: var(
2278
+ --amplify-components-button-primary-overlay-focus-border-color
2279
+ );
2280
+ --amplify-internal-button-color: var(
2281
+ --amplify-components-button-primary-overlay-focus-color
2282
+ );
2283
+ --amplify-internal-button-focus-box-shadow: var(
2284
+ --amplify-components-button-primary-overlay-focus-box-shadow
2285
+ );
2286
+ }
2287
+ .amplify-button--primary--overlay:active {
2288
+ --amplify-internal-button-background-color: var(
2289
+ --amplify-components-button-primary-overlay-active-background-color
2290
+ );
2291
+ --amplify-internal-button-border-color: var(
2292
+ --amplify-components-button-primary-overlay-active-border-color
2293
+ );
2294
+ --amplify-internal-button-color: var(
2295
+ --amplify-components-button-primary-overlay-active-color
2296
+ );
1434
2297
  }
1435
2298
  .amplify-button--link {
1436
- border-width: var(--amplify-components-button-link-border-width);
1437
- background-color: var(--amplify-components-button-link-background-color);
1438
- color: var(--amplify-components-button-link-color);
1439
- --amplify-internal-button-disabled-text-decoration: none;
2299
+ --amplify-internal-button-border-width: var(
2300
+ --amplify-components-button-link-border-width
2301
+ );
2302
+ --amplify-internal-button-background-color: var(
2303
+ --amplify-components-button-link-background-color
2304
+ );
2305
+ --amplify-internal-button-border-color: var(
2306
+ --amplify-components-button-link-border-color
2307
+ );
2308
+ --amplify-internal-button-color: var(
2309
+ --amplify-components-button-link-color
2310
+ );
1440
2311
  --amplify-internal-button-disabled-border-color: var(
1441
2312
  --amplify-components-button-link-disabled-border-color
1442
2313
  );
@@ -1455,23 +2326,277 @@ strong.amplify-text {
1455
2326
  --amplify-internal-button-loading-color: var(
1456
2327
  --amplify-components-button-link-loading-color
1457
2328
  );
1458
- --amplify-internal-button-loading-text-decoration: none;
1459
2329
  }
1460
2330
  .amplify-button--link:hover {
1461
- background-color: var(--amplify-components-button-link-hover-background-color);
1462
- border-color: var(--amplify-components-button-link-hover-border-color);
1463
- color: var(--amplify-components-button-link-hover-color);
2331
+ --amplify-internal-button-background-color: var(
2332
+ --amplify-components-button-link-hover-background-color
2333
+ );
2334
+ --amplify-internal-button-border-color: var(
2335
+ --amplify-components-button-link-hover-border-color
2336
+ );
2337
+ --amplify-internal-button-color: var(
2338
+ --amplify-components-button-link-hover-color
2339
+ );
1464
2340
  }
1465
2341
  .amplify-button--link:focus {
1466
- background-color: var(--amplify-components-button-link-focus-background-color);
1467
- border-color: var(--amplify-components-button-link-focus-border-color);
1468
- color: var(--amplify-components-button-link-focus-color);
1469
- box-shadow: var(--amplify-components-button-link-focus-box-shadow);
2342
+ --amplify-internal-button-background-color: var(
2343
+ --amplify-components-button-link-focus-background-color
2344
+ );
2345
+ --amplify-internal-button-border-color: var(
2346
+ --amplify-components-button-link-focus-border-color
2347
+ );
2348
+ --amplify-internal-button-color: var(
2349
+ --amplify-components-button-link-focus-color
2350
+ );
2351
+ --amplify-internal-button-focus-box-shadow: var(
2352
+ --amplify-components-button-link-focus-box-shadow
2353
+ );
1470
2354
  }
1471
2355
  .amplify-button--link:active {
1472
- background-color: var(--amplify-components-button-link-active-background-color);
1473
- border-color: var(--amplify-components-button-link-active-border-color);
1474
- color: var(--amplify-components-button-link-active-color);
2356
+ --amplify-internal-button-background-color: var(
2357
+ --amplify-components-button-link-active-background-color
2358
+ );
2359
+ --amplify-internal-button-border-color: var(
2360
+ --amplify-components-button-link-active-border-color
2361
+ );
2362
+ --amplify-internal-button-color: var(
2363
+ --amplify-components-button-link-active-color
2364
+ );
2365
+ }
2366
+ .amplify-button--link--info {
2367
+ --amplify-internal-button-background-color: var(
2368
+ --amplify-components-button-link-info-background-color
2369
+ );
2370
+ --amplify-internal-button-border-color: var(
2371
+ --amplify-components-button-link-info-border-color
2372
+ );
2373
+ --amplify-internal-button-color: var(
2374
+ --amplify-components-button-link-info-color
2375
+ );
2376
+ }
2377
+ .amplify-button--link--info:hover {
2378
+ --amplify-internal-button-background-color: var(
2379
+ --amplify-components-button-link-info-hover-background-color
2380
+ );
2381
+ --amplify-internal-button-border-color: var(
2382
+ --amplify-components-button-link-info-hover-border-color
2383
+ );
2384
+ --amplify-internal-button-color: var(
2385
+ --amplify-components-button-link-info-hover-color
2386
+ );
2387
+ }
2388
+ .amplify-button--link--info:focus {
2389
+ --amplify-internal-button-background-color: var(
2390
+ --amplify-components-button-link-info-focus-background-color
2391
+ );
2392
+ --amplify-internal-button-border-color: var(
2393
+ --amplify-components-button-link-info-focus-border-color
2394
+ );
2395
+ --amplify-internal-button-color: var(
2396
+ --amplify-components-button-link-info-focus-color
2397
+ );
2398
+ --amplify-internal-button-focus-box-shadow: var(
2399
+ --amplify-components-button-link-info-focus-box-shadow
2400
+ );
2401
+ }
2402
+ .amplify-button--link--info:active {
2403
+ --amplify-internal-button-background-color: var(
2404
+ --amplify-components-button-link-info-active-background-color
2405
+ );
2406
+ --amplify-internal-button-border-color: var(
2407
+ --amplify-components-button-link-info-active-border-color
2408
+ );
2409
+ --amplify-internal-button-color: var(
2410
+ --amplify-components-button-link-info-active-color
2411
+ );
2412
+ }
2413
+ .amplify-button--link--warning {
2414
+ --amplify-internal-button-background-color: var(
2415
+ --amplify-components-button-link-warning-background-color
2416
+ );
2417
+ --amplify-internal-button-border-color: var(
2418
+ --amplify-components-button-link-warning-border-color
2419
+ );
2420
+ --amplify-internal-button-color: var(
2421
+ --amplify-components-button-link-warning-color
2422
+ );
2423
+ }
2424
+ .amplify-button--link--warning:hover {
2425
+ --amplify-internal-button-background-color: var(
2426
+ --amplify-components-button-link-warning-hover-background-color
2427
+ );
2428
+ --amplify-internal-button-border-color: var(
2429
+ --amplify-components-button-link-warning-hover-border-color
2430
+ );
2431
+ --amplify-internal-button-color: var(
2432
+ --amplify-components-button-link-warning-hover-color
2433
+ );
2434
+ }
2435
+ .amplify-button--link--warning:focus {
2436
+ --amplify-internal-button-background-color: var(
2437
+ --amplify-components-button-link-warning-focus-background-color
2438
+ );
2439
+ --amplify-internal-button-border-color: var(
2440
+ --amplify-components-button-link-warning-focus-border-color
2441
+ );
2442
+ --amplify-internal-button-color: var(
2443
+ --amplify-components-button-link-warning-focus-color
2444
+ );
2445
+ --amplify-internal-button-focus-box-shadow: var(
2446
+ --amplify-components-button-link-warning-focus-box-shadow
2447
+ );
2448
+ }
2449
+ .amplify-button--link--warning:active {
2450
+ --amplify-internal-button-background-color: var(
2451
+ --amplify-components-button-link-warning-active-background-color
2452
+ );
2453
+ --amplify-internal-button-border-color: var(
2454
+ --amplify-components-button-link-warning-active-border-color
2455
+ );
2456
+ --amplify-internal-button-color: var(
2457
+ --amplify-components-button-link-warning-active-color
2458
+ );
2459
+ }
2460
+ .amplify-button--link--error {
2461
+ --amplify-internal-button-background-color: var(
2462
+ --amplify-components-button-link-error-background-color
2463
+ );
2464
+ --amplify-internal-button-border-color: var(
2465
+ --amplify-components-button-link-error-border-color
2466
+ );
2467
+ --amplify-internal-button-color: var(
2468
+ --amplify-components-button-link-error-color
2469
+ );
2470
+ }
2471
+ .amplify-button--link--error:hover {
2472
+ --amplify-internal-button-background-color: var(
2473
+ --amplify-components-button-link-error-hover-background-color
2474
+ );
2475
+ --amplify-internal-button-border-color: var(
2476
+ --amplify-components-button-link-error-hover-border-color
2477
+ );
2478
+ --amplify-internal-button-color: var(
2479
+ --amplify-components-button-link-error-hover-color
2480
+ );
2481
+ }
2482
+ .amplify-button--link--error:focus {
2483
+ --amplify-internal-button-background-color: var(
2484
+ --amplify-components-button-link-error-focus-background-color
2485
+ );
2486
+ --amplify-internal-button-border-color: var(
2487
+ --amplify-components-button-link-error-focus-border-color
2488
+ );
2489
+ --amplify-internal-button-color: var(
2490
+ --amplify-components-button-link-error-focus-color
2491
+ );
2492
+ --amplify-internal-button-focus-box-shadow: var(
2493
+ --amplify-components-button-link-error-focus-box-shadow
2494
+ );
2495
+ }
2496
+ .amplify-button--link--error:active {
2497
+ --amplify-internal-button-background-color: var(
2498
+ --amplify-components-button-link-error-active-background-color
2499
+ );
2500
+ --amplify-internal-button-border-color: var(
2501
+ --amplify-components-button-link-error-active-border-color
2502
+ );
2503
+ --amplify-internal-button-color: var(
2504
+ --amplify-components-button-link-error-active-color
2505
+ );
2506
+ }
2507
+ .amplify-button--link--success {
2508
+ --amplify-internal-button-background-color: var(
2509
+ --amplify-components-button-link-success-background-color
2510
+ );
2511
+ --amplify-internal-button-border-color: var(
2512
+ --amplify-components-button-link-success-border-color
2513
+ );
2514
+ --amplify-internal-button-color: var(
2515
+ --amplify-components-button-link-success-color
2516
+ );
2517
+ }
2518
+ .amplify-button--link--success:hover {
2519
+ --amplify-internal-button-background-color: var(
2520
+ --amplify-components-button-link-success-hover-background-color
2521
+ );
2522
+ --amplify-internal-button-border-color: var(
2523
+ --amplify-components-button-link-success-hover-border-color
2524
+ );
2525
+ --amplify-internal-button-color: var(
2526
+ --amplify-components-button-link-success-hover-color
2527
+ );
2528
+ }
2529
+ .amplify-button--link--success:focus {
2530
+ --amplify-internal-button-background-color: var(
2531
+ --amplify-components-button-link-success-focus-background-color
2532
+ );
2533
+ --amplify-internal-button-border-color: var(
2534
+ --amplify-components-button-link-success-focus-border-color
2535
+ );
2536
+ --amplify-internal-button-color: var(
2537
+ --amplify-components-button-link-success-focus-color
2538
+ );
2539
+ --amplify-internal-button-focus-box-shadow: var(
2540
+ --amplify-components-button-link-success-focus-box-shadow
2541
+ );
2542
+ }
2543
+ .amplify-button--link--success:active {
2544
+ --amplify-internal-button-background-color: var(
2545
+ --amplify-components-button-link-success-active-background-color
2546
+ );
2547
+ --amplify-internal-button-border-color: var(
2548
+ --amplify-components-button-link-success-active-border-color
2549
+ );
2550
+ --amplify-internal-button-color: var(
2551
+ --amplify-components-button-link-success-active-color
2552
+ );
2553
+ }
2554
+ .amplify-button--link--overlay {
2555
+ --amplify-internal-button-background-color: var(
2556
+ --amplify-components-button-link-overlay-background-color
2557
+ );
2558
+ --amplify-internal-button-border-color: var(
2559
+ --amplify-components-button-link-overlay-border-color
2560
+ );
2561
+ --amplify-internal-button-color: var(
2562
+ --amplify-components-button-link-overlay-color
2563
+ );
2564
+ }
2565
+ .amplify-button--link--overlay:hover {
2566
+ --amplify-internal-button-background-color: var(
2567
+ --amplify-components-button-link-overlay-hover-background-color
2568
+ );
2569
+ --amplify-internal-button-border-color: var(
2570
+ --amplify-components-button-link-overlay-hover-border-color
2571
+ );
2572
+ --amplify-internal-button-color: var(
2573
+ --amplify-components-button-link-overlay-hover-color
2574
+ );
2575
+ }
2576
+ .amplify-button--link--overlay:focus {
2577
+ --amplify-internal-button-background-color: var(
2578
+ --amplify-components-button-link-overlay-focus-background-color
2579
+ );
2580
+ --amplify-internal-button-border-color: var(
2581
+ --amplify-components-button-link-overlay-focus-border-color
2582
+ );
2583
+ --amplify-internal-button-color: var(
2584
+ --amplify-components-button-link-overlay-focus-color
2585
+ );
2586
+ --amplify-internal-button-focus-box-shadow: var(
2587
+ --amplify-components-button-link-overlay-focus-box-shadow
2588
+ );
2589
+ }
2590
+ .amplify-button--link--overlay:active {
2591
+ --amplify-internal-button-background-color: var(
2592
+ --amplify-components-button-link-overlay-active-background-color
2593
+ );
2594
+ --amplify-internal-button-border-color: var(
2595
+ --amplify-components-button-link-overlay-active-border-color
2596
+ );
2597
+ --amplify-internal-button-color: var(
2598
+ --amplify-components-button-link-overlay-active-color
2599
+ );
1475
2600
  }
1476
2601
  .amplify-button--destructive {
1477
2602
  border-width: var(--amplify-components-button-destructive-border-width);
@@ -1557,25 +2682,17 @@ strong.amplify-text {
1557
2682
  }
1558
2683
  .amplify-button--small {
1559
2684
  font-size: var(--amplify-components-button-small-font-size);
1560
- -webkit-padding-before: var(--amplify-components-button-small-padding-block-start);
1561
- padding-block-start: var(--amplify-components-button-small-padding-block-start);
1562
- -webkit-padding-after: var(--amplify-components-button-small-padding-block-end);
1563
- padding-block-end: var(--amplify-components-button-small-padding-block-end);
1564
- -webkit-padding-start: var(--amplify-components-button-small-padding-inline-start);
1565
- padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
1566
- -webkit-padding-end: var(--amplify-components-button-small-padding-inline-end);
1567
- padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
2685
+ padding-block-start: var(--amplify-components-button-small-padding-block-start);
2686
+ padding-block-end: var(--amplify-components-button-small-padding-block-end);
2687
+ padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
2688
+ padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
1568
2689
  }
1569
2690
  .amplify-button--large {
1570
2691
  font-size: var(--amplify-components-button-large-font-size);
1571
- -webkit-padding-before: var(--amplify-components-button-large-padding-block-start);
1572
- padding-block-start: var(--amplify-components-button-large-padding-block-start);
1573
- -webkit-padding-after: var(--amplify-components-button-large-padding-block-end);
1574
- padding-block-end: var(--amplify-components-button-large-padding-block-end);
1575
- -webkit-padding-start: var(--amplify-components-button-large-padding-inline-start);
1576
- padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
1577
- -webkit-padding-end: var(--amplify-components-button-large-padding-inline-end);
1578
- padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
2692
+ padding-block-start: var(--amplify-components-button-large-padding-block-start);
2693
+ padding-block-end: var(--amplify-components-button-large-padding-block-end);
2694
+ padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
2695
+ padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
1579
2696
  }
1580
2697
  .amplify-button--disabled {
1581
2698
  background-color: var(--amplify-internal-button-disabled-background-color);
@@ -1644,6 +2761,52 @@ strong.amplify-text {
1644
2761
  transition: none;
1645
2762
  }
1646
2763
  }
2764
+ .amplify-dropzone {
2765
+ display: block;
2766
+ background-color: var(--amplify-components-dropzone-background-color);
2767
+ border-color: var(--amplify-components-dropzone-border-color);
2768
+ border-width: var(--amplify-components-dropzone-border-width);
2769
+ border-style: var(--amplify-components-dropzone-border-style);
2770
+ border-radius: var(--amplify-components-dropzone-border-radius);
2771
+ color: var(--amplify-components-dropzone-color);
2772
+ padding-block: var(--amplify-components-dropzone-padding-block);
2773
+ padding-inline: var(--amplify-components-dropzone-padding-inline);
2774
+ text-align: var(--amplify-components-dropzone-text-align);
2775
+ }
2776
+ .amplify-dropzone--disabled {
2777
+ cursor: not-allowed;
2778
+ background-color: var(--amplify-components-dropzone-disabled-background-color);
2779
+ border-color: var(--amplify-components-dropzone-disabled-border-color);
2780
+ border-width: var(--amplify-components-dropzone-disabled-border-width);
2781
+ border-style: var(--amplify-components-dropzone-disabled-border-style);
2782
+ border-radius: var(--amplify-components-dropzone-disabled-border-radius);
2783
+ color: var(--amplify-components-dropzone-disabled-color);
2784
+ }
2785
+ .amplify-dropzone--active {
2786
+ background-color: var(--amplify-components-dropzone-active-background-color);
2787
+ border-color: var(--amplify-components-dropzone-active-border-color);
2788
+ border-width: var(--amplify-components-dropzone-active-border-width);
2789
+ border-style: var(--amplify-components-dropzone-active-border-style);
2790
+ border-radius: var(--amplify-components-dropzone-active-border-radius);
2791
+ color: var(--amplify-components-dropzone-active-color);
2792
+ }
2793
+ .amplify-dropzone--rejected {
2794
+ background-color: var(--amplify-components-dropzone-rejected-background-color);
2795
+ border-color: var(--amplify-components-dropzone-rejected-border-color);
2796
+ border-width: var(--amplify-components-dropzone-rejected-border-width);
2797
+ border-style: var(--amplify-components-dropzone-rejected-border-style);
2798
+ border-radius: var(--amplify-components-dropzone-rejected-border-radius);
2799
+ color: var(--amplify-components-dropzone-rejected-color);
2800
+ }
2801
+ .amplify-dropzone--accepted {
2802
+ background-color: var(--amplify-components-dropzone-accepted-background-color);
2803
+ border-color: var(--amplify-components-dropzone-accepted-border-color);
2804
+ border-width: var(--amplify-components-dropzone-accepted-border-width);
2805
+ border-style: var(--amplify-components-dropzone-accepted-border-style);
2806
+ border-radius: var(--amplify-components-dropzone-accepted-border-radius);
2807
+ color: var(--amplify-components-dropzone-accepted-color);
2808
+ }
2809
+
1647
2810
  .amplify-field__description {
1648
2811
  color: var(--amplify-components-fieldmessages-description-color);
1649
2812
  font-style: var(--amplify-components-fieldmessages-description-font-style);
@@ -1720,14 +2883,10 @@ strong.amplify-text {
1720
2883
  color: var(--amplify-components-fieldcontrol-color);
1721
2884
  font-size: var(--amplify-components-fieldcontrol-font-size);
1722
2885
  line-height: var(--amplify-components-fieldcontrol-line-height);
1723
- -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
1724
- padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
1725
- -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
1726
- padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
1727
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1728
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1729
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
1730
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
2886
+ padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
2887
+ padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
2888
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2889
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
1731
2890
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
1732
2891
  width: 100%;
1733
2892
  border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -1742,6 +2901,18 @@ strong.amplify-text {
1742
2901
  -moz-user-select: text;
1743
2902
  user-select: text;
1744
2903
  display: inline-block;
2904
+ --amplify-components-fieldcontrol-color: var(
2905
+ --amplify-components-input-color
2906
+ );
2907
+ --amplify-components-fieldcontrol-border-color: var(
2908
+ --amplify-components-input-border-color
2909
+ );
2910
+ --amplify-components-fieldcontrol-font-size: var(
2911
+ --amplify-components-input-font-size
2912
+ );
2913
+ --amplify-components-fieldcontrol-focus-border-color: var(
2914
+ --amplify-components-input-focus-border-color
2915
+ );
1745
2916
  }
1746
2917
  .amplify-input:focus {
1747
2918
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -1749,25 +2920,17 @@ strong.amplify-text {
1749
2920
  }
1750
2921
  .amplify-input--small {
1751
2922
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
1752
- -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
1753
- padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
1754
- -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
1755
- padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
1756
- -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1757
- padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1758
- -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1759
- padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
2923
+ padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
2924
+ padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
2925
+ padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
2926
+ padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1760
2927
  }
1761
2928
  .amplify-input--large {
1762
2929
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
1763
- -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
1764
- padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
1765
- -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
1766
- padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
1767
- -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1768
- padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1769
- -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1770
- padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
2930
+ padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
2931
+ padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
2932
+ padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
2933
+ padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1771
2934
  }
1772
2935
  .amplify-input--error {
1773
2936
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -1783,12 +2946,9 @@ strong.amplify-text {
1783
2946
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
1784
2947
  }
1785
2948
  .amplify-input--quiet {
1786
- -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1787
- border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1788
- -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
1789
- border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
1790
- -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
1791
- border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
2949
+ border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
2950
+ border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
2951
+ border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
1792
2952
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
1793
2953
  }
1794
2954
  .amplify-input--quiet:focus {
@@ -1807,14 +2967,10 @@ strong.amplify-text {
1807
2967
  color: var(--amplify-components-fieldcontrol-color);
1808
2968
  font-size: var(--amplify-components-fieldcontrol-font-size);
1809
2969
  line-height: var(--amplify-components-fieldcontrol-line-height);
1810
- -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
1811
- padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
1812
- -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
1813
- padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
1814
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1815
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1816
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
1817
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
2970
+ padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
2971
+ padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
2972
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2973
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
1818
2974
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
1819
2975
  width: 100%;
1820
2976
  border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -1836,25 +2992,17 @@ strong.amplify-text {
1836
2992
  }
1837
2993
  .amplify-textarea--small {
1838
2994
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
1839
- -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
1840
- padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
1841
- -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
1842
- padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
1843
- -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1844
- padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1845
- -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1846
- padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
2995
+ padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
2996
+ padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
2997
+ padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
2998
+ padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1847
2999
  }
1848
3000
  .amplify-textarea--large {
1849
3001
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
1850
- -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
1851
- padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
1852
- -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
1853
- padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
1854
- -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1855
- padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1856
- -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1857
- padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
3002
+ padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
3003
+ padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
3004
+ padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
3005
+ padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1858
3006
  }
1859
3007
  .amplify-textarea--error {
1860
3008
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -1870,12 +3018,9 @@ strong.amplify-text {
1870
3018
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
1871
3019
  }
1872
3020
  .amplify-textarea--quiet {
1873
- -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1874
- border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1875
- -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
1876
- border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
1877
- -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
1878
- border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
3021
+ border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
3022
+ border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
3023
+ border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
1879
3024
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
1880
3025
  }
1881
3026
  .amplify-textarea--quiet:focus {
@@ -2120,6 +3265,7 @@ strong.amplify-text {
2120
3265
 
2121
3266
  .amplify-alert__icon {
2122
3267
  font-size: var(--amplify-components-alert-icon-size);
3268
+ line-height: 1;
2123
3269
  }
2124
3270
 
2125
3271
  .amplify-alert__heading {
@@ -2151,8 +3297,7 @@ strong.amplify-text {
2151
3297
  position: absolute;
2152
3298
  z-index: 999999;
2153
3299
  width: var(--amplify-components-autocomplete-menu-width);
2154
- -webkit-margin-before: var(--amplify-components-autocomplete-menu-margin-block-start);
2155
- margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
3300
+ margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
2156
3301
  background-color: var(--amplify-components-autocomplete-menu-background-color);
2157
3302
  border-color: var(--amplify-components-autocomplete-menu-border-color);
2158
3303
  border-width: var(--amplify-components-autocomplete-menu-border-width);
@@ -2250,6 +3395,47 @@ strong.amplify-text {
2250
3395
  align-self: center;
2251
3396
  }
2252
3397
 
3398
+ .amplify-breadcrumbs__list {
3399
+ display: flex;
3400
+ flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
3401
+ flex-direction: var(--amplify-components-breadcrumbs-flex-direction);
3402
+ gap: var(--amplify-components-breadcrumbs-gap);
3403
+ color: var(--amplify-components-breadcrumbs-color);
3404
+ }
3405
+
3406
+ .amplify-breadcrumbs__item {
3407
+ display: inline-flex;
3408
+ flex-direction: var(--amplify-components-breadcrumbs-item-flex-direction);
3409
+ align-items: var(--amplify-components-breadcrumbs-item-align-items);
3410
+ line-height: var(--amplify-components-breadcrumbs-item-line-height);
3411
+ color: var(--amplify-components-breadcrumbs-item-color);
3412
+ font-size: var(--amplify-components-breadcrumbs-item-font-size);
3413
+ }
3414
+
3415
+ .amplify-breadcrumbs__separator {
3416
+ color: var(--amplify-components-breadcrumbs-separator-color);
3417
+ font-size: var(--amplify-components-breadcrumbs-separator-font-size);
3418
+ padding-inline: var(--amplify-components-breadcrumbs-separator-padding-inline);
3419
+ }
3420
+
3421
+ .amplify-breadcrumbs__link {
3422
+ color: var(--amplify-components-breadcrumbs-link-color);
3423
+ font-size: var(--amplify-components-breadcrumbs-link-font-size);
3424
+ font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
3425
+ padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
3426
+ padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
3427
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3428
+ text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3429
+ }
3430
+
3431
+ .amplify-breadcrumbs__link--current {
3432
+ color: var(--amplify-components-breadcrumbs-link-current-color);
3433
+ font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
3434
+ font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
3435
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3436
+ text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3437
+ }
3438
+
2253
3439
  .amplify-card {
2254
3440
  background-color: var(--amplify-components-card-background-color);
2255
3441
  border-radius: var(--amplify-components-card-border-radius);
@@ -2407,6 +3593,9 @@ strong.amplify-text {
2407
3593
  }
2408
3594
 
2409
3595
  .amplify-checkbox__icon {
3596
+ line-height: 1;
3597
+ width: 1em;
3598
+ height: 1em;
2410
3599
  background-color: var(--amplify-components-checkbox-icon-background-color);
2411
3600
  opacity: var(--amplify-components-checkbox-icon-opacity);
2412
3601
  transform: var(--amplify-components-checkbox-icon-transform);
@@ -2551,10 +3740,8 @@ strong.amplify-text {
2551
3740
  flex: 1;
2552
3741
  display: flex;
2553
3742
  min-height: var(--amplify-components-expander-trigger-min-height);
2554
- -webkit-padding-start: var(--amplify-components-expander-trigger-padding-inline-start);
2555
- padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
2556
- -webkit-padding-end: var(--amplify-components-expander-trigger-padding-inline-end);
2557
- padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
3743
+ padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
3744
+ padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
2558
3745
  align-items: var(--amplify-components-expander-trigger-align-items);
2559
3746
  justify-content: var(--amplify-components-expander-trigger-justify-content);
2560
3747
  }
@@ -2564,10 +3751,8 @@ strong.amplify-text {
2564
3751
 
2565
3752
  .amplify-expander__content {
2566
3753
  display: block;
2567
- -webkit-padding-start: var(--amplify-components-expander-content-padding-inline-start);
2568
- padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
2569
- -webkit-padding-end: var(--amplify-components-expander-content-padding-inline-end);
2570
- padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
3754
+ padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
3755
+ padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
2571
3756
  }
2572
3757
  .amplify-expander__content[data-state=open] {
2573
3758
  animation-name: amplify-expander-slide-down;
@@ -2583,10 +3768,8 @@ strong.amplify-text {
2583
3768
  .amplify-expander__content__text {
2584
3769
  display: block;
2585
3770
  color: var(--amplify-components-expander-content-text-color);
2586
- -webkit-padding-before: var(--amplify-components-expander-content-text-padding-block-start);
2587
- padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
2588
- -webkit-padding-after: var(--amplify-components-expander-content-text-padding-block-end);
2589
- padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
3771
+ padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
3772
+ padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
2590
3773
  }
2591
3774
 
2592
3775
  .amplify-expander__icon {
@@ -2668,6 +3851,7 @@ strong.amplify-text {
2668
3851
  .amplify-field-group__outer-start,
2669
3852
  .amplify-field-group__outer-end {
2670
3853
  display: flex;
3854
+ flex-shrink: 0;
2671
3855
  align-items: var(--amplify-components-fieldgroup-outer-align-items);
2672
3856
  }
2673
3857
  .amplify-field-group__outer-start .amplify-field-group__control,
@@ -2743,13 +3927,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
2743
3927
  }
2744
3928
 
2745
3929
  .amplify-field-group--has-inner-end .amplify-input {
2746
- -webkit-padding-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
2747
- padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
3930
+ padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
2748
3931
  }
2749
3932
 
2750
3933
  .amplify-field-group--has-inner-start .amplify-input {
2751
- -webkit-padding-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
2752
- padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
3934
+ padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
2753
3935
  }
2754
3936
 
2755
3937
  /**
@@ -2757,15 +3939,51 @@ html[dir=rtl] .amplify-field-group__inner-start {
2757
3939
  */
2758
3940
  .amplify-field-group__icon:not(.amplify-field-group__icon-button) {
2759
3941
  display: flex;
2760
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2761
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2762
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-start);
2763
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
3942
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
3943
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
2764
3944
  flex-direction: column;
2765
3945
  justify-content: center;
2766
3946
  height: 100%;
2767
3947
  }
2768
3948
 
3949
+ .amplify-fieldset {
3950
+ background-color: var(--amplify-components-fieldset-background-color);
3951
+ border-radius: var(--amplify-components-fieldset-border-radius);
3952
+ flex-direction: var(--amplify-components-fieldset-flex-direction);
3953
+ gap: var(--amplify-components-fieldset-gap);
3954
+ /* Sizes */
3955
+ /* Variations */
3956
+ }
3957
+ .amplify-fieldset--small {
3958
+ gap: var(--amplify-components-fieldset-small-gap);
3959
+ }
3960
+ .amplify-fieldset--large {
3961
+ gap: var(--amplify-components-fieldset-large-gap);
3962
+ }
3963
+ .amplify-fieldset--outlined {
3964
+ border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color);
3965
+ padding: var(--amplify-components-fieldset-outlined-padding);
3966
+ }
3967
+ .amplify-fieldset--outlined.amplify-fieldset--small {
3968
+ padding: var(--amplify-components-fieldset-outlined-small-padding);
3969
+ }
3970
+ .amplify-fieldset--outlined.amplify-fieldset--large {
3971
+ padding: var(--amplify-components-fieldset-outlined-large-padding);
3972
+ }
3973
+
3974
+ .amplify-fieldset__legend {
3975
+ color: var(--amplify-components-fieldset-legend-color);
3976
+ font-weight: var(--amplify-components-fieldset-legend-font-weight);
3977
+ line-height: var(--amplify-components-fieldset-legend-line-height);
3978
+ font-size: var(--amplify-components-fieldset-legend-font-size);
3979
+ }
3980
+ .amplify-fieldset__legend--small {
3981
+ font-size: var(--amplify-components-fieldset-legend-small-font-size);
3982
+ }
3983
+ .amplify-fieldset__legend--large {
3984
+ font-size: var(--amplify-components-fieldset-legend-large-font-size);
3985
+ }
3986
+
2769
3987
  .amplify-liveness-cancel-container {
2770
3988
  z-index: 2;
2771
3989
  position: absolute;
@@ -3313,10 +4531,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
3313
4531
 
3314
4532
  .amplify-menu-content__item {
3315
4533
  min-height: var(--amplify-components-menu-item-min-height);
3316
- -webkit-padding-start: var(--amplify-components-menu-item-padding-inline-start);
3317
- padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
3318
- -webkit-padding-end: var(--amplify-components-menu-item-padding-inline-end);
3319
- padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
4534
+ padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
4535
+ padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
3320
4536
  }
3321
4537
 
3322
4538
  .amplify-menu-content__item:not(:first-child):not(:last-child) {
@@ -3345,6 +4561,118 @@ html[dir=rtl] .amplify-field-group__inner-start {
3345
4561
  }
3346
4562
  }
3347
4563
 
4564
+ .amplify-message {
4565
+ align-items: var(--amplify-components-message-align-items);
4566
+ background-color: var(--amplify-components-message-background-color);
4567
+ color: var(--amplify-components-message-color);
4568
+ justify-content: var(--amplify-components-message-justify-content);
4569
+ padding-block: var(--amplify-components-message-padding-block);
4570
+ padding-inline: var(--amplify-components-message-padding-inline);
4571
+ border-color: var(--amplify-components-message-border-color);
4572
+ border-radius: var(--amplify-components-message-border-radius);
4573
+ border-style: var(--amplify-components-message-border-style);
4574
+ border-width: var(--amplify-components-message-border-width);
4575
+ line-height: var(--amplify-components-message-line-height);
4576
+ }
4577
+ .amplify-message--plain {
4578
+ background-color: var(--amplify-components-message-plain-background-color);
4579
+ border-color: var(--amplify-components-message-plain-border-color);
4580
+ color: var(--amplify-components-message-plain-color);
4581
+ }
4582
+ .amplify-message--plain.amplify-message--info {
4583
+ background-color: var(--amplify-components-message-plain-info-background-color);
4584
+ border-color: var(--amplify-components-message-plain-info-border-color);
4585
+ color: var(--amplify-components-message-plain-info-color);
4586
+ }
4587
+ .amplify-message--plain.amplify-message--error {
4588
+ background-color: var(--amplify-components-message-plain-error-background-color);
4589
+ border-color: var(--amplify-components-message-plain-error-border-color);
4590
+ color: var(--amplify-components-message-plain-error-color);
4591
+ }
4592
+ .amplify-message--plain.amplify-message--warning {
4593
+ background-color: var(--amplify-components-message-plain-warning-background-color);
4594
+ border-color: var(--amplify-components-message-plain-warning-border-color);
4595
+ color: var(--amplify-components-message-plain-warning-color);
4596
+ }
4597
+ .amplify-message--plain.amplify-message--success {
4598
+ background-color: var(--amplify-components-message-plain-success-background-color);
4599
+ border-color: var(--amplify-components-message-plain-success-border-color);
4600
+ color: var(--amplify-components-message-plain-success-color);
4601
+ }
4602
+ .amplify-message--outlined {
4603
+ background-color: var(--amplify-components-message-outlined-background-color);
4604
+ border-color: var(--amplify-components-message-outlined-border-color);
4605
+ color: var(--amplify-components-message-outlined-color);
4606
+ }
4607
+ .amplify-message--outlined.amplify-message--info {
4608
+ background-color: var(--amplify-components-message-outlined-info-background-color);
4609
+ border-color: var(--amplify-components-message-outlined-info-border-color);
4610
+ color: var(--amplify-components-message-outlined-info-color);
4611
+ }
4612
+ .amplify-message--outlined.amplify-message--error {
4613
+ background-color: var(--amplify-components-message-outlined-error-background-color);
4614
+ border-color: var(--amplify-components-message-outlined-error-border-color);
4615
+ color: var(--amplify-components-message-outlined-error-color);
4616
+ }
4617
+ .amplify-message--outlined.amplify-message--warning {
4618
+ background-color: var(--amplify-components-message-outlined-warning-background-color);
4619
+ border-color: var(--amplify-components-message-outlined-warning-border-color);
4620
+ color: var(--amplify-components-message-outlined-warning-color);
4621
+ }
4622
+ .amplify-message--outlined.amplify-message--success {
4623
+ background-color: var(--amplify-components-message-outlined-success-background-color);
4624
+ border-color: var(--amplify-components-message-outlined-success-border-color);
4625
+ color: var(--amplify-components-message-outlined-success-color);
4626
+ }
4627
+ .amplify-message--filled {
4628
+ background-color: var(--amplify-components-message-filled-background-color);
4629
+ border-color: var(--amplify-components-message-filled-border-color);
4630
+ color: var(--amplify-components-message-filled-color);
4631
+ }
4632
+ .amplify-message--filled.amplify-message--info {
4633
+ background-color: var(--amplify-components-message-filled-info-background-color);
4634
+ border-color: var(--amplify-components-message-filled-info-border-color);
4635
+ color: var(--amplify-components-message-filled-info-color);
4636
+ }
4637
+ .amplify-message--filled.amplify-message--error {
4638
+ background-color: var(--amplify-components-message-filled-error-background-color);
4639
+ border-color: var(--amplify-components-message-filled-error-border-color);
4640
+ color: var(--amplify-components-message-filled-error-color);
4641
+ }
4642
+ .amplify-message--filled.amplify-message--warning {
4643
+ background-color: var(--amplify-components-message-filled-warning-background-color);
4644
+ border-color: var(--amplify-components-message-filled-warning-border-color);
4645
+ color: var(--amplify-components-message-filled-warning-color);
4646
+ }
4647
+ .amplify-message--filled.amplify-message--success {
4648
+ background-color: var(--amplify-components-message-filled-success-background-color);
4649
+ border-color: var(--amplify-components-message-filled-success-border-color);
4650
+ color: var(--amplify-components-message-filled-success-color);
4651
+ }
4652
+
4653
+ .amplify-message__icon {
4654
+ font-size: var(--amplify-components-message-icon-size);
4655
+ }
4656
+ .amplify-message__icon > * {
4657
+ display: block;
4658
+ }
4659
+
4660
+ .amplify-message__heading {
4661
+ font-weight: var(--amplify-components-message-heading-font-weight);
4662
+ font-size: var(--amplify-components-message-heading-font-size);
4663
+ }
4664
+
4665
+ .amplify-message__content {
4666
+ flex: 1;
4667
+ flex-direction: column;
4668
+ gap: var(--amplify-space-xxxs);
4669
+ }
4670
+
4671
+ .amplify-message__dismiss {
4672
+ margin-inline-start: auto;
4673
+ gap: var(--amplify-components-message-dismiss-gap);
4674
+ }
4675
+
3348
4676
  .amplify-pagination__item-current, .amplify-pagination__item-button {
3349
4677
  height: var(--amplify-components-pagination-item-shared-height);
3350
4678
  min-width: var(--amplify-components-pagination-item-shared-min-width);
@@ -3364,10 +4692,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
3364
4692
  justify-content: center;
3365
4693
  font-weight: initial;
3366
4694
  color: var(--amplify-components-pagination-button-color);
3367
- -webkit-padding-start: var(--amplify-components-pagination-button-padding-inline-start);
3368
- padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
3369
- -webkit-padding-end: var(--amplify-components-pagination-button-padding-inline-end);
3370
- padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
4695
+ padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
4696
+ padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
3371
4697
  transition-property: var(--amplify-components-pagination-button-transition-property);
3372
4698
  transition-duration: var(--amplify-components-pagination-button-transition-duration);
3373
4699
  }
@@ -3390,10 +4716,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
3390
4716
  .amplify-pagination__item-ellipsis {
3391
4717
  align-items: var(--amplify-components-pagination-ellipsis-align-items);
3392
4718
  justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
3393
- -webkit-padding-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
3394
- padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
3395
- -webkit-padding-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
3396
- padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
4719
+ padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
4720
+ padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
3397
4721
  }
3398
4722
 
3399
4723
  .amplify-passwordfield {
@@ -3522,6 +4846,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3522
4846
  .amplify-rating-icon {
3523
4847
  width: 1em;
3524
4848
  height: 1em;
4849
+ display: block;
3525
4850
  }
3526
4851
 
3527
4852
  .amplify-rating-icon-filled {
@@ -3656,11 +4981,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3656
4981
  border-color: var(--amplify-components-button-active-border-color);
3657
4982
  color: var(--amplify-components-button-active-color);
3658
4983
  }
3659
- .amplify-searchfield__search:disabled {
3660
- background-color: var(--amplify-components-searchfield-button-disabled-background-color);
3661
- border-color: var(--amplify-components-searchfield-button-disabled-border-color);
3662
- color: var(--amplify-components-searchfield-button-disabled-color);
3663
- }
3664
4984
  .amplify-searchfield__search:focus {
3665
4985
  background-color: var(--amplify-components-searchfield-button-focus-background-color);
3666
4986
  border-color: var(--amplify-components-searchfield-button-focus-border-color);
@@ -3671,6 +4991,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
3671
4991
  border-color: var(--amplify-components-searchfield-button-hover-border-color);
3672
4992
  color: var(--amplify-components-searchfield-button-hover-color);
3673
4993
  }
4994
+ .amplify-searchfield__search:disabled {
4995
+ background-color: var(--amplify-components-searchfield-button-disabled-background-color);
4996
+ border-color: var(--amplify-components-searchfield-button-disabled-border-color);
4997
+ color: var(--amplify-components-searchfield-button-disabled-color);
4998
+ }
3674
4999
 
3675
5000
  .amplify-select__wrapper {
3676
5001
  flex: var(--amplify-components-select-wrapper-flex);
@@ -3689,20 +5014,22 @@ html[dir=rtl] .amplify-field-group__inner-start {
3689
5014
  transform: var(--amplify-components-select-icon-wrapper-transform);
3690
5015
  pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
3691
5016
  }
5017
+ .amplify-select__icon-wrapper--small {
5018
+ right: var(--amplify-components-select-icon-wrapper-small-right);
5019
+ }
5020
+ .amplify-select__icon-wrapper--large {
5021
+ right: var(--amplify-components-select-icon-wrapper-large-right);
5022
+ }
3692
5023
 
3693
5024
  .amplify-select {
3694
5025
  box-sizing: border-box;
3695
5026
  color: var(--amplify-components-fieldcontrol-color);
3696
5027
  font-size: var(--amplify-components-fieldcontrol-font-size);
3697
5028
  line-height: var(--amplify-components-fieldcontrol-line-height);
3698
- -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
3699
- padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
3700
- -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
3701
- padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
3702
- -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
3703
- padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
3704
- -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
3705
- padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
5029
+ padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
5030
+ padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
5031
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
5032
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
3706
5033
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
3707
5034
  width: 100%;
3708
5035
  border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -3714,8 +5041,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3714
5041
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
3715
5042
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
3716
5043
  min-width: var(--amplify-components-select-min-width);
3717
- -webkit-padding-end: var(--amplify-components-select-padding-inline-end);
3718
- padding-inline-end: var(--amplify-components-select-padding-inline-end);
5044
+ padding-inline-end: var(--amplify-components-select-padding-inline-end);
3719
5045
  white-space: var(--amplify-components-select-white-space);
3720
5046
  }
3721
5047
  .amplify-select:focus {
@@ -3724,25 +5050,17 @@ html[dir=rtl] .amplify-field-group__inner-start {
3724
5050
  }
3725
5051
  .amplify-select--small {
3726
5052
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
3727
- -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
3728
- padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
3729
- -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
3730
- padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
3731
- -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
3732
- padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
3733
- -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
3734
- padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
5053
+ padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
5054
+ padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
5055
+ padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
5056
+ padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
3735
5057
  }
3736
5058
  .amplify-select--large {
3737
5059
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
3738
- -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
3739
- padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
3740
- -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
3741
- padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
3742
- -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
3743
- padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
3744
- -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
3745
- padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
5060
+ padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
5061
+ padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
5062
+ padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
5063
+ padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
3746
5064
  }
3747
5065
  .amplify-select--error {
3748
5066
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
@@ -3758,12 +5076,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3758
5076
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
3759
5077
  }
3760
5078
  .amplify-select--quiet {
3761
- -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
3762
- border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
3763
- -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
3764
- border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
3765
- -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
3766
- border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
5079
+ border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
5080
+ border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
5081
+ border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
3767
5082
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
3768
5083
  }
3769
5084
  .amplify-select--quiet:focus {
@@ -3790,9 +5105,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
3790
5105
  }
3791
5106
  .amplify-select--small {
3792
5107
  min-width: var(--amplify-components-select-small-min-width);
5108
+ padding-inline-end: var(--amplify-components-select-small-padding-inline-end);
3793
5109
  }
3794
5110
  .amplify-select--large {
3795
5111
  min-width: var(--amplify-components-select-large-min-width);
5112
+ padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
3796
5113
  }
3797
5114
 
3798
5115
  .amplify-selectfield {
@@ -4016,13 +5333,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
4016
5333
  }
4017
5334
 
4018
5335
  .amplify-stepperfield__button--decrease[data-invalid=true] {
4019
- -webkit-border-end: none;
4020
- border-inline-end: none;
5336
+ border-inline-end: none;
4021
5337
  }
4022
5338
 
4023
5339
  .amplify-stepperfield__button--increase[data-invalid=true] {
4024
- -webkit-border-start: none;
4025
- border-inline-start: none;
5340
+ border-inline-start: none;
4026
5341
  }
4027
5342
 
4028
5343
  .amplify-stepperfield__input {
@@ -4034,10 +5349,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
4034
5349
  margin: 0;
4035
5350
  }
4036
5351
  .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
4037
- -webkit-border-start: none;
4038
- border-inline-start: none;
4039
- -webkit-border-end: none;
4040
- border-inline-end: none;
5352
+ border-inline-start: none;
5353
+ border-inline-end: none;
4041
5354
  }
4042
5355
 
4043
5356
  .amplify-switchfield {
@@ -4646,8 +5959,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4646
5959
  z-index: 2;
4647
5960
  }
4648
5961
  .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
4649
- -webkit-margin-start: calc(-1 * var(--amplify-components-button-border-width));
4650
- margin-inline-start: calc(-1 * var(--amplify-components-button-border-width));
5962
+ margin-inline-start: calc(-1 * var(--amplify-components-button-border-width));
4651
5963
  border-start-start-radius: 0;
4652
5964
  border-end-start-radius: 0;
4653
5965
  }
@@ -5123,6 +6435,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
5123
6435
  font-size: var(--amplify-components-storagemanager-previewer-text-font-size);
5124
6436
  color: var(--amplify-components-storagemanager-previewer-text-color);
5125
6437
  }
6438
+ .amplify-storagemanager__previewer__footer {
6439
+ display: flex;
6440
+ flex-direction: row;
6441
+ justify-content: var(--amplify-components-storagemanager-previewer-footer-justify-content);
6442
+ }
6443
+ .amplify-storagemanager__previewer__actions {
6444
+ display: flex;
6445
+ flex-direction: row;
6446
+ gap: var(--amplify-space-small);
6447
+ }
5126
6448
 
5127
6449
  [data-label-position=start] {
5128
6450
  flex-direction: row;