@aws-amplify/ui-svelte 0.0.0-next-c8114c5-20220105200613 → 0.0.0-next-3785286-20220106221746

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1 +1,2827 @@
1
- @import '@aws-amplify/ui/styles.css';
1
+ /*
2
+ * Amplify UI Basic Theme
3
+ */
4
+ /**
5
+ * Do not edit directly
6
+ * Generated on Thu, 06 Jan 2022 22:15:12 GMT
7
+ */
8
+ :root, [data-amplify-theme] {
9
+ --amplify-transforms-slide-x-large: translateX(2em);
10
+ --amplify-transforms-slide-x-medium: translateX(1em);
11
+ --amplify-transforms-slide-x-small: translateX(0.5em);
12
+ --amplify-time-long: 500ms;
13
+ --amplify-time-medium: 250ms;
14
+ --amplify-time-short: 100ms;
15
+ --amplify-space-relative-xxxl: 4.5em;
16
+ --amplify-space-relative-xxl: 3.0em;
17
+ --amplify-space-relative-xl: 2.0em;
18
+ --amplify-space-relative-large: 1.5em;
19
+ --amplify-space-relative-medium: 1em;
20
+ --amplify-space-relative-small: 0.75em;
21
+ --amplify-space-relative-xs: 0.5em;
22
+ --amplify-space-relative-xxs: 0.375rem;
23
+ --amplify-space-relative-xxxs: 0.25em;
24
+ --amplify-space-xxxl: 4.5rem;
25
+ --amplify-space-xxl: 3.0rem;
26
+ --amplify-space-xl: 2.0rem;
27
+ --amplify-space-large: 1.5rem;
28
+ --amplify-space-medium: 1rem;
29
+ --amplify-space-small: 0.75rem;
30
+ --amplify-space-xs: 0.5rem;
31
+ --amplify-space-xxs: 0.375rem;
32
+ --amplify-space-xxxs: 0.25rem;
33
+ --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary);
34
+ --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary);
35
+ --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary);
36
+ --amplify-radii-xxxl: 8rem;
37
+ --amplify-radii-xxl: 4rem;
38
+ --amplify-radii-xl: 2rem;
39
+ --amplify-radii-large: 1rem;
40
+ --amplify-radii-medium: 0.5rem;
41
+ --amplify-radii-small: 0.25rem;
42
+ --amplify-radii-xs: 0.125rem;
43
+ --amplify-outline-widths-large: 3px;
44
+ --amplify-outline-widths-medium: 2px;
45
+ --amplify-outline-widths-small: 1px;
46
+ --amplify-outline-offsets-large: 3px;
47
+ --amplify-outline-offsets-medium: 2px;
48
+ --amplify-outline-offsets-small: 1px;
49
+ --amplify-opacities-100: 1;
50
+ --amplify-opacities-90: 0.9;
51
+ --amplify-opacities-80: 0.8;
52
+ --amplify-opacities-70: 0.7;
53
+ --amplify-opacities-60: 0.6;
54
+ --amplify-opacities-50: 0.5;
55
+ --amplify-opacities-40: 0.4;
56
+ --amplify-opacities-30: 0.3;
57
+ --amplify-opacities-20: 0.2;
58
+ --amplify-opacities-10: 0.1;
59
+ --amplify-opacities-0: 0;
60
+ --amplify-line-heights-large: 2;
61
+ --amplify-line-heights-medium: 1.75;
62
+ --amplify-line-heights-small: 1.5;
63
+ --amplify-font-weights-black: 900;
64
+ --amplify-font-weights-extrabold: 800;
65
+ --amplify-font-weights-bold: 700;
66
+ --amplify-font-weights-semibold: 600;
67
+ --amplify-font-weights-medium: 500;
68
+ --amplify-font-weights-normal: 400;
69
+ --amplify-font-weights-light: 300;
70
+ --amplify-font-weights-thin: 200;
71
+ --amplify-font-weights-hairline: 100;
72
+ --amplify-font-sizes-xxxxl: 5rem;
73
+ --amplify-font-sizes-xxxl: 3rem;
74
+ --amplify-font-sizes-xxl: 2rem;
75
+ --amplify-font-sizes-xl: 1.5rem;
76
+ --amplify-font-sizes-large: 1.25rem;
77
+ --amplify-font-sizes-medium: 1rem;
78
+ --amplify-font-sizes-small: 0.875rem;
79
+ --amplify-font-sizes-xs: 0.75rem;
80
+ --amplify-font-sizes-xxs: 0.5rem;
81
+ --amplify-font-sizes-xxxs: 0.375rem;
82
+ --amplify-fonts-default-static: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
83
+ "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
84
+ --amplify-fonts-default-variable: "InterVariable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
85
+ "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans",
86
+ sans-serif;
87
+ --amplify-colors-transparent: transparent;
88
+ --amplify-colors-white: hsl(0, 0%, 100%);
89
+ --amplify-colors-black: hsl(0, 0%, 0%);
90
+ --amplify-colors-overlay-90: hsla(0, 0%, 0%, 0.9);
91
+ --amplify-colors-overlay-80: hsla(0, 0%, 0%, 0.8);
92
+ --amplify-colors-overlay-70: hsla(0, 0%, 0%, 0.7);
93
+ --amplify-colors-overlay-60: hsla(0, 0%, 0%, 0.6);
94
+ --amplify-colors-overlay-50: hsla(0, 0%, 0%, 0.5);
95
+ --amplify-colors-overlay-40: hsla(0, 0%, 0%, 0.4);
96
+ --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3);
97
+ --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2);
98
+ --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1);
99
+ --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05);
100
+ --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15);
101
+ --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);
102
+ --amplify-colors-border-error: var(--amplify-colors-red-80);
103
+ --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
104
+ --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
105
+ --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
106
+ --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
107
+ --amplify-colors-border-primary: var(--amplify-colors-neutral-60);
108
+ --amplify-colors-background-success: var(--amplify-colors-green-20);
109
+ --amplify-colors-background-error: var(--amplify-colors-red-20);
110
+ --amplify-colors-background-warning: var(--amplify-colors-orange-20);
111
+ --amplify-colors-background-info: var(--amplify-colors-blue-20);
112
+ --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
113
+ --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
114
+ --amplify-colors-background-secondary: var(--amplify-colors-neutral-10);
115
+ --amplify-colors-background-primary: var(--amplify-colors-white);
116
+ --amplify-colors-font-success: var(--amplify-colors-green-90);
117
+ --amplify-colors-font-error: var(--amplify-colors-red-90);
118
+ --amplify-colors-font-warning: var(--amplify-colors-orange-90);
119
+ --amplify-colors-font-info: var(--amplify-colors-blue-90);
120
+ --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
121
+ --amplify-colors-font-focus: var(--amplify-colors-brand-primary-100);
122
+ --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
123
+ --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
124
+ --amplify-colors-font-inverse: var(--amplify-colors-white);
125
+ --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
126
+ --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
127
+ --amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
128
+ --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
129
+ --amplify-colors-brand-secondary-100: var(--amplify-colors-purple-100);
130
+ --amplify-colors-brand-secondary-90: var(--amplify-colors-purple-90);
131
+ --amplify-colors-brand-secondary-80: var(--amplify-colors-purple-80);
132
+ --amplify-colors-brand-secondary-60: var(--amplify-colors-purple-60);
133
+ --amplify-colors-brand-secondary-40: var(--amplify-colors-purple-40);
134
+ --amplify-colors-brand-secondary-20: var(--amplify-colors-purple-20);
135
+ --amplify-colors-brand-secondary-10: var(--amplify-colors-purple-10);
136
+ --amplify-colors-brand-primary-100: var(--amplify-colors-teal-100);
137
+ --amplify-colors-brand-primary-90: var(--amplify-colors-teal-90);
138
+ --amplify-colors-brand-primary-80: var(--amplify-colors-teal-80);
139
+ --amplify-colors-brand-primary-60: var(--amplify-colors-teal-60);
140
+ --amplify-colors-brand-primary-40: var(--amplify-colors-teal-40);
141
+ --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
142
+ --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
143
+ --amplify-colors-neutral-100: hsl(210, 50%, 10%);
144
+ --amplify-colors-neutral-90: hsl(210, 25%, 25%);
145
+ --amplify-colors-neutral-80: hsl(210, 10%, 40%);
146
+ --amplify-colors-neutral-60: hsl(210, 6%, 70%);
147
+ --amplify-colors-neutral-40: hsl(210, 5%, 87%);
148
+ --amplify-colors-neutral-20: hsl(210, 5%, 94%);
149
+ --amplify-colors-neutral-10: hsl(210, 5%, 98%);
150
+ --amplify-colors-pink-100: hsl(340, 100%, 15%);
151
+ --amplify-colors-pink-90: hsl(340, 100%, 20%);
152
+ --amplify-colors-pink-80: hsl(340, 95%, 30%);
153
+ --amplify-colors-pink-60: hsl(340, 50%, 50%);
154
+ --amplify-colors-pink-40: hsl(340, 70%, 70%);
155
+ --amplify-colors-pink-20: hsl(340, 90%, 85%);
156
+ --amplify-colors-pink-10: hsl(340, 95%, 95%);
157
+ --amplify-colors-purple-100: hsl(300, 100%, 15%);
158
+ --amplify-colors-purple-90: hsl(300, 100%, 20%);
159
+ --amplify-colors-purple-80: hsl(300, 95%, 30%);
160
+ --amplify-colors-purple-60: hsl(300, 50%, 50%);
161
+ --amplify-colors-purple-40: hsl(300, 70%, 70%);
162
+ --amplify-colors-purple-20: hsl(300, 85%, 85%);
163
+ --amplify-colors-purple-10: hsl(300, 95%, 95%);
164
+ --amplify-colors-blue-100: hsl(220, 100%, 15%);
165
+ --amplify-colors-blue-90: hsl(220, 100%, 20%);
166
+ --amplify-colors-blue-80: hsl(220, 95%, 30%);
167
+ --amplify-colors-blue-60: hsl(220, 50%, 50%);
168
+ --amplify-colors-blue-40: hsl(220, 70%, 70%);
169
+ --amplify-colors-blue-20: hsl(220, 85%, 85%);
170
+ --amplify-colors-blue-10: hsl(220, 95%, 95%);
171
+ --amplify-colors-teal-100: hsl(190, 100%, 15%);
172
+ --amplify-colors-teal-90: hsl(190, 100%, 20%);
173
+ --amplify-colors-teal-80: hsl(190, 95%, 30%);
174
+ --amplify-colors-teal-60: hsl(190, 50%, 50%);
175
+ --amplify-colors-teal-40: hsl(190, 70%, 70%);
176
+ --amplify-colors-teal-20: hsl(190, 75%, 85%);
177
+ --amplify-colors-teal-10: hsl(190, 75%, 95%);
178
+ --amplify-colors-green-100: hsl(130, 22%, 23%);
179
+ --amplify-colors-green-90: hsl(130, 27%, 29%);
180
+ --amplify-colors-green-80: hsl(130, 33%, 37%);
181
+ --amplify-colors-green-60: hsl(130, 43%, 46%);
182
+ --amplify-colors-green-40: hsl(130, 44%, 63%);
183
+ --amplify-colors-green-20: hsl(130, 60%, 90%);
184
+ --amplify-colors-green-10: hsl(130, 60%, 95%);
185
+ --amplify-colors-yellow-100: hsl(60, 100%, 15%);
186
+ --amplify-colors-yellow-90: hsl(60, 100%, 20%);
187
+ --amplify-colors-yellow-80: hsl(60, 95%, 30%);
188
+ --amplify-colors-yellow-60: hsl(60, 50%, 50%);
189
+ --amplify-colors-yellow-40: hsl(60, 75%, 75%);
190
+ --amplify-colors-yellow-20: hsl(60, 75%, 85%);
191
+ --amplify-colors-yellow-10: hsl(60, 75%, 95%);
192
+ --amplify-colors-orange-100: hsl(30, 100%, 15%);
193
+ --amplify-colors-orange-90: hsl(30, 100%, 20%);
194
+ --amplify-colors-orange-80: hsl(30, 95%, 30%);
195
+ --amplify-colors-orange-60: hsl(30, 50%, 50%);
196
+ --amplify-colors-orange-40: hsl(30, 75%, 75%);
197
+ --amplify-colors-orange-20: hsl(30, 75%, 85%);
198
+ --amplify-colors-orange-10: hsl(30, 75%, 95%);
199
+ --amplify-colors-red-100: hsl(0, 100%, 15%);
200
+ --amplify-colors-red-90: hsl(0, 100%, 20%);
201
+ --amplify-colors-red-80: hsl(0, 95%, 30%);
202
+ --amplify-colors-red-60: hsl(0, 50%, 50%);
203
+ --amplify-colors-red-40: hsl(0, 75%, 75%);
204
+ --amplify-colors-red-20: hsl(0, 75%, 85%);
205
+ --amplify-colors-red-10: hsl(0, 75%, 95%);
206
+ --amplify-border-widths-large: 3px;
207
+ --amplify-border-widths-medium: 2px;
208
+ --amplify-border-widths-small: 1px;
209
+ --amplify-components-togglebuttongroup-justify-content: flex-start;
210
+ --amplify-components-togglebuttongroup-align-content: center;
211
+ --amplify-components-togglebuttongroup-align-items: center;
212
+ --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
213
+ --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
214
+ --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
215
+ --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled);
216
+ --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
217
+ --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
218
+ --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
219
+ --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
220
+ --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
221
+ --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
222
+ --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
223
+ --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
224
+ --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
225
+ --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
226
+ --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
227
+ --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
228
+ --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
229
+ --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-tertiary);
230
+ --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
231
+ --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
232
+ --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-overlay-50);
233
+ --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
234
+ --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
235
+ --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
236
+ --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
237
+ --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
238
+ --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30);
239
+ --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
240
+ --amplify-components-togglebutton-pressed-color: var(--amplify-colors-overlay-90);
241
+ --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
242
+ --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
243
+ --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
244
+ --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
245
+ --amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
246
+ --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
247
+ --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
248
+ --amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
249
+ --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
250
+ --amplify-components-text-info-color: var(--amplify-colors-font-info);
251
+ --amplify-components-text-success-color: var(--amplify-colors-font-success);
252
+ --amplify-components-text-warning-color: var(--amplify-colors-font-warning);
253
+ --amplify-components-text-error-color: var(--amplify-colors-font-error);
254
+ --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary);
255
+ --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary);
256
+ --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
257
+ --amplify-components-text-color: var(--amplify-colors-font-primary);
258
+ --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary);
259
+ --amplify-components-tabs-item-disabled-background-color: transparent;
260
+ --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
261
+ --amplify-components-tabs-item-active-background-color: transparent;
262
+ --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
263
+ --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
264
+ --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
265
+ --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
266
+ --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
267
+ --amplify-components-tabs-item-text-align: center;
268
+ --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
269
+ --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small);
270
+ --amplify-components-tabs-item-font-weight: var(--amplify-font-weights-bold);
271
+ --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium);
272
+ --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary);
273
+ --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium);
274
+ --amplify-components-tabs-item-border-style: solid;
275
+ --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
276
+ --amplify-components-tabs-item-background-color: transparent;
277
+ --amplify-components-tabs-gap: 0;
278
+ --amplify-components-tabs-border-width: var(--amplify-border-widths-medium);
279
+ --amplify-components-tabs-border-style: solid;
280
+ --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
281
+ --amplify-components-tabs-background-color: transparent;
282
+ --amplify-components-table-caption-small-font-size: var(--amplify-font-sizes-small);
283
+ --amplify-components-table-caption-large-font-size: var(--amplify-font-sizes-large);
284
+ --amplify-components-table-caption-word-break: break-all;
285
+ --amplify-components-table-caption-text-align: center;
286
+ --amplify-components-table-caption-font-size: var(--amplify-font-sizes-medium);
287
+ --amplify-components-table-caption-display: table-caption;
288
+ --amplify-components-table-caption-color: var(--amplify-colors-font-primary);
289
+ --amplify-components-table-caption-caption-side: bottom;
290
+ --amplify-components-table-data-small-padding: var(--amplify-space-xs);
291
+ --amplify-components-table-data-small-font-size: var(--amplify-font-sizes-small);
292
+ --amplify-components-table-data-large-padding: var(--amplify-space-large);
293
+ --amplify-components-table-data-large-font-size: var(--amplify-font-sizes-large);
294
+ --amplify-components-table-data-vertical-align: middle;
295
+ --amplify-components-table-data-padding: var(--amplify-space-medium);
296
+ --amplify-components-table-data-font-weight: var(--amplify-font-weights-normal);
297
+ --amplify-components-table-data-font-size: var(--amplify-font-sizes-medium);
298
+ --amplify-components-table-data-display: table-cell;
299
+ --amplify-components-table-data-color: var(--amplify-colors-font-primary);
300
+ --amplify-components-table-data-border-width: var(--amplify-border-widths-small);
301
+ --amplify-components-table-data-border-style: solid;
302
+ --amplify-components-table-data-border-color: var(--amplify-colors-border-tertiary);
303
+ --amplify-components-table-header-small-padding: var(--amplify-space-xs);
304
+ --amplify-components-table-header-small-font-size: var(--amplify-font-sizes-small);
305
+ --amplify-components-table-header-large-padding: var(--amplify-space-large);
306
+ --amplify-components-table-header-large-font-size: var(--amplify-font-sizes-large);
307
+ --amplify-components-table-header-vertical-align: middle;
308
+ --amplify-components-table-header-padding: var(--amplify-space-medium);
309
+ --amplify-components-table-header-font-weight: var(--amplify-font-weights-bold);
310
+ --amplify-components-table-header-font-size: var(--amplify-font-sizes-medium);
311
+ --amplify-components-table-header-display: table-cell;
312
+ --amplify-components-table-header-color: var(--amplify-colors-font-primary);
313
+ --amplify-components-table-header-border-width: var(--amplify-border-widths-small);
314
+ --amplify-components-table-header-border-style: solid;
315
+ --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary);
316
+ --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary);
317
+ --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary);
318
+ --amplify-components-table-row-vertical-align: middle;
319
+ --amplify-components-table-row-display: table-row;
320
+ --amplify-components-table-foot-vertical-align: middle;
321
+ --amplify-components-table-foot-display: table-footer-group;
322
+ --amplify-components-table-body-vertical-align: middle;
323
+ --amplify-components-table-body-display: table-row-group;
324
+ --amplify-components-table-head-vertical-align: middle;
325
+ --amplify-components-table-head-display: table-header-group;
326
+ --amplify-components-table-width: 100%;
327
+ --amplify-components-table-display: table;
328
+ --amplify-components-table-border-collapse: collapse;
329
+ --amplify-components-switchfield-track-width: var(--amplify-space-relative-xl);
330
+ --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short);
331
+ --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium);
332
+ --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium);
333
+ --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-60);
334
+ --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl);
335
+ --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
336
+ --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium);
337
+ --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);
338
+ --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
339
+ --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
340
+ --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
341
+ --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
342
+ --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
343
+ --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
344
+ --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
345
+ --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
346
+ --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
347
+ --amplify-components-stepperfield-input-text-align: center;
348
+ --amplify-components-stepperfield-flex-direction: column;
349
+ --amplify-components-sliderfield-large-thumb-height: 1.5rem;
350
+ --amplify-components-sliderfield-large-thumb-width: 1.5rem;
351
+ --amplify-components-sliderfield-large-track-height: 0.625rem;
352
+ --amplify-components-sliderfield-small-thumb-height: 1rem;
353
+ --amplify-components-sliderfield-small-thumb-width: 1rem;
354
+ --amplify-components-sliderfield-small-track-height: 0.25rem;
355
+ --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
356
+ --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
357
+ --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
358
+ --amplify-components-sliderfield-thumb-disabled-box-shadow: none;
359
+ --amplify-components-sliderfield-thumb-disabled-border-color: transparent;
360
+ --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
361
+ --amplify-components-sliderfield-thumb-border-style: solid;
362
+ --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
363
+ --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
364
+ --amplify-components-sliderfield-thumb-border-radius: 50%;
365
+ --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-medium);
366
+ --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
367
+ --amplify-components-sliderfield-thumb-height: 1.25rem;
368
+ --amplify-components-sliderfield-thumb-width: 1.25rem;
369
+ --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
370
+ --amplify-components-sliderfield-range-border-radius: 9999px;
371
+ --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
372
+ --amplify-components-sliderfield-track-min-width: 10rem;
373
+ --amplify-components-sliderfield-track-height: 0.375rem;
374
+ --amplify-components-sliderfield-track-border-radius: 9999px;
375
+ --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-tertiary);
376
+ --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
377
+ --amplify-components-selectfield-flex-direction: column;
378
+ --amplify-components-select-large-min-width: 7.5rem;
379
+ --amplify-components-select-small-min-width: 5.5rem;
380
+ --amplify-components-select-min-width: 6.5rem;
381
+ --amplify-components-select-white-space: nowrap;
382
+ --amplify-components-select-icon-wrapper-pointer-events: none;
383
+ --amplify-components-select-icon-wrapper-transform: translateY(-50%);
384
+ --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
385
+ --amplify-components-select-icon-wrapper-top: 50%;
386
+ --amplify-components-select-icon-wrapper-position: absolute;
387
+ --amplify-components-select-icon-wrapper-align-items: center;
388
+ --amplify-components-select-wrapper-cursor: pointer;
389
+ --amplify-components-select-wrapper-position: relative;
390
+ --amplify-components-select-wrapper-display: block;
391
+ --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
392
+ --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
393
+ --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
394
+ --amplify-components-rating-small-size: var(--amplify-font-sizes-small);
395
+ --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
396
+ --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
397
+ --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
398
+ --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
399
+ --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
400
+ --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
401
+ --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
402
+ --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
403
+ --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
404
+ --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
405
+ --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
406
+ --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large);
407
+ --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large);
408
+ --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small);
409
+ --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small);
410
+ --amplify-components-radio-button-padding: var(--amplify-border-widths-medium);
411
+ --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium);
412
+ --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium);
413
+ --amplify-components-radio-button-outline-style: solid;
414
+ --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent);
415
+ --amplify-components-radio-button-transition-duration: var(--amplify-time-medium);
416
+ --amplify-components-radio-button-transition-property: all;
417
+ --amplify-components-radio-button-background-color: var(--amplify-colors-white);
418
+ --amplify-components-radio-button-color: var(--amplify-colors-white);
419
+ --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary);
420
+ --amplify-components-radio-button-border-radius: 50%;
421
+ --amplify-components-radio-button-border-style: solid;
422
+ --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium);
423
+ --amplify-components-radio-button-box-sizing: border-box;
424
+ --amplify-components-radio-button-height: var(--amplify-font-sizes-medium);
425
+ --amplify-components-radio-button-width: var(--amplify-font-sizes-medium);
426
+ --amplify-components-radio-button-justify-content: center;
427
+ --amplify-components-radio-button-align-items: center;
428
+ --amplify-components-radio-disabled-cursor: not-allowed;
429
+ --amplify-components-radio-gap: inherit;
430
+ --amplify-components-radio-justify-content: flex-start;
431
+ --amplify-components-radio-align-items: center;
432
+ --amplify-components-placeholder-large-height: var(--amplify-space-large);
433
+ --amplify-components-placeholder-default-height: var(--amplify-space-medium);
434
+ --amplify-components-placeholder-small-height: var(--amplify-space-small);
435
+ --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary);
436
+ --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary);
437
+ --amplify-components-placeholder-transition-duration: var(--amplify-time-long);
438
+ --amplify-components-placeholder-border-radius: var(--amplify-radii-small);
439
+ --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium);
440
+ --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl);
441
+ --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl);
442
+ --amplify-components-pagination-item-container-margin-right: var(--amplify-space-xxxs);
443
+ --amplify-components-pagination-item-container-margin-left: var(--amplify-space-xxxs);
444
+ --amplify-components-pagination-ellipsis-padding-inline-end: var(--amplify-space-xs);
445
+ --amplify-components-pagination-ellipsis-padding-inline-start: var(--amplify-space-xs);
446
+ --amplify-components-pagination-ellipsis-justify-content: center;
447
+ --amplify-components-pagination-ellipsis-align-items: baseline;
448
+ --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
449
+ --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary);
450
+ --amplify-components-pagination-button-hover-background-color: var(--amplify-colors-overlay-10);
451
+ --amplify-components-pagination-button-transition-duration: var(--amplify-time-medium);
452
+ --amplify-components-pagination-button-transition-property: background-color;
453
+ --amplify-components-pagination-button-padding-inline-end: var(--amplify-space-xxs);
454
+ --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs);
455
+ --amplify-components-pagination-button-color: var(--amplify-colors-font-primary);
456
+ --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40);
457
+ --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small);
458
+ --amplify-components-pagination-current-color: var(--amplify-colors-white);
459
+ --amplify-components-pagination-current-justify-content: center;
460
+ --amplify-components-pagination-current-align-items: center;
461
+ --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
462
+ --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
463
+ --amplify-components-menu-item-min-height: 2.5rem;
464
+ --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl);
465
+ --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl);
466
+ --amplify-components-menu-small-height: var(--amplify-font-sizes-medium);
467
+ --amplify-components-menu-small-width: var(--amplify-font-sizes-medium);
468
+ --amplify-components-menu-min-width: 14rem;
469
+ --amplify-components-menu-max-width: 30rem;
470
+ --amplify-components-menu-gap: 0;
471
+ --amplify-components-menu-flex-direction: column;
472
+ --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
473
+ --amplify-components-menu-border-radius: var(--amplify-radii-medium);
474
+ --amplify-components-menu-background-color: var(--amplify-colors-white);
475
+ --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs);
476
+ --amplify-components-loader-linear-large-height: var(--amplify-font-sizes-xs);
477
+ --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs);
478
+ --amplify-components-loader-linear-small-height: var(--amplify-font-sizes-xxxs);
479
+ --amplify-components-loader-linear-animation-duration: 1s;
480
+ --amplify-components-loader-linear-stroke-linecap: round;
481
+ --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20);
482
+ --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
483
+ --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs);
484
+ --amplify-components-loader-linear-height: var(--amplify-font-sizes-xxs);
485
+ --amplify-components-loader-linear-min-width: 5rem;
486
+ --amplify-components-loader-linear-width: 100%;
487
+ --amplify-components-loader-large-height: var(--amplify-font-sizes-xxxl);
488
+ --amplify-components-loader-large-width: var(--amplify-font-sizes-xxxl);
489
+ --amplify-components-loader-small-height: var(--amplify-font-sizes-medium);
490
+ --amplify-components-loader-small-width: var(--amplify-font-sizes-medium);
491
+ --amplify-components-loader-animation-duration: 1s;
492
+ --amplify-components-loader-stroke-linecap: round;
493
+ --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
494
+ --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20);
495
+ --amplify-components-loader-height: var(--amplify-font-sizes-xxl);
496
+ --amplify-components-loader-width: var(--amplify-font-sizes-xxl);
497
+ --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
498
+ --amplify-components-link-small-font-size: var(--amplify-font-sizes-small);
499
+ --amplify-components-link-large-font-size: var(--amplify-font-sizes-large);
500
+ --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
501
+ --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
502
+ --amplify-components-link-color: var(--amplify-colors-font-interactive);
503
+ --amplify-components-link-active-color: var(--amplify-colors-font-active);
504
+ --amplify-components-image-object-position: initial;
505
+ --amplify-components-image-object-fit: initial;
506
+ --amplify-components-image-height: auto;
507
+ --amplify-components-image-max-width: 100%;
508
+ --amplify-components-icon-height: 1em;
509
+ --amplify-components-icon-line-height: 1;
510
+ --amplify-components-heading-line-height: 1.25;
511
+ --amplify-components-heading-color: var(--amplify-colors-font-primary);
512
+ --amplify-components-heading-6-font-weight: var(--amplify-font-weights-bold);
513
+ --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
514
+ --amplify-components-heading-5-font-weight: var(--amplify-font-weights-semibold);
515
+ --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large);
516
+ --amplify-components-heading-4-font-weight: var(--amplify-font-weights-medium);
517
+ --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl);
518
+ --amplify-components-heading-3-font-weight: var(--amplify-font-weights-normal);
519
+ --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl);
520
+ --amplify-components-heading-2-font-weight: var(--amplify-font-weights-light);
521
+ --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl);
522
+ --amplify-components-heading-1-font-weight: var(--amplify-font-weights-light);
523
+ --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl);
524
+ --amplify-components-flex-flex-wrap: nowrap;
525
+ --amplify-components-flex-align-content: normal;
526
+ --amplify-components-flex-align-items: stretch;
527
+ --amplify-components-flex-justify-content: normal;
528
+ --amplify-components-flex-gap: var(--amplify-space-medium);
529
+ --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
530
+ --amplify-components-fieldmessages-description-font-style: italic;
531
+ --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
532
+ --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small);
533
+ --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
534
+ --amplify-components-fieldgroup-outer-align-items: center;
535
+ --amplify-components-fieldgroup-vertical-align-items: center;
536
+ --amplify-components-fieldgroup-gap: 0;
537
+ --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
538
+ --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
539
+ --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
540
+ --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
541
+ --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
542
+ --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
543
+ --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
544
+ --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
545
+ --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px var(--amplify-colors-border-error);
546
+ --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
547
+ --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px var(--amplify-colors-border-focus);
548
+ --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
549
+ --amplify-components-fieldcontrol-quiet-border-radius: 0;
550
+ --amplify-components-fieldcontrol-quiet-border-block-start: none;
551
+ --amplify-components-fieldcontrol-quiet-border-inline-end: none;
552
+ --amplify-components-fieldcontrol-quiet-border-inline-start: none;
553
+ --amplify-components-fieldcontrol-quiet-border-block-end: var(--amplify-border-widths-small-solid-colors-border-primary-value);
554
+ --amplify-components-fieldcontrol-quiet-border-style: none;
555
+ --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium);
556
+ --amplify-components-fieldcontrol-large-padding-inline-start: var(--amplify-space-medium);
557
+ --amplify-components-fieldcontrol-large-padding-block-end: var(--amplify-space-xs);
558
+ --amplify-components-fieldcontrol-large-padding-block-start: var(--amplify-space-xs);
559
+ --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
560
+ --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small);
561
+ --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small);
562
+ --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xs);
563
+ --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xs);
564
+ --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size);
565
+ --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium);
566
+ --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium);
567
+ --amplify-components-fieldcontrol-outline-style: solid;
568
+ --amplify-components-fieldcontrol-outline-color: var(--amplify-colors-transparent);
569
+ --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-medium);
570
+ --amplify-components-fieldcontrol-line-height: var(--amplify-line-heights-medium);
571
+ --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size);
572
+ --amplify-components-fieldcontrol-padding-inline-end: var(--amplify-space-medium);
573
+ --amplify-components-fieldcontrol-padding-inline-start: var(--amplify-space-medium);
574
+ --amplify-components-fieldcontrol-padding-block-end: var(--amplify-space-xs);
575
+ --amplify-components-fieldcontrol-padding-block-start: var(--amplify-space-xs);
576
+ --amplify-components-fieldcontrol-color: var(--amplify-colors-font-primary);
577
+ --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-small);
578
+ --amplify-components-fieldcontrol-border-width: var(--amplify-border-widths-small);
579
+ --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary);
580
+ --amplify-components-fieldcontrol-border-style: solid;
581
+ --amplify-components-field-label-color: var(--amplify-colors-font-secondary);
582
+ --amplify-components-field-large-font-size: var(--amplify-font-sizes-large);
583
+ --amplify-components-field-large-gap: var(--amplify-space-small);
584
+ --amplify-components-field-small-font-size: var(--amplify-font-sizes-small);
585
+ --amplify-components-field-small-gap: var(--amplify-space-xxxs);
586
+ --amplify-components-field-font-size: var(--amplify-font-sizes-medium);
587
+ --amplify-components-field-gap: var(--amplify-space-xs);
588
+ --amplify-components-expander-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
589
+ --amplify-components-expander-icon-transition-duration: var(--amplify-time-medium);
590
+ --amplify-components-expander-content-closed-animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
591
+ --amplify-components-expander-content-closed-animation-duration: var(--amplify-time-medium);
592
+ --amplify-components-expander-content-open-animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
593
+ --amplify-components-expander-content-open-animation-duration: var(--amplify-time-medium);
594
+ --amplify-components-expander-content-text-padding-block-end: var(--amplify-space-medium);
595
+ --amplify-components-expander-content-text-padding-block-start: var(--amplify-space-medium);
596
+ --amplify-components-expander-content-text-color: var(--amplify-colors-font-secondary);
597
+ --amplify-components-expander-content-padding-inline-end: var(--amplify-space-large);
598
+ --amplify-components-expander-content-padding-inline-start: var(--amplify-space-large);
599
+ --amplify-components-expander-trigger-hover-background-color: var(--amplify-colors-overlay-10);
600
+ --amplify-components-expander-trigger-justify-content: space-between;
601
+ --amplify-components-expander-trigger-align-items: center;
602
+ --amplify-components-expander-trigger-padding-inline-end: var(--amplify-space-large);
603
+ --amplify-components-expander-trigger-padding-inline-start: var(--amplify-space-large);
604
+ --amplify-components-expander-trigger-min-height: 3rem;
605
+ --amplify-components-expander-header-box-shadow: 0 1px 0 var(--amplify-colors-overlay-20);
606
+ --amplify-components-expander-item-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
607
+ --amplify-components-expander-item-border-end-end-radius: var(--amplify-radii-medium);
608
+ --amplify-components-expander-item-border-end-start-radius: var(--amplify-radii-medium);
609
+ --amplify-components-expander-item-border-start-end-radius: var(--amplify-radii-medium);
610
+ --amplify-components-expander-item-border-start-start-radius: var(--amplify-radii-medium);
611
+ --amplify-components-expander-item-border-top-right-radius: var(--amplify-radii-medium);
612
+ --amplify-components-expander-item-border-top-left-radius: var(--amplify-radii-medium);
613
+ --amplify-components-expander-item-border-bottom-right-radius: var(--amplify-radii-medium);
614
+ --amplify-components-expander-item-border-bottom-left-radius: var(--amplify-radii-medium);
615
+ --amplify-components-expander-item-box-shadow: var(--amplify-shadows-small);
616
+ --amplify-components-expander-item-margin-top: 1px;
617
+ --amplify-components-expander-width: 100%;
618
+ --amplify-components-expander-box-shadow: var(--amplify-shadows-large);
619
+ --amplify-components-expander-border-radius: var(--amplify-radii-medium);
620
+ --amplify-components-expander-background-color: var(--amplify-colors-white);
621
+ --amplify-components-expander-display: block;
622
+ --amplify-components-divider-opacity: var(--amplify-opacities-60);
623
+ --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
624
+ --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
625
+ --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
626
+ --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
627
+ --amplify-components-divider-border-style: solid;
628
+ --amplify-components-checkboxfield-justify-content: center;
629
+ --amplify-components-checkboxfield-flex-direction: column;
630
+ --amplify-components-checkboxfield-align-content: center;
631
+ --amplify-components-checkboxfield-align-items: flex-start;
632
+ --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
633
+ --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled);
634
+ --amplify-components-checkbox-icon-checked-transform: scale(1);
635
+ --amplify-components-checkbox-icon-checked-opacity: var(--amplify-opacities-100);
636
+ --amplify-components-checkbox-icon-transition-timing-function: ease-in-out;
637
+ --amplify-components-checkbox-icon-transition-duration: var(--amplify-time-short);
638
+ --amplify-components-checkbox-icon-transition-property: all;
639
+ --amplify-components-checkbox-icon-transform: scale(0);
640
+ --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0);
641
+ --amplify-components-checkbox-icon-border-radius: 20%;
642
+ --amplify-components-checkbox-icon-background-color: var(--amplify-colors-brand-primary-80);
643
+ --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
644
+ --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-transparent);
645
+ --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
646
+ --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
647
+ --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
648
+ --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-transparent);
649
+ --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
650
+ --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
651
+ --amplify-components-checkbox-button-focus-outline-style: solid;
652
+ --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent);
653
+ --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary);
654
+ --amplify-components-checkbox-button-before-border-style: solid;
655
+ --amplify-components-checkbox-button-before-border-radius: 20%;
656
+ --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium);
657
+ --amplify-components-checkbox-button-before-height: 100%;
658
+ --amplify-components-checkbox-button-before-width: 100%;
659
+ --amplify-components-checkbox-button-color: var(--amplify-colors-white);
660
+ --amplify-components-checkbox-button-justify-content: center;
661
+ --amplify-components-checkbox-button-align-items: center;
662
+ --amplify-components-checkbox-button-position: relative;
663
+ --amplify-components-checkbox-disabled-cursor: not-allowed;
664
+ --amplify-components-checkbox-align-items: center;
665
+ --amplify-components-checkbox-cursor: pointer;
666
+ --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium);
667
+ --amplify-components-card-elevated-border-color: transparent;
668
+ --amplify-components-card-elevated-border-style: solid;
669
+ --amplify-components-card-elevated-border-width: 0;
670
+ --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
671
+ --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color);
672
+ --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
673
+ --amplify-components-card-outlined-border-style: solid;
674
+ --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
675
+ --amplify-components-card-outlined-border-radius: var(--amplify-radii-xs);
676
+ --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color);
677
+ --amplify-components-card-padding: var(--amplify-space-medium);
678
+ --amplify-components-card-box-shadow: none;
679
+ --amplify-components-card-border-color: transparent;
680
+ --amplify-components-card-border-style: solid;
681
+ --amplify-components-card-border-width: 0;
682
+ --amplify-components-card-border-radius: var(--amplify-radii-xs);
683
+ --amplify-components-card-background-color: var(--amplify-colors-background-primary);
684
+ --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
685
+ --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
686
+ --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
687
+ --amplify-components-button-large-padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
688
+ --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
689
+ --amplify-components-button-small-padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
690
+ --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
691
+ --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
692
+ --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
693
+ --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
694
+ --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
695
+ --amplify-components-button-link-loading-background-color: transparent;
696
+ --amplify-components-button-link-loading-border-color: transparent;
697
+ --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled);
698
+ --amplify-components-button-link-disabled-background-color: transparent;
699
+ --amplify-components-button-link-disabled-border-color: transparent;
700
+ --amplify-components-button-link-active-color: var(--amplify-colors-font-active);
701
+ --amplify-components-button-link-active-background-color: var(--amplify-colors-brand-primary-20);
702
+ --amplify-components-button-link-active-border-color: transparent;
703
+ --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
704
+ --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus);
705
+ --amplify-components-button-link-focus-background-color: var(--amplify-colors-brand-primary-10);
706
+ --amplify-components-button-link-focus-border-color: transparent;
707
+ --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover);
708
+ --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
709
+ --amplify-components-button-link-hover-border-color: transparent;
710
+ --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
711
+ --amplify-components-button-link-background-color: transparent;
712
+ --amplify-components-button-link-border-color: transparent;
713
+ --amplify-components-button-link-border-width: 0;
714
+ --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
715
+ --amplify-components-button-menu-active-background-color: var(--amplify-colors-brand-primary-90);
716
+ --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse);
717
+ --amplify-components-button-menu-focus-background-color: var(--amplify-colors-brand-primary-80);
718
+ --amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse);
719
+ --amplify-components-button-menu-hover-background-color: var(--amplify-colors-brand-primary-80);
720
+ --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse);
721
+ --amplify-components-button-menu-justify-content: start;
722
+ --amplify-components-button-menu-background-color: transparent;
723
+ --amplify-components-button-menu-border-width: 0;
724
+ --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse);
725
+ --amplify-components-button-primary-active-background-color: var(--amplify-colors-brand-primary-100);
726
+ --amplify-components-button-primary-active-border-color: transparent;
727
+ --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
728
+ --amplify-components-button-primary-focus-color: var(--amplify-colors-font-inverse);
729
+ --amplify-components-button-primary-focus-background-color: var(--amplify-colors-brand-primary-90);
730
+ --amplify-components-button-primary-focus-border-color: transparent;
731
+ --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
732
+ --amplify-components-button-primary-hover-background-color: var(--amplify-colors-brand-primary-90);
733
+ --amplify-components-button-primary-hover-border-color: transparent;
734
+ --amplify-components-button-primary-loading-color: var(--amplify-colors-font-inverse);
735
+ --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-tertiary);
736
+ --amplify-components-button-primary-loading-border-color: transparent;
737
+ --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
738
+ --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
739
+ --amplify-components-button-primary-disabled-border-color: transparent;
740
+ --amplify-components-button-primary-color: var(--amplify-colors-font-inverse);
741
+ --amplify-components-button-primary-background-color: var(--amplify-colors-brand-primary-80);
742
+ --amplify-components-button-primary-border-style: solid;
743
+ --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
744
+ --amplify-components-button-primary-border-color: transparent;
745
+ --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
746
+ --amplify-components-button-disabled-background-color: transparent;
747
+ --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
748
+ --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
749
+ --amplify-components-button-loading-background-color: transparent;
750
+ --amplify-components-button-loading-color: var(--amplify-colors-font-tertiary);
751
+ --amplify-components-button-active-border-color: var(--amplify-colors-brand-primary-100);
752
+ --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-20);
753
+ --amplify-components-button-active-color: var(--amplify-colors-font-active);
754
+ --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
755
+ --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus);
756
+ --amplify-components-button-focus-background-color: var(--amplify-colors-brand-primary-10);
757
+ --amplify-components-button-focus-color: var(--amplify-colors-font-focus);
758
+ --amplify-components-button-hover-border-color: var(--amplify-colors-brand-primary-60);
759
+ --amplify-components-button-hover-background-color: var(--amplify-colors-brand-primary-10);
760
+ --amplify-components-button-hover-color: var(--amplify-colors-font-focus);
761
+ --amplify-components-button-color: var(--amplify-colors-font-primary);
762
+ --amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius);
763
+ --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
764
+ --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
765
+ --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
766
+ --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
767
+ --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
768
+ --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
769
+ --amplify-components-button-padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
770
+ --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-line-height);
771
+ --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
772
+ --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
773
+ --amplify-components-button-font-weight: var(--amplify-font-weights-bold);
774
+ --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
775
+ --amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
776
+ --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
777
+ --amplify-components-badge-small-padding-horizontal: var(--amplify-space-xs);
778
+ --amplify-components-badge-small-padding-vertical: var(--amplify-space-xxs);
779
+ --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs);
780
+ --amplify-components-badge-error-background-color: var(--amplify-colors-background-error);
781
+ --amplify-components-badge-error-color: var(--amplify-colors-font-error);
782
+ --amplify-components-badge-success-background-color: var(--amplify-colors-background-success);
783
+ --amplify-components-badge-success-color: var(--amplify-colors-font-success);
784
+ --amplify-components-badge-warning-background-color: var(--amplify-colors-background-warning);
785
+ --amplify-components-badge-warning-color: var(--amplify-colors-font-warning);
786
+ --amplify-components-badge-info-background-color: var(--amplify-colors-background-info);
787
+ --amplify-components-badge-info-color: var(--amplify-colors-font-info);
788
+ --amplify-components-badge-border-radius: var(--amplify-radii-xl);
789
+ --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary);
790
+ --amplify-components-badge-padding-horizontal: var(--amplify-space-small);
791
+ --amplify-components-badge-padding-vertical: var(--amplify-space-xs);
792
+ --amplify-components-badge-text-align: center;
793
+ --amplify-components-badge-font-size: var(--amplify-font-sizes-small);
794
+ --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
795
+ --amplify-components-badge-line-height: 1;
796
+ --amplify-components-badge-color: var(--amplify-colors-font-primary);
797
+ --amplify-components-alert-success-background-color: var(--amplify-colors-background-success);
798
+ --amplify-components-alert-success-color: var(--amplify-colors-font-success);
799
+ --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning);
800
+ --amplify-components-alert-warning-color: var(--amplify-colors-font-warning);
801
+ --amplify-components-alert-error-background-color: var(--amplify-colors-background-error);
802
+ --amplify-components-alert-error-color: var(--amplify-colors-font-error);
803
+ --amplify-components-alert-info-background-color: var(--amplify-colors-background-info);
804
+ --amplify-components-alert-info-color: var(--amplify-colors-font-info);
805
+ --amplify-components-alert-heading-font-weight: var(--amplify-font-weights-bold);
806
+ --amplify-components-alert-heading-font-size: var(--amplify-font-sizes-medium);
807
+ --amplify-components-alert-icon-size: var(--amplify-font-sizes-xl);
808
+ --amplify-components-alert-padding-inline: var(--amplify-space-medium);
809
+ --amplify-components-alert-padding-block: var(--amplify-space-small);
810
+ --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
811
+ --amplify-components-alert-color: var(--amplify-colors-font-primary);
812
+ --amplify-components-alert-justify-content: space-between;
813
+ --amplify-components-alert-align-items: center;
814
+ }
815
+
816
+ [data-amplify-theme] {
817
+ font-family: var(--amplify-fonts-default-static);
818
+ }
819
+
820
+ @supports (font-variation-settings: normal) {
821
+ [data-amplify-theme] {
822
+ font-family: var(--amplify-fonts-default-variable);
823
+ }
824
+ }
825
+ [class*=amplify] {
826
+ all: unset;
827
+ /* protect against external styles */
828
+ }
829
+
830
+ [data-amplify-theme] * {
831
+ box-sizing: border-box;
832
+ }
833
+
834
+ .sr-only {
835
+ position: absolute !important;
836
+ width: 1px !important;
837
+ height: 1px !important;
838
+ padding: 0 !important;
839
+ margin: -1px !important;
840
+ overflow: hidden !important;
841
+ clip: rect(0, 0, 0, 0) !important;
842
+ white-space: nowrap !important;
843
+ border-width: 0 !important;
844
+ }
845
+
846
+ .amplify-text {
847
+ color: var(--amplify-components-text-color);
848
+ display: block;
849
+ }
850
+ b.amplify-text,
851
+ em.amplify-text,
852
+ i.amplify-text,
853
+ span.amplify-text,
854
+ strong.amplify-text {
855
+ display: inline;
856
+ }
857
+
858
+ .amplify-text[data-truncate=true] {
859
+ display: inline-block;
860
+ max-width: 100%;
861
+ overflow: hidden;
862
+ text-overflow: ellipsis;
863
+ white-space: nowrap;
864
+ }
865
+ .amplify-text[data-variation=primary] {
866
+ color: var(--amplify-components-text-primary-color);
867
+ }
868
+ .amplify-text[data-variation=secondary] {
869
+ color: var(--amplify-components-text-secondary-color);
870
+ }
871
+ .amplify-text[data-variation=tertiary] {
872
+ color: var(--amplify-components-text-tertiary-color);
873
+ }
874
+ .amplify-text[data-variation=error] {
875
+ color: var(--amplify-components-text-error-color);
876
+ }
877
+ .amplify-text[data-variation=info] {
878
+ color: var(--amplify-components-text-info-color);
879
+ }
880
+ .amplify-text[data-variation=success] {
881
+ color: var(--amplify-components-text-success-color);
882
+ }
883
+ .amplify-text[data-variation=warning] {
884
+ color: var(--amplify-components-text-warning-color);
885
+ }
886
+
887
+ .amplify-badge {
888
+ color: var(--amplify-components-badge-color);
889
+ background-color: var(--amplify-components-badge-background-color);
890
+ border-radius: var(--amplify-components-badge-border-radius);
891
+ display: inline-flex;
892
+ font-size: var(--amplify-components-badge-font-size);
893
+ font-weight: var(--amplify-components-badge-font-weight);
894
+ padding: var(--amplify-components-badge-padding-vertical) var(--amplify-components-badge-padding-horizontal);
895
+ text-align: var(--amplify-components-badge-text-align);
896
+ line-height: var(--amplify-components-badge-line-height);
897
+ }
898
+ .amplify-badge[data-variation=info] {
899
+ color: var(--amplify-components-badge-info-color);
900
+ background-color: var(--amplify-components-badge-info-background-color);
901
+ }
902
+ .amplify-badge[data-variation=error] {
903
+ color: var(--amplify-components-badge-error-color);
904
+ background-color: var(--amplify-components-badge-error-background-color);
905
+ }
906
+ .amplify-badge[data-variation=warning] {
907
+ color: var(--amplify-components-badge-warning-color);
908
+ background-color: var(--amplify-components-badge-warning-background-color);
909
+ }
910
+ .amplify-badge[data-variation=success] {
911
+ color: var(--amplify-components-badge-success-color);
912
+ background-color: var(--amplify-components-badge-success-background-color);
913
+ }
914
+ .amplify-badge[data-size=small] {
915
+ font-size: var(--amplify-components-badge-small-font-size);
916
+ padding: var(--amplify-components-badge-small-padding-vertical) var(--amplify-components-badge-small-padding-horizontal);
917
+ }
918
+ .amplify-badge[data-size=large] {
919
+ font-size: var(--amplify-components-badge-large-font-size);
920
+ padding: var(--amplify-components-badge-large-padding-vertical) var(--amplify-components-badge-large-padding-horizontal);
921
+ }
922
+
923
+ /*
924
+ * Button base styles
925
+ */
926
+ .amplify-button {
927
+ display: inline-flex;
928
+ justify-content: center;
929
+ align-items: center;
930
+ border-radius: var(--amplify-components-button-border-radius);
931
+ box-sizing: border-box;
932
+ font-weight: var(--amplify-components-button-font-weight);
933
+ transition: all var(--amplify-components-button-transition-duration);
934
+ border-width: var(--amplify-components-button-border-width);
935
+ border-style: var(--amplify-components-button-border-style);
936
+ border-color: var(--amplify-components-button-border-color);
937
+ border-radius: var(--amplify-components-button-border-radius);
938
+ color: var(--amplify-components-button-color);
939
+ font-size: var(--amplify-components-button-font-size);
940
+ line-height: var(--amplify-components-button-line-height);
941
+ -webkit-padding-before: var(--amplify-components-button-padding-block-start);
942
+ padding-block-start: var(--amplify-components-button-padding-block-start);
943
+ -webkit-padding-after: var(--amplify-components-button-padding-block-end);
944
+ padding-block-end: var(--amplify-components-button-padding-block-end);
945
+ -webkit-padding-start: var(--amplify-components-button-padding-inline-start);
946
+ padding-inline-start: var(--amplify-components-button-padding-inline-start);
947
+ -webkit-padding-end: var(--amplify-components-button-padding-inline-end);
948
+ padding-inline-end: var(--amplify-components-button-padding-inline-end);
949
+ -webkit-user-select: none;
950
+ -moz-user-select: none;
951
+ -ms-user-select: none;
952
+ user-select: none;
953
+ cursor: pointer;
954
+ }
955
+ .amplify-button:hover {
956
+ background-color: var(--amplify-components-button-hover-background-color);
957
+ border-color: var(--amplify-components-button-hover-border-color);
958
+ color: var(--amplify-components-button-hover-color);
959
+ }
960
+ .amplify-button:focus {
961
+ background-color: var(--amplify-components-button-hover-background-color);
962
+ border-color: var(--amplify-components-button-focus-border-color);
963
+ color: var(--amplify-components-button-focus-color);
964
+ box-shadow: var(--amplify-components-button-focus-box-shadow);
965
+ }
966
+ .amplify-button:active {
967
+ background-color: var(--amplify-components-button-active-background-color);
968
+ border-color: var(--amplify-components-button-active-border-color);
969
+ color: var(--amplify-components-button-active-color);
970
+ }
971
+ .amplify-button[disabled] {
972
+ background-color: var(--amplify-components-button-disabled-background-color);
973
+ border-color: var(--amplify-components-button-disabled-border-color);
974
+ color: var(--amplify-components-button-disabled-color);
975
+ cursor: not-allowed;
976
+ }
977
+ .amplify-button[data-loading=true] {
978
+ background-color: var(--amplify-components-button-loading-background-color);
979
+ border-color: var(--amplify-components-button-loading-border-color);
980
+ color: var(--amplify-components-button-loading-color);
981
+ }
982
+ .amplify-button[data-fullwidth=true] {
983
+ width: 100%;
984
+ }
985
+ .amplify-button[data-variation=menu] {
986
+ border-width: var(--amplify-components-button-menu-border-width);
987
+ background-color: var(--amplify-components-button-menu-background-color);
988
+ justify-content: var(--amplify-components-button-menu-justify-content);
989
+ }
990
+ .amplify-button[data-variation=menu]:hover {
991
+ color: var(--amplify-components-button-menu-hover-color);
992
+ background-color: var(--amplify-components-button-menu-hover-background-color);
993
+ }
994
+ .amplify-button[data-variation=menu]:focus {
995
+ box-shadow: none;
996
+ color: var(--amplify-components-button-menu-focus-color);
997
+ background-color: var(--amplify-components-button-menu-focus-background-color);
998
+ }
999
+ .amplify-button[data-variation=menu]:active {
1000
+ color: var(--amplify-components-button-menu-active-color);
1001
+ background-color: var(--amplify-components-button-menu-active-background-color);
1002
+ }
1003
+ .amplify-button[data-variation=menu][disabled] {
1004
+ color: var(--amplify-components-button-menu-disabled-color);
1005
+ }
1006
+ .amplify-button[data-variation=primary] {
1007
+ border-width: var(--amplify-components-button-primary-border-width);
1008
+ background-color: var(--amplify-components-button-primary-background-color);
1009
+ border-color: var(--amplify-components-button-primary-border-color);
1010
+ color: var(--amplify-components-button-primary-color);
1011
+ }
1012
+ .amplify-button[data-variation=primary]:hover {
1013
+ background-color: var(--amplify-components-button-primary-hover-background-color);
1014
+ border-color: var(--amplify-components-button-primary-hover-border-color);
1015
+ color: var(--amplify-components-button-primary-hover-color);
1016
+ }
1017
+ .amplify-button[data-variation=primary]:focus {
1018
+ background-color: var(--amplify-components-button-primary-focus-background-color);
1019
+ border-color: var(--amplify-components-button-primary-focus-border-color);
1020
+ color: var(--amplify-components-button-primary-focus-color);
1021
+ box-shadow: var(--amplify-components-button-primary-focus-box-shadow);
1022
+ }
1023
+ .amplify-button[data-variation=primary]:active {
1024
+ background-color: var(--amplify-components-button-primary-active-background-color);
1025
+ border-color: var(--amplify-components-button-primary-active-border-color);
1026
+ color: var(--amplify-components-button-primary-active-color);
1027
+ }
1028
+ .amplify-button[data-variation=primary][data-loading=true] {
1029
+ background-color: var(--amplify-components-button-primary-loading-background-color);
1030
+ border-color: var(--amplify-components-button-primary-loading-border-color);
1031
+ color: var(--amplify-components-button-primary-loading-color);
1032
+ }
1033
+ .amplify-button[data-variation=primary][disabled] {
1034
+ background-color: var(--amplify-components-button-primary-disabled-background-color);
1035
+ border-color: var(--amplify-components-button-primary-disabled-border-color);
1036
+ color: var(--amplify-components-button-primary-disabled-color);
1037
+ }
1038
+ .amplify-button[data-variation=link] {
1039
+ border-width: var(--amplify-components-button-link-border-width);
1040
+ background-color: var(--amplify-components-button-link-background-color);
1041
+ color: var(--amplify-components-button-link-color);
1042
+ }
1043
+ .amplify-button[data-variation=link]:hover {
1044
+ background-color: var(--amplify-components-button-link-hover-background-color);
1045
+ border-color: var(--amplify-components-button-link-hover-border-color);
1046
+ color: var(--amplify-components-button-link-hover-color);
1047
+ }
1048
+ .amplify-button[data-variation=link]:focus {
1049
+ background-color: var(--amplify-components-button-link-focus-background-color);
1050
+ border-color: var(--amplify-components-button-link-focus-border-color);
1051
+ color: var(--amplify-components-button-link-focus-color);
1052
+ box-shadow: var(--amplify-components-button-link-focus-box-shadow);
1053
+ }
1054
+ .amplify-button[data-variation=link]:active {
1055
+ background-color: var(--amplify-components-button-link-active-background-color);
1056
+ border-color: var(--amplify-components-button-link-active-border-color);
1057
+ color: var(--amplify-components-button-link-active-color);
1058
+ }
1059
+ .amplify-button[data-variation=link][disabled] {
1060
+ background-color: var(--amplify-components-button-link-disabled-background-color);
1061
+ border-color: var(--amplify-components-button-link-disabled-border-color);
1062
+ color: var(--amplify-components-button-link-disabled-color);
1063
+ text-decoration: none;
1064
+ }
1065
+ .amplify-button[data-variation=link][data-loading=true] {
1066
+ background-color: var(--amplify-components-button-link-loading-background-color);
1067
+ border-color: var(--amplify-components-button-link-loading-border-color);
1068
+ color: var(--amplify-components-button-link-loading-color);
1069
+ text-decoration: none;
1070
+ }
1071
+ .amplify-button[data-size=small] {
1072
+ font-size: var(--amplify-components-button-small-font-size);
1073
+ -webkit-padding-before: var(--amplify-components-button-small-padding-block-start);
1074
+ padding-block-start: var(--amplify-components-button-small-padding-block-start);
1075
+ -webkit-padding-after: var(--amplify-components-button-small-padding-block-end);
1076
+ padding-block-end: var(--amplify-components-button-small-padding-block-end);
1077
+ -webkit-padding-start: var(--amplify-components-button-small-padding-inline-start);
1078
+ padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
1079
+ -webkit-padding-end: var(--amplify-components-button-small-padding-inline-end);
1080
+ padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
1081
+ }
1082
+ .amplify-button[data-size=large] {
1083
+ font-size: var(--amplify-components-button-large-font-size);
1084
+ -webkit-padding-before: var(--amplify-components-button-large-padding-block-start);
1085
+ padding-block-start: var(--amplify-components-button-large-padding-block-start);
1086
+ -webkit-padding-after: var(--amplify-components-button-large-padding-block-end);
1087
+ padding-block-end: var(--amplify-components-button-large-padding-block-end);
1088
+ -webkit-padding-start: var(--amplify-components-button-large-padding-inline-start);
1089
+ padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
1090
+ -webkit-padding-end: var(--amplify-components-button-large-padding-inline-end);
1091
+ padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
1092
+ }
1093
+
1094
+ @media (prefers-reduced-motion: reduce) {
1095
+ .amplify-button {
1096
+ transition: none;
1097
+ }
1098
+ }
1099
+ .amplify-field__description {
1100
+ color: var(--amplify-components-fieldmessages-description-color);
1101
+ font-style: var(--amplify-components-fieldmessages-description-font-style);
1102
+ font-size: var(--amplify-components-fieldmessages-description-font-size);
1103
+ }
1104
+
1105
+ .amplify-field__error-message {
1106
+ color: var(--amplify-components-fieldmessages-error-color);
1107
+ font-size: var(--amplify-components-fieldmessages-error-font-size);
1108
+ }
1109
+
1110
+ .amplify-heading {
1111
+ color: var(--amplify-components-heading-color);
1112
+ line-height: var(--amplify-components-heading-line-height);
1113
+ display: block;
1114
+ }
1115
+
1116
+ h1.amplify-heading {
1117
+ font-size: var(--amplify-components-heading-1-font-size);
1118
+ font-weight: var(--amplify-components-heading-1-font-weight);
1119
+ }
1120
+
1121
+ h2.amplify-heading {
1122
+ font-size: var(--amplify-components-heading-2-font-size);
1123
+ font-weight: var(--amplify-components-heading-2-font-weight);
1124
+ }
1125
+
1126
+ h3.amplify-heading {
1127
+ font-size: var(--amplify-components-heading-3-font-size);
1128
+ font-weight: var(--amplify-components-heading-3-font-weight);
1129
+ }
1130
+
1131
+ h4.amplify-heading {
1132
+ font-size: var(--amplify-components-heading-4-font-size);
1133
+ font-weight: var(--amplify-components-heading-4-font-weight);
1134
+ }
1135
+
1136
+ h5.amplify-heading {
1137
+ font-size: var(--amplify-components-heading-5-font-size);
1138
+ font-weight: var(--amplify-components-heading-5-font-weight);
1139
+ }
1140
+
1141
+ h6.amplify-heading {
1142
+ font-size: var(--amplify-components-heading-6-font-size);
1143
+ font-weight: var(--amplify-components-heading-6-font-weight);
1144
+ }
1145
+
1146
+ /*
1147
+ * Icon base styles
1148
+ */
1149
+ .amplify-icon {
1150
+ display: inline-block;
1151
+ vertical-align: middle;
1152
+ fill: currentColor;
1153
+ height: var(--amplify-components-icon-height);
1154
+ line-height: var(--amplify-components-icon-line-height);
1155
+ }
1156
+ .amplify-icon > svg {
1157
+ height: var(--amplify-components-icon-height);
1158
+ width: var(--amplify-components-icon-height);
1159
+ }
1160
+
1161
+ .amplify-image {
1162
+ height: var(--amplify-components-image-height);
1163
+ max-width: var(--amplify-components-image-max-width);
1164
+ -o-object-fit: var(--amplify-components-image-object-fit);
1165
+ object-fit: var(--amplify-components-image-object-fit);
1166
+ -o-object-position: var(--amplify-components-image-object-position);
1167
+ object-position: var(--amplify-components-image-object-position);
1168
+ }
1169
+
1170
+ .amplify-link {
1171
+ color: var(--amplify-components-link-color);
1172
+ -webkit-text-decoration: var(--amplify-components-link-text-decoration);
1173
+ text-decoration: var(--amplify-components-link-text-decoration);
1174
+ cursor: pointer;
1175
+ }
1176
+ .amplify-link:active {
1177
+ color: var(--amplify-components-link-active-color);
1178
+ -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
1179
+ text-decoration: var(--amplify-components-link-active-text-decoration);
1180
+ }
1181
+ .amplify-link:focus {
1182
+ color: var(--amplify-components-link-focus-color);
1183
+ -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
1184
+ text-decoration: var(--amplify-components-link-focus-text-decoration);
1185
+ }
1186
+ .amplify-link:hover {
1187
+ color: var(--amplify-components-link-hover-color);
1188
+ -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
1189
+ text-decoration: var(--amplify-components-link-hover-text-decoration);
1190
+ }
1191
+ .amplify-link:visited {
1192
+ color: var(--amplify-components-link-visited-color);
1193
+ -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
1194
+ text-decoration: var(--amplify-components-link-visited-text-decoration);
1195
+ }
1196
+ .amplify-link[data-size=small] {
1197
+ font-size: var(--amplify-components-link-small-font-size);
1198
+ }
1199
+ .amplify-link[data-size=large] {
1200
+ font-size: var(--amplify-components-link-large-font-size);
1201
+ }
1202
+
1203
+ .amplify-loader {
1204
+ width: var(--amplify-components-loader-width);
1205
+ height: var(--amplify-components-loader-height);
1206
+ fill: none;
1207
+ stroke: var(--amplify-components-loader-stroke-empty);
1208
+ }
1209
+ .amplify-loader circle:last-of-type {
1210
+ transform-origin: center center;
1211
+ -webkit-animation-name: amplify-loader-circular;
1212
+ animation-name: amplify-loader-circular;
1213
+ -webkit-animation-timing-function: linear;
1214
+ animation-timing-function: linear;
1215
+ -webkit-animation-iteration-count: infinite;
1216
+ animation-iteration-count: infinite;
1217
+ -webkit-animation-duration: var(--amplify-components-loader-animation-duration);
1218
+ animation-duration: var(--amplify-components-loader-animation-duration);
1219
+ stroke: var(--amplify-components-loader-stroke-filled);
1220
+ stroke-linecap: var(--amplify-components-loader-stroke-linecap);
1221
+ }
1222
+ @media (prefers-reduced-motion) {
1223
+ .amplify-loader circle:last-of-type {
1224
+ -webkit-animation: none;
1225
+ animation: none;
1226
+ stroke-dasharray: 100% 200%;
1227
+ stroke-dashoffset: 50%;
1228
+ }
1229
+ }
1230
+ .amplify-loader[data-size=small] {
1231
+ width: var(--amplify-components-loader-small-width);
1232
+ height: var(--amplify-components-loader-small-height);
1233
+ }
1234
+ .amplify-loader[data-size=large] {
1235
+ width: var(--amplify-components-loader-large-width);
1236
+ height: var(--amplify-components-loader-large-height);
1237
+ }
1238
+ .amplify-loader line:last-of-type {
1239
+ stroke: var(--amplify-components-loader-linear-stroke-filled);
1240
+ stroke-dasharray: 50% 200%;
1241
+ -webkit-animation-name: amplify-loader-linear;
1242
+ animation-name: amplify-loader-linear;
1243
+ -webkit-animation-duration: var(--amplify-components-loader-linear-animation-duration);
1244
+ animation-duration: var(--amplify-components-loader-linear-animation-duration);
1245
+ -webkit-animation-timing-function: linear;
1246
+ animation-timing-function: linear;
1247
+ -webkit-animation-iteration-count: infinite;
1248
+ animation-iteration-count: infinite;
1249
+ }
1250
+ @media (prefers-reduced-motion) {
1251
+ .amplify-loader line:last-of-type {
1252
+ -webkit-animation: none;
1253
+ animation: none;
1254
+ stroke-dashoffset: -50%;
1255
+ }
1256
+ }
1257
+ .amplify-loader[data-variation=linear] {
1258
+ width: var(--amplify-components-loader-linear-width);
1259
+ min-width: var(--amplify-components-loader-linear-min-width);
1260
+ height: var(--amplify-components-loader-linear-height);
1261
+ stroke: var(--amplify-components-loader-linear-stroke-empty);
1262
+ stroke-width: var(--amplify-components-loader-linear-stroke-width);
1263
+ stroke-linecap: var(--amplify-components-loader-linear-stroke-linecap);
1264
+ }
1265
+ .amplify-loader[data-variation=linear][data-size=small] {
1266
+ height: var(--amplify-components-loader-linear-small-height);
1267
+ stroke-width: var(--amplify-components-loader-linear-small-stroke-width);
1268
+ }
1269
+ .amplify-loader[data-variation=linear][data-size=large] {
1270
+ height: var(--amplify-components-loader-linear-large-height);
1271
+ stroke-width: var(--amplify-components-loader-linear-large-stroke-width);
1272
+ }
1273
+
1274
+ @-webkit-keyframes amplify-loader-circular {
1275
+ 0% {
1276
+ stroke-dasharray: 100% 200%;
1277
+ transform: rotate(120deg);
1278
+ }
1279
+ 50% {
1280
+ stroke-dasharray: 20% 400%;
1281
+ }
1282
+ 100% {
1283
+ stroke-dasharray: 100% 200%;
1284
+ transform: rotate(480deg);
1285
+ }
1286
+ }
1287
+
1288
+ @keyframes amplify-loader-circular {
1289
+ 0% {
1290
+ stroke-dasharray: 100% 200%;
1291
+ transform: rotate(120deg);
1292
+ }
1293
+ 50% {
1294
+ stroke-dasharray: 20% 400%;
1295
+ }
1296
+ 100% {
1297
+ stroke-dasharray: 100% 200%;
1298
+ transform: rotate(480deg);
1299
+ }
1300
+ }
1301
+ @-webkit-keyframes amplify-loader-linear {
1302
+ 0% {
1303
+ stroke-dashoffset: 200%;
1304
+ }
1305
+ 100% {
1306
+ stroke-dashoffset: -50%;
1307
+ }
1308
+ }
1309
+ @keyframes amplify-loader-linear {
1310
+ 0% {
1311
+ stroke-dashoffset: 200%;
1312
+ }
1313
+ 100% {
1314
+ stroke-dashoffset: -50%;
1315
+ }
1316
+ }
1317
+ .amplify-placeholder {
1318
+ -webkit-animation-direction: alternate;
1319
+ animation-direction: alternate;
1320
+ -webkit-animation-duration: var(--amplify-components-placeholder-transition-duration);
1321
+ animation-duration: var(--amplify-components-placeholder-transition-duration);
1322
+ -webkit-animation-iteration-count: infinite;
1323
+ animation-iteration-count: infinite;
1324
+ -webkit-animation-name: amplify-placeholder-loading;
1325
+ animation-name: amplify-placeholder-loading;
1326
+ border-radius: var(--amplify-components-placeholder-border-radius);
1327
+ height: var(--amplify-components-placeholder-default-height);
1328
+ width: 100%;
1329
+ display: block;
1330
+ }
1331
+ .amplify-placeholder[data-size=small] {
1332
+ height: var(--amplify-components-placeholder-small-height);
1333
+ }
1334
+ .amplify-placeholder[data-size=large] {
1335
+ height: var(--amplify-components-placeholder-large-height);
1336
+ }
1337
+
1338
+ @-webkit-keyframes amplify-placeholder-loading {
1339
+ 0% {
1340
+ background-color: var(--amplify-components-placeholder-start-color);
1341
+ }
1342
+ 100% {
1343
+ background-color: var(--amplify-components-placeholder-end-color);
1344
+ }
1345
+ }
1346
+
1347
+ @keyframes amplify-placeholder-loading {
1348
+ 0% {
1349
+ background-color: var(--amplify-components-placeholder-start-color);
1350
+ }
1351
+ 100% {
1352
+ background-color: var(--amplify-components-placeholder-end-color);
1353
+ }
1354
+ }
1355
+ @media (prefers-reduced-motion: reduce) {
1356
+ .amplify-placeholder {
1357
+ -webkit-animation: none;
1358
+ animation: none;
1359
+ background-color: var(--amplify-components-placeholder-end-color);
1360
+ }
1361
+ }
1362
+ .amplify-flex {
1363
+ align-content: var(--amplify-components-flex-align-content);
1364
+ align-items: var(--amplify-components-flex-align-items);
1365
+ display: flex;
1366
+ flex-wrap: var(--amplify-components-flex-flex-wrap);
1367
+ gap: var(--amplify-components-flex-gap);
1368
+ justify-content: var(--amplify-components-flex-justify-content);
1369
+ }
1370
+
1371
+ .amplify-grid {
1372
+ display: grid;
1373
+ }
1374
+
1375
+ .amplify-scrollview {
1376
+ display: block;
1377
+ overflow: scroll;
1378
+ }
1379
+ .amplify-scrollview[data-orientation=horizontal] {
1380
+ overflow-x: scroll;
1381
+ overflow-y: initial;
1382
+ }
1383
+ .amplify-scrollview[data-orientation=vertical] {
1384
+ overflow-x: initial;
1385
+ overflow-y: scroll;
1386
+ }
1387
+
1388
+ .amplify-alert {
1389
+ align-items: var(--amplify-components-alert-align-items);
1390
+ justify-content: var(--amplify-components-alert-justify-content);
1391
+ background-color: var(--amplify-components-alert-background-color);
1392
+ padding-block: var(--amplify-components-alert-padding-block);
1393
+ padding-inline: var(--amplify-components-alert-padding-inline);
1394
+ }
1395
+ .amplify-alert[data-variation=info] {
1396
+ color: var(--amplify-components-alert-info-color);
1397
+ background-color: var(--amplify-components-alert-info-background-color);
1398
+ }
1399
+ .amplify-alert[data-variation=error] {
1400
+ color: var(--amplify-components-alert-error-color);
1401
+ background-color: var(--amplify-components-alert-error-background-color);
1402
+ }
1403
+ .amplify-alert[data-variation=warning] {
1404
+ color: var(--amplify-components-alert-warning-color);
1405
+ background-color: var(--amplify-components-alert-warning-background-color);
1406
+ }
1407
+ .amplify-alert[data-variation=success] {
1408
+ color: var(--amplify-components-alert-success-color);
1409
+ background-color: var(--amplify-components-alert-success-background-color);
1410
+ }
1411
+
1412
+ .amplify-alert__icon {
1413
+ font-size: var(--amplify-components-alert-icon-size);
1414
+ }
1415
+
1416
+ .amplify-alert__heading {
1417
+ display: block;
1418
+ font-weight: var(--amplify-components-alert-heading-font-weight);
1419
+ font-size: var(--amplify-components-alert-heading-font-size);
1420
+ }
1421
+
1422
+ .amplify-alert__body {
1423
+ color: inherit;
1424
+ display: block;
1425
+ }
1426
+
1427
+ .amplify-button.amplify-alert__dismiss {
1428
+ color: inherit;
1429
+ }
1430
+
1431
+ /* Center by default */
1432
+ [data-amplify-authenticator] {
1433
+ display: grid;
1434
+ }
1435
+
1436
+ [data-amplify-authenticator][data-variation=modal] {
1437
+ display: grid;
1438
+ width: 100vw;
1439
+ height: 100vh;
1440
+ height: -webkit-fill-available;
1441
+ background-color: var(--amplify-colors-background-secondary, #e1e5e9);
1442
+ /* Override browser default `body { margin: 8px }` */
1443
+ position: fixed;
1444
+ top: 0;
1445
+ left: 0;
1446
+ /* Having a z-index at least "wins" by default */
1447
+ z-index: 1;
1448
+ /* top-align at the top 20% of the screen */
1449
+ box-sizing: border-box;
1450
+ padding-top: 20vh;
1451
+ align-content: flex-start;
1452
+ }
1453
+ @media (max-width: 30rem) {
1454
+ [data-amplify-authenticator][data-variation=modal] {
1455
+ overflow: auto;
1456
+ padding-top: 0;
1457
+ }
1458
+ }
1459
+
1460
+ [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
1461
+ max-height: 60vh;
1462
+ overflow-y: auto;
1463
+ /* Scroll shadows, adapted from https://codepen.io/chriscoyier/pen/YzXBYvL */
1464
+ background: linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) center bottom;
1465
+ background-repeat: no-repeat;
1466
+ background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
1467
+ background-attachment: local, local, scroll, scroll;
1468
+ }
1469
+ @media (max-width: 30rem) {
1470
+ [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
1471
+ max-height: unset;
1472
+ }
1473
+ }
1474
+
1475
+ /* Texture for modal */
1476
+ [data-amplify-authenticator][data-variation=modal]::before {
1477
+ position: absolute;
1478
+ width: 100%;
1479
+ height: 100%;
1480
+ content: "";
1481
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='texture' data-v-1d260e0e=''%3E%3Cfilter id='noise' data-v-1d260e0e=''%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch' data-v-1d260e0e=''%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0' data-v-1d260e0e=''%3E%3C/feColorMatrix%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' data-v-1d260e0e=''%3E%3C/rect%3E%3C/svg%3E");
1482
+ opacity: 0.35;
1483
+ filter: "contrast(120%) brightness(120%)";
1484
+ }
1485
+
1486
+ [data-amplify-authenticator] [data-amplify-container] {
1487
+ /* Fix z-index of texture being over the Authenticator */
1488
+ position: relative;
1489
+ place-self: center;
1490
+ width: 30rem;
1491
+ }
1492
+ @media (max-width: 30rem) {
1493
+ [data-amplify-authenticator] [data-amplify-container] {
1494
+ width: 100%;
1495
+ }
1496
+ }
1497
+
1498
+ [data-amplify-authenticator] [data-amplify-router] [data-amplify-footer] {
1499
+ padding-bottom: var(--amplify-space-medium);
1500
+ text-align: center;
1501
+ }
1502
+
1503
+ [data-amplify-authenticator] [data-amplify-router] {
1504
+ background-color: var(--amplify-colors-background-primary);
1505
+ box-shadow: var(--amplify-shadows-medium);
1506
+ }
1507
+
1508
+ [data-amplify-authenticator] [data-amplify-form] {
1509
+ padding: var(--amplify-space-xl);
1510
+ }
1511
+
1512
+ [data-amplify-authenticator] [data-state=inactive][role=tab] {
1513
+ background-color: var(--amplify-colors-background-secondary);
1514
+ }
1515
+
1516
+ /* Remove double-border between the password field & reveal button */
1517
+ [data-amplify-authenticator] .amplify-passwordfield .amplify-button:not(:focus) {
1518
+ border-left: none;
1519
+ }
1520
+
1521
+ [data-amplify-authenticator] .amplify-phonenumberfield .amplify-countrycodeselect {
1522
+ height: 100%;
1523
+ }
1524
+
1525
+ [data-amplify-authenticator] .amplify-phonenumberfield .amplify-select__wrapper {
1526
+ height: 100%;
1527
+ }
1528
+
1529
+ /* Remove double-border between the phone field & country select */
1530
+ [data-amplify-authenticator] .amplify-phonenumberfield select:not(:focus) {
1531
+ border-right: none;
1532
+ }
1533
+
1534
+ [data-amplify-authenticator] [data-or-container] {
1535
+ position: relative;
1536
+ color: gray;
1537
+ align-items: center;
1538
+ justify-content: center;
1539
+ padding: 1.5rem 0px;
1540
+ }
1541
+ [data-amplify-authenticator] [data-or-container] [data-or-line] {
1542
+ position: absolute;
1543
+ background: var(--amplify-colors-white);
1544
+ z-index: 1;
1545
+ padding: 0px 1.5rem;
1546
+ }
1547
+
1548
+ .amplify-card {
1549
+ background-color: var(--amplify-components-card-background-color);
1550
+ border-radius: var(--amplify-components-card-border-radius);
1551
+ border-width: var(--amplify-components-card-border-width);
1552
+ border-style: var(--amplify-components-card-border-style);
1553
+ border-color: var(--amplify-components-card-border-color);
1554
+ box-shadow: var(--amplify-components-card-box-shadow);
1555
+ display: inline-block;
1556
+ padding: var(--amplify-components-card-padding);
1557
+ }
1558
+ .amplify-card[data-variation=outlined] {
1559
+ background-color: var(--amplify-components-card-outlined-background-color);
1560
+ border-radius: var(--amplify-components-card-outlined-border-radius);
1561
+ border-width: var(--amplify-components-card-outlined-border-width);
1562
+ border-style: var(--amplify-components-card-outlined-border-style);
1563
+ border-color: var(--amplify-components-card-outlined-border-color);
1564
+ box-shadow: var(--amplify-components-card-outlined-box-shadow);
1565
+ }
1566
+ .amplify-card[data-variation=elevated] {
1567
+ background-color: var(--amplify-components-card-elevated-background-color);
1568
+ border-radius: var(--amplify-components-card-elevated-border-radius);
1569
+ border-width: var(--amplify-components-card-elevated-border-width);
1570
+ border-style: var(--amplify-components-card-elevated-border-style);
1571
+ border-color: var(--amplify-components-card-elevated-border-color);
1572
+ box-shadow: var(--amplify-components-card-elevated-box-shadow);
1573
+ }
1574
+
1575
+ .amplify-collection {
1576
+ flex-direction: column;
1577
+ }
1578
+
1579
+ .amplify-collection-search {
1580
+ flex-direction: row;
1581
+ justify-content: center;
1582
+ }
1583
+
1584
+ .amplify-collection-pagination {
1585
+ justify-content: center;
1586
+ }
1587
+
1588
+ .amplify-checkbox {
1589
+ cursor: var(--amplify-components-checkbox-cursor);
1590
+ align-items: var(--amplify-components-checkbox-align-items);
1591
+ gap: inherit;
1592
+ }
1593
+ .amplify-checkbox[data-disabled=true] {
1594
+ cursor: var(--amplify-components-checkbox-disabled-cursor);
1595
+ }
1596
+
1597
+ .amplify-checkbox__button {
1598
+ position: var(--amplify-components-checkbox-button-position);
1599
+ align-items: var(--amplify-components-checkbox-button-align-items);
1600
+ justify-content: var(--amplify-components-checkbox-button-justify-content);
1601
+ color: var(--amplify-components-checkbox-button-color);
1602
+ }
1603
+ .amplify-checkbox__button::before {
1604
+ content: "";
1605
+ display: inline-block;
1606
+ position: absolute;
1607
+ box-sizing: border-box;
1608
+ width: var(--amplify-components-checkbox-button-before-width);
1609
+ height: var(--amplify-components-checkbox-button-before-height);
1610
+ border-width: var(--amplify-components-checkbox-button-before-border-width);
1611
+ border-radius: var(--amplify-components-checkbox-button-before-border-radius);
1612
+ border-style: var(--amplify-components-checkbox-button-before-border-style);
1613
+ border-color: var(--amplify-components-checkbox-button-before-border-color);
1614
+ }
1615
+ .amplify-checkbox__button[data-focus=true]::before {
1616
+ outline-color: var(--amplify-components-checkbox-button-focus-outline-color);
1617
+ outline-style: var(--amplify-components-checkbox-button-focus-outline-style);
1618
+ outline-width: var(--amplify-components-checkbox-button-focus-outline-width);
1619
+ outline-offset: var(--amplify-components-checkbox-button-focus-outline-offset);
1620
+ border-color: var(--amplify-components-checkbox-button-focus-border-color);
1621
+ box-shadow: var(--amplify-components-checkbox-button-focus-box-shadow);
1622
+ }
1623
+ .amplify-checkbox__button[data-error=true]::before {
1624
+ border-color: var(--amplify-components-checkbox-button-error-border-color);
1625
+ }
1626
+ .amplify-checkbox__button[data-error=true][data-focus=true]::before {
1627
+ border-color: var(--amplify-components-checkbox-button-error-focus-border-color);
1628
+ box-shadow: var(--amplify-components-checkbox-button-error-focus-box-shadow);
1629
+ }
1630
+ .amplify-checkbox__button[data-disabled=true]::before {
1631
+ border-color: var(--amplify-components-checkbox-button-disabled-border-color);
1632
+ }
1633
+
1634
+ .amplify-checkbox__icon {
1635
+ background-color: var(--amplify-components-checkbox-icon-background-color);
1636
+ opacity: var(--amplify-components-checkbox-icon-opacity);
1637
+ transform: var(--amplify-components-checkbox-icon-transform);
1638
+ border-radius: var(--amplify-components-checkbox-icon-border-radius);
1639
+ transition-property: var(--amplify-components-checkbox-icon-transition-property);
1640
+ transition-duration: var(--amplify-components-checkbox-icon-transition-duration);
1641
+ transition-timing-function: var(--amplify-components-checkbox-icon-transition-timing-function);
1642
+ }
1643
+ .amplify-checkbox__icon[data-checked=true] {
1644
+ opacity: var(--amplify-components-checkbox-icon-checked-opacity);
1645
+ transform: var(--amplify-components-checkbox-icon-checked-transform);
1646
+ }
1647
+ .amplify-checkbox__icon[data-checked=true][data-disabled=true] {
1648
+ background-color: var(--amplify-components-checkbox-icon-checked-disabled-background-color);
1649
+ }
1650
+
1651
+ .amplify-checkbox__label[data-disabled=true] {
1652
+ color: var(--amplify-components-checkbox-label-disabled-color);
1653
+ }
1654
+
1655
+ .amplify-checkboxfield {
1656
+ align-content: var(--amplify-components-checkboxfield-align-content);
1657
+ align-items: var(--amplify-components-checkboxfield-align-items);
1658
+ flex-direction: var(--amplify-components-checkboxfield-flex-direction);
1659
+ justify-content: var(--amplify-components-checkboxfield-justify-content);
1660
+ }
1661
+
1662
+ .amplify-divider {
1663
+ border-color: var(--amplify-components-divider-border-color);
1664
+ border-style: var(--amplify-components-divider-border-style);
1665
+ border-width: 0;
1666
+ margin: 0;
1667
+ opacity: var(--amplify-components-divider-opacity);
1668
+ padding: 0;
1669
+ display: block;
1670
+ }
1671
+ .amplify-divider[aria-orientation=horizontal] {
1672
+ width: 100%;
1673
+ border-bottom-width: var(--amplify-components-divider-border-width);
1674
+ }
1675
+ .amplify-divider[aria-orientation=horizontal][data-size=small] {
1676
+ border-bottom-width: var(--amplify-components-divider-small-border-width);
1677
+ }
1678
+ .amplify-divider[aria-orientation=horizontal][data-size=large] {
1679
+ border-bottom-width: var(--amplify-components-divider-large-border-width);
1680
+ }
1681
+ .amplify-divider[aria-orientation=vertical] {
1682
+ border-left-width: var(--amplify-components-divider-border-width);
1683
+ }
1684
+ .amplify-divider[aria-orientation=vertical][data-size=small] {
1685
+ border-left-width: var(--amplify-components-divider-small-border-width);
1686
+ }
1687
+ .amplify-divider[aria-orientation=vertical][data-size=large] {
1688
+ border-left-width: var(--amplify-components-divider-large-border-width);
1689
+ }
1690
+
1691
+ .amplify-expander {
1692
+ display: block;
1693
+ background-color: var(--amplify-components-expander-background-color);
1694
+ border-radius: var(--amplify-components-expander-border-radius);
1695
+ box-shadow: var(--amplify-components-expander-box-shadow);
1696
+ width: var(--amplify-components-expander-width);
1697
+ }
1698
+
1699
+ .amplify-expander__item {
1700
+ display: block;
1701
+ overflow: hidden;
1702
+ box-shadow: var(--amplify-components-expander-item-box-shadow);
1703
+ }
1704
+ .amplify-expander__item:first-of-type {
1705
+ border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius);
1706
+ border-start-end-radius: var(--amplify-components-expander-item-border-start-end-radius);
1707
+ }
1708
+ @supports not (border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius)) {
1709
+ .amplify-expander__item:first-of-type {
1710
+ border-top-left-radius: var(--amplify-components-expander-item-border-top-left-radius);
1711
+ border-top-right-radius: var(--amplify-components-expander-item-border-top-right-radius);
1712
+ }
1713
+ }
1714
+ .amplify-expander__item:last-of-type {
1715
+ box-shadow: none;
1716
+ border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius);
1717
+ border-end-end-radius: var(--amplify-components-expander-item-border-end-end-radius);
1718
+ }
1719
+ @supports not (border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius)) {
1720
+ .amplify-expander__item:last-of-type {
1721
+ border-bottom-left-radius: var(--amplify-components-expander-item-border-bottom-left-radius);
1722
+ border-bottom-right-radius: var(--amplify-components-expander-item-border-bottom-right-radius);
1723
+ }
1724
+ }
1725
+ .amplify-expander__item:focus-within {
1726
+ box-shadow: var(--amplify-components-expander-item-focus-box-shadow);
1727
+ }
1728
+
1729
+ .amplify-expander__header {
1730
+ display: flex;
1731
+ box-shadow: var(--amplify-components-expander-header-box-shadow);
1732
+ }
1733
+
1734
+ .amplify-expander__trigger {
1735
+ flex: 1;
1736
+ display: flex;
1737
+ min-height: var(--amplify-components-expander-trigger-min-height);
1738
+ -webkit-padding-start: var(--amplify-components-expander-trigger-padding-inline-start);
1739
+ padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
1740
+ -webkit-padding-end: var(--amplify-components-expander-trigger-padding-inline-end);
1741
+ padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
1742
+ align-items: var(--amplify-components-expander-trigger-align-items);
1743
+ justify-content: var(--amplify-components-expander-trigger-justify-content);
1744
+ }
1745
+ .amplify-expander__trigger:hover {
1746
+ background-color: var(--amplify-components-expander-trigger-hover-background-color);
1747
+ }
1748
+
1749
+ .amplify-expander__content {
1750
+ display: block;
1751
+ -webkit-padding-start: var(--amplify-components-expander-content-padding-inline-start);
1752
+ padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
1753
+ -webkit-padding-end: var(--amplify-components-expander-content-padding-inline-end);
1754
+ padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
1755
+ }
1756
+ .amplify-expander__content[data-state=open] {
1757
+ -webkit-animation-name: amplify-expander-slide-down;
1758
+ animation-name: amplify-expander-slide-down;
1759
+ -webkit-animation-duration: var(--amplify-components-expander-content-open-animation-duration);
1760
+ animation-duration: var(--amplify-components-expander-content-open-animation-duration);
1761
+ -webkit-animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
1762
+ animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
1763
+ }
1764
+ .amplify-expander__content[data-state=closed] {
1765
+ -webkit-animation-name: amplify-expander-slide-up;
1766
+ animation-name: amplify-expander-slide-up;
1767
+ -webkit-animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
1768
+ animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
1769
+ -webkit-animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
1770
+ animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
1771
+ }
1772
+
1773
+ .amplify-expander__content__text {
1774
+ display: block;
1775
+ color: var(--amplify-components-expander-content-text-color);
1776
+ -webkit-padding-before: var(--amplify-components-expander-content-text-padding-block-start);
1777
+ padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
1778
+ -webkit-padding-after: var(--amplify-components-expander-content-text-padding-block-end);
1779
+ padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
1780
+ }
1781
+
1782
+ .amplify-expander__icon {
1783
+ transition-property: transform;
1784
+ transition-duration: var(--amplify-components-expander-icon-transition-duration);
1785
+ transition-timing-function: var(--amplify-components-expander-icon-transition-timing-function);
1786
+ }
1787
+ [data-state=open] .amplify-expander__icon {
1788
+ transform: rotate(180deg);
1789
+ }
1790
+
1791
+ @-webkit-keyframes amplify-expander-slide-down {
1792
+ from {
1793
+ height: 0;
1794
+ }
1795
+ to {
1796
+ height: auto;
1797
+ }
1798
+ }
1799
+
1800
+ @keyframes amplify-expander-slide-down {
1801
+ from {
1802
+ height: 0;
1803
+ }
1804
+ to {
1805
+ height: auto;
1806
+ }
1807
+ }
1808
+ @-webkit-keyframes amplify-expander-slide-up {
1809
+ from {
1810
+ height: auto;
1811
+ }
1812
+ to {
1813
+ height: 0;
1814
+ }
1815
+ }
1816
+ @keyframes amplify-expander-slide-up {
1817
+ from {
1818
+ height: auto;
1819
+ }
1820
+ to {
1821
+ height: 0;
1822
+ }
1823
+ }
1824
+ .amplify-select, .amplify-input, .amplify-textarea {
1825
+ box-sizing: border-box;
1826
+ color: var(--amplify-components-fieldcontrol-color);
1827
+ font-size: var(--amplify-components-fieldcontrol-font-size);
1828
+ line-height: var(--amplify-components-fieldcontrol-line-height);
1829
+ -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
1830
+ padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
1831
+ -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
1832
+ padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
1833
+ -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1834
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1835
+ -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
1836
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
1837
+ transition: all var(--amplify-components-fieldcontrol-transition-duration);
1838
+ width: 100%;
1839
+ border-color: var(--amplify-components-fieldcontrol-border-color);
1840
+ border-radius: var(--amplify-components-fieldcontrol-border-radius);
1841
+ border-style: var(--amplify-components-fieldcontrol-border-style);
1842
+ border-width: var(--amplify-components-fieldcontrol-border-width);
1843
+ outline-color: var(--amplify-components-fieldcontrol-outline-color);
1844
+ outline-style: var(--amplify-components-fieldcontrol-outline-style);
1845
+ outline-width: var(--amplify-components-fieldcontrol-outline-width);
1846
+ outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
1847
+ }
1848
+ .amplify-select:focus, .amplify-input:focus, .amplify-textarea:focus {
1849
+ border-color: var(--amplify-components-fieldcontrol-focus-border-color);
1850
+ box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
1851
+ }
1852
+ [data-size=small].amplify-select, [data-size=small].amplify-input, [data-size=small].amplify-textarea {
1853
+ font-size: var(--amplify-components-fieldcontrol-small-font-size);
1854
+ -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
1855
+ padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
1856
+ -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
1857
+ padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
1858
+ -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1859
+ padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1860
+ -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1861
+ padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1862
+ }
1863
+ [data-size=large].amplify-select, [data-size=large].amplify-input, [data-size=large].amplify-textarea {
1864
+ font-size: var(--amplify-components-fieldcontrol-large-font-size);
1865
+ -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
1866
+ padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
1867
+ -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
1868
+ padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
1869
+ -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1870
+ padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1871
+ -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1872
+ padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1873
+ }
1874
+ [aria-invalid=true].amplify-select, [aria-invalid=true].amplify-input, [aria-invalid=true].amplify-textarea {
1875
+ border-color: var(--amplify-components-fieldcontrol-error-border-color);
1876
+ }
1877
+ [aria-invalid=true].amplify-select:focus, [aria-invalid=true].amplify-input:focus, [aria-invalid=true].amplify-textarea:focus {
1878
+ border-color: var(--amplify-components-fieldcontrol-error-border-color);
1879
+ box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
1880
+ }
1881
+ [disabled].amplify-select, [disabled].amplify-input, [disabled].amplify-textarea {
1882
+ color: var(--amplify-components-fieldcontrol-disabled-color);
1883
+ cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
1884
+ border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
1885
+ background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
1886
+ }
1887
+ [data-variation=quiet].amplify-select, [data-variation=quiet].amplify-input, [data-variation=quiet].amplify-textarea {
1888
+ -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1889
+ border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1890
+ -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
1891
+ border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
1892
+ -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
1893
+ border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
1894
+ border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
1895
+ }
1896
+ [data-variation=quiet].amplify-select:focus, [data-variation=quiet].amplify-input:focus, [data-variation=quiet].amplify-textarea:focus {
1897
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
1898
+ box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
1899
+ }
1900
+ [data-variation=quiet][aria-invalid=true].amplify-select, [data-variation=quiet][aria-invalid=true].amplify-input, [data-variation=quiet][aria-invalid=true].amplify-textarea {
1901
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
1902
+ }
1903
+ [data-variation=quiet][aria-invalid=true].amplify-select:focus, [data-variation=quiet][aria-invalid=true].amplify-input:focus, [data-variation=quiet][aria-invalid=true].amplify-textarea:focus {
1904
+ box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
1905
+ }
1906
+
1907
+ .amplify-field {
1908
+ font-size: var(--amplify-components-field-font-size);
1909
+ gap: var(--amplify-components-field-gap);
1910
+ }
1911
+ .amplify-field[data-size=small] {
1912
+ font-size: var(--amplify-components-field-small-font-size);
1913
+ gap: var(--amplify-components-field-small-gap);
1914
+ }
1915
+ .amplify-field[data-size=large] {
1916
+ font-size: var(--amplify-components-field-large-font-size);
1917
+ gap: var(--amplify-components-field-large-gap);
1918
+ }
1919
+
1920
+ .amplify-label {
1921
+ color: var(--amplify-components-field-label-color);
1922
+ }
1923
+
1924
+ .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
1925
+ border-start-start-radius: 0;
1926
+ border-end-start-radius: 0;
1927
+ }
1928
+ @supports not (border-start-start-radius: 0) {
1929
+ .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
1930
+ border-top-left-radius: 0;
1931
+ border-bottom-left-radius: 0;
1932
+ }
1933
+ }
1934
+
1935
+ .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
1936
+ border-end-end-radius: 0;
1937
+ border-start-end-radius: 0;
1938
+ }
1939
+ @supports not (border-end-end-radius: 0) {
1940
+ .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
1941
+ border-bottom-right-radius: 0;
1942
+ border-top-right-radius: 0;
1943
+ }
1944
+ }
1945
+
1946
+ .amplify-field-group {
1947
+ gap: var(--amplify-components-fieldgroup-gap);
1948
+ }
1949
+ .amplify-field-group[data-orientation=horizontal] {
1950
+ flex-direction: row;
1951
+ }
1952
+ .amplify-field-group[data-orientation=vertical] {
1953
+ flex-direction: column;
1954
+ align-items: var(--amplify-components-fieldgroup-vertical-align-items);
1955
+ }
1956
+ .amplify-field-group__outer-start,
1957
+ .amplify-field-group__outer-end {
1958
+ display: flex;
1959
+ align-items: var(--amplify-components-fieldgroup-outer-align-items);
1960
+ }
1961
+ .amplify-field-group__outer-start .amplify-field-group__control,
1962
+ .amplify-field-group__outer-end .amplify-field-group__control {
1963
+ height: 100%;
1964
+ }
1965
+
1966
+ /**
1967
+ * Outer field group components
1968
+ */
1969
+ /**
1970
+ * Inner field group components
1971
+ */
1972
+ .amplify-field-group__field-wrapper {
1973
+ position: relative;
1974
+ width: 100%;
1975
+ }
1976
+ .amplify-field-group__field-wrapper[data-orientation=vertical] {
1977
+ width: -webkit-fit-content;
1978
+ width: -moz-fit-content;
1979
+ width: fit-content;
1980
+ }
1981
+
1982
+ .amplify-field-group__inner-end,
1983
+ .amplify-field-group__inner-start {
1984
+ position: absolute;
1985
+ top: 0;
1986
+ height: 100%;
1987
+ pointer-events: none;
1988
+ }
1989
+ .amplify-field-group__inner-end .amplify-button,
1990
+ .amplify-field-group__inner-start .amplify-button {
1991
+ pointer-events: all;
1992
+ height: 100%;
1993
+ }
1994
+
1995
+ .amplify-field-group__inner-end {
1996
+ right: 0;
1997
+ left: auto;
1998
+ }
1999
+
2000
+ .amplify-field-group__inner-start {
2001
+ right: auto;
2002
+ left: 0;
2003
+ }
2004
+
2005
+ html[dir=rtl] .amplify-field-group__inner-end {
2006
+ right: auto;
2007
+ left: 0;
2008
+ }
2009
+ html[dir=rtl] .amplify-field-group__inner-start {
2010
+ left: auto;
2011
+ right: 0;
2012
+ }
2013
+
2014
+ .amplify-field-group--has-inner-end .amplify-input {
2015
+ -webkit-padding-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
2016
+ padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
2017
+ }
2018
+
2019
+ .amplify-field-group--has-inner-start .amplify-input {
2020
+ -webkit-padding-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
2021
+ padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
2022
+ }
2023
+
2024
+ /**
2025
+ * Inner icon (non-button) component styling requires additional styling
2026
+ */
2027
+ .amplify-field-group__icon:not(.amplify-field-group__icon-button) {
2028
+ display: flex;
2029
+ -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2030
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
2031
+ -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-start);
2032
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
2033
+ flex-direction: column;
2034
+ justify-content: center;
2035
+ height: 100%;
2036
+ }
2037
+
2038
+ .amplify-menu-trigger {
2039
+ display: flex;
2040
+ justify-content: center;
2041
+ align-items: center;
2042
+ }
2043
+
2044
+ .amplify-menu-content {
2045
+ background-color: var(--amplify-components-menu-background-color);
2046
+ border-radius: var(--amplify-components-menu-border-radius);
2047
+ box-shadow: var(--amplify-components-menu-box-shadow);
2048
+ flex-direction: var(--amplify-components-menu-flex-direction);
2049
+ gap: var(--amplify-components-menu-gap);
2050
+ min-width: var(--amplify-components-menu-min-width);
2051
+ max-width: var(--amplify-components-menu-max-width);
2052
+ }
2053
+
2054
+ .amplify-menu-content__item {
2055
+ min-height: var(--amplify-components-menu-item-min-width);
2056
+ -webkit-padding-start: var(--amplify-components-menu-item-padding-inline-start);
2057
+ padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
2058
+ -webkit-padding-end: var(--amplify-components-menu-item-padding-inline-end);
2059
+ padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
2060
+ }
2061
+
2062
+ .amplify-menu-content__item:not(:first-child):not(:last-child) {
2063
+ border-radius: 0;
2064
+ }
2065
+
2066
+ .amplify-menu-content__item:first-child {
2067
+ border-end-end-radius: 0;
2068
+ border-end-start-radius: 0;
2069
+ }
2070
+ @supports not (border-end-end-radius: 0) {
2071
+ .amplify-menu-content__item:first-child {
2072
+ border-bottom-right-radius: 0;
2073
+ border-bottom-left-radius: 0;
2074
+ }
2075
+ }
2076
+
2077
+ .amplify-menu-content__item:last-child {
2078
+ border-start-end-radius: 0;
2079
+ border-start-start-radius: 0;
2080
+ }
2081
+ @supports not (border-end-end-radius: 0) {
2082
+ .amplify-menu-content__item:last-child {
2083
+ border-top-right-radius: 0;
2084
+ border-top-left-radius: 0;
2085
+ }
2086
+ }
2087
+
2088
+ .amplify-pagination__item-current, .amplify-pagination__item-button[data-variation=link] {
2089
+ height: var(--amplify-components-pagination-item-shared-height);
2090
+ min-width: var(--amplify-components-pagination-item-shared-min-width);
2091
+ border-radius: var(--amplify-components-pagination-item-shared-border-radius);
2092
+ }
2093
+
2094
+ .amplify-pagination {
2095
+ list-style-type: none;
2096
+ }
2097
+ .amplify-pagination li {
2098
+ margin-left: var(--amplify-components-pagination-item-container-margin-left);
2099
+ margin-right: var(--amplify-components-pagination-item-container-margin-right);
2100
+ }
2101
+
2102
+ .amplify-pagination__item-button[data-variation=link] {
2103
+ display: flex;
2104
+ align-items: center;
2105
+ justify-content: center;
2106
+ font-weight: initial;
2107
+ color: var(--amplify-components-pagination-button-color);
2108
+ -webkit-padding-start: var(--amplify-components-pagination-button-padding-inline-start);
2109
+ padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
2110
+ -webkit-padding-end: var(--amplify-components-pagination-button-padding-inline-end);
2111
+ padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
2112
+ transition-property: var(--amplify-components-pagination-button-transition-property);
2113
+ transition-duration: var(--amplify-components-pagination-button-transition-duration);
2114
+ }
2115
+ .amplify-pagination__item-button[data-variation=link]:hover {
2116
+ text-decoration: none;
2117
+ color: var(--amplify-components-pagination-button-hover-color);
2118
+ background-color: var(--amplify-components-pagination-button-hover-background-color);
2119
+ }
2120
+ .amplify-pagination__item-button[data-variation=link][disabled] {
2121
+ color: var(--amplify-components-pagination-button-disabled-color);
2122
+ pointer-events: none;
2123
+ }
2124
+
2125
+ .amplify-pagination__item-current {
2126
+ align-items: var(--amplify-components-pagination-current-align-items);
2127
+ justify-content: var(--amplify-components-pagination-current-justify-content);
2128
+ color: var(--amplify-components-pagination-current-color);
2129
+ font-size: var(--amplify-components-pagination-current-font-size);
2130
+ background-color: var(--amplify-components-pagination-current-background-color);
2131
+ }
2132
+
2133
+ .amplify-pagination__item-ellipsis {
2134
+ align-items: var(--amplify-components-pagination-ellipsis-align-items);
2135
+ justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
2136
+ -webkit-padding-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
2137
+ padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
2138
+ -webkit-padding-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
2139
+ padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
2140
+ }
2141
+
2142
+ .amplify-phonenumberfield select:not(:focus) {
2143
+ border-right: none;
2144
+ }
2145
+
2146
+ .amplify-rating {
2147
+ display: inline-flex;
2148
+ position: relative;
2149
+ text-align: left;
2150
+ font-size: var(--amplify-components-rating-default-size);
2151
+ line-height: var(--amplify-components-rating-default-size);
2152
+ }
2153
+ .amplify-rating[data-size=small] {
2154
+ font-size: var(--amplify-components-rating-small-size);
2155
+ line-height: var(--amplify-components-rating-small-size);
2156
+ }
2157
+ .amplify-rating[data-size=large] {
2158
+ font-size: var(--amplify-components-rating-large-size);
2159
+ line-height: var(--amplify-components-rating-large-size);
2160
+ }
2161
+ .amplify-rating .amplify-icon {
2162
+ font-size: unset;
2163
+ line-height: unset;
2164
+ height: 1em;
2165
+ }
2166
+
2167
+ .amplify-rating-filled {
2168
+ fill: currentColor;
2169
+ display: inline-block;
2170
+ flex-shrink: 0;
2171
+ width: 1em;
2172
+ height: 1em;
2173
+ }
2174
+
2175
+ .amplify-rating-icon-container {
2176
+ position: relative;
2177
+ height: 1em;
2178
+ width: 1em;
2179
+ }
2180
+
2181
+ .amplify-rating-label {
2182
+ position: absolute;
2183
+ overflow: hidden;
2184
+ height: 1em;
2185
+ width: 1em;
2186
+ }
2187
+
2188
+ .amplify-rating-icon {
2189
+ width: 1em;
2190
+ height: 1em;
2191
+ }
2192
+
2193
+ .amplify-rating-icon-filled {
2194
+ color: var(--amplify-components-rating-filled-color);
2195
+ }
2196
+
2197
+ .amplify-rating-icon-empty {
2198
+ color: var(--amplify-components-rating-empty-color);
2199
+ }
2200
+
2201
+ .amplify-radio {
2202
+ align-items: var(--amplify-components-radio-align-items);
2203
+ justify-content: var(--amplify-components-radio-justify-content);
2204
+ gap: inherit;
2205
+ }
2206
+
2207
+ .amplify-radio[data-disabled=true] {
2208
+ cursor: var(--amplify-components-radio-disabled-cursor);
2209
+ }
2210
+
2211
+ .amplify-radio__button {
2212
+ align-items: var(--amplify-components-radio-button-align-items);
2213
+ justify-content: var(--amplify-components-radio-button-justify-content);
2214
+ width: var(--amplify-components-radio-button-width);
2215
+ height: var(--amplify-components-radio-button-height);
2216
+ padding: var(--amplify-components-radio-button-padding);
2217
+ box-sizing: var(--amplify-components-radio-button-box-sizing);
2218
+ border-width: var(--amplify-components-radio-button-border-width);
2219
+ border-style: var(--amplify-components-radio-button-border-style);
2220
+ border-radius: var(--amplify-components-radio-button-border-radius);
2221
+ border-color: var(--amplify-components-radio-button-border-color);
2222
+ color: var(--amplify-components-radio-button-color);
2223
+ background-color: var(--amplify-components-radio-button-background-color);
2224
+ transition-property: var(--amplify-components-radio-button-transition-property);
2225
+ transition-duration: var(--amplify-components-radio-button-transition-duration);
2226
+ outline-color: var(--amplify-components-radio-button-outline-color);
2227
+ outline-style: var(--amplify-components-radio-button-outline-style);
2228
+ outline-width: var(--amplify-components-radio-button-outline-width);
2229
+ outline-offset: var(--amplify-components-radio-button-outline-offset);
2230
+ }
2231
+ .amplify-radio__button::before {
2232
+ content: "";
2233
+ display: inline-block;
2234
+ width: 100%;
2235
+ height: 100%;
2236
+ border-radius: var(--amplify-components-radio-button-before-border-radius);
2237
+ background-color: currentColor;
2238
+ border-radius: 50%;
2239
+ }
2240
+ .amplify-radio__button[data-size=small] {
2241
+ width: var(--amplify-components-radio-button-small-width);
2242
+ height: var(--amplify-components-radio-button-small-height);
2243
+ }
2244
+ .amplify-radio__button[data-size=large] {
2245
+ width: var(--amplify-components-radio-button-large-width);
2246
+ height: var(--amplify-components-radio-button-large-height);
2247
+ }
2248
+
2249
+ .amplify-radio__input:checked + .amplify-radio__button {
2250
+ color: var(--amplify-components-radio-button-checked-color);
2251
+ }
2252
+
2253
+ .amplify-radio__input:checked:disabled + .amplify-radio__button {
2254
+ color: var(--amplify-components-radio-button-checked-disabled-color);
2255
+ }
2256
+
2257
+ .amplify-radio__input:focus + .amplify-radio__button {
2258
+ border-color: var(--amplify-components-radio-button-focus-border-color);
2259
+ box-shadow: var(--amplify-components-radio-button-focus-box-shadow);
2260
+ }
2261
+
2262
+ .amplify-radio__input[aria-invalid=true] + .amplify-radio__button {
2263
+ border-color: var(--amplify-components-radio-button-error-border-color);
2264
+ }
2265
+
2266
+ .amplify-radio__input[aria-invalid=true]:focus + .amplify-radio__button {
2267
+ box-shadow: var(--amplify-components-radio-button-error-focus-box-shadow);
2268
+ }
2269
+
2270
+ .amplify-radio__input:disabled + .amplify-radio__button {
2271
+ border-color: var(--amplify-components-radio-button-disabled-border-color);
2272
+ background-color: var(--amplify-components-radio-button-disabled-background-color);
2273
+ }
2274
+
2275
+ .amplify-radio__label[data-disabled=true] {
2276
+ color: var(--amplify-components-radio-label-disabled-color);
2277
+ }
2278
+
2279
+ .amplify-radiogroup {
2280
+ gap: inherit;
2281
+ flex-direction: inherit;
2282
+ }
2283
+
2284
+ .amplify-radiogroupfield {
2285
+ flex-direction: column;
2286
+ }
2287
+
2288
+ .amplify-select__wrapper {
2289
+ display: var(--amplify-components-select-wrapper-display);
2290
+ position: var(--amplify-components-select-wrapper-position);
2291
+ cursor: var(--amplify-components-select-wrapper-cursor);
2292
+ }
2293
+
2294
+ .amplify-select__icon-wrapper {
2295
+ align-items: var(--amplify-components-select-icon-wrapper-align-items);
2296
+ position: var(--amplify-components-select-icon-wrapper-position);
2297
+ top: var(--amplify-components-select-icon-wrapper-top);
2298
+ right: var(--amplify-components-select-icon-wrapper-right);
2299
+ transform: var(--amplify-components-select-icon-wrapper-transform);
2300
+ pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
2301
+ }
2302
+
2303
+ .amplify-select {
2304
+ -webkit-padding-end: var(--amplify-components-select-padding-inline-end);
2305
+ padding-inline-end: var(--amplify-components-select-padding-inline-end);
2306
+ min-width: var(--amplify-components-select-min-width);
2307
+ white-space: var(--amplify-components-select-white-space);
2308
+ }
2309
+ .amplify-select[data-size=small] {
2310
+ min-width: var(--amplify-components-select-small-min-width);
2311
+ }
2312
+ .amplify-select[data-size=large] {
2313
+ min-width: var(--amplify-components-select-large-min-width);
2314
+ }
2315
+
2316
+ .amplify-selectfield {
2317
+ flex-direction: var(--amplify-components-selectfield-flex-direction);
2318
+ }
2319
+
2320
+ .amplify-sliderfield {
2321
+ flex-direction: column;
2322
+ }
2323
+
2324
+ .amplify-sliderfield__label {
2325
+ display: flex;
2326
+ justify-content: space-between;
2327
+ }
2328
+
2329
+ .amplify-sliderfield__root {
2330
+ position: relative;
2331
+ display: flex;
2332
+ align-items: center;
2333
+ -webkit-user-select: none;
2334
+ -moz-user-select: none;
2335
+ -ms-user-select: none;
2336
+ user-select: none;
2337
+ touch-action: none;
2338
+ box-sizing: content-box;
2339
+ padding-block: var(--amplify-components-sliderfield-padding-block);
2340
+ }
2341
+ .amplify-sliderfield__root[data-disabled] {
2342
+ cursor: not-allowed;
2343
+ }
2344
+ .amplify-sliderfield__root[data-orientation=horizontal] {
2345
+ height: var(--amplify-components-sliderfield-thumb-height);
2346
+ }
2347
+ .amplify-sliderfield__root[data-orientation=vertical] {
2348
+ flex-direction: column;
2349
+ width: var(--amplify-components-sliderfield-thumb-width);
2350
+ }
2351
+ [data-size=large] .amplify-sliderfield__root[data-orientation=horizontal] {
2352
+ height: var(--amplify-components-sliderfield-large-thumb-height);
2353
+ }
2354
+ [data-size=large] .amplify-sliderfield__root[data-orientation=vertical] {
2355
+ width: var(--amplify-components-sliderfield-large-thumb-height);
2356
+ }
2357
+ [data-size=small] .amplify-sliderfield__root[data-orientation=horizontal] {
2358
+ height: var(--amplify-components-sliderfield-small-thumb-height);
2359
+ }
2360
+ [data-size=small] .amplify-sliderfield__root[data-orientation=vertical] {
2361
+ width: var(--amplify-components-sliderfield-small-thumb-height);
2362
+ }
2363
+
2364
+ .amplify-sliderfield__track {
2365
+ position: relative;
2366
+ flex-grow: 1;
2367
+ border-radius: var(--amplify-components-sliderfield-track-border-radius);
2368
+ background-color: var(--amplify-components-sliderfield-track-background-color);
2369
+ }
2370
+ .amplify-sliderfield__track[data-orientation=horizontal] {
2371
+ height: var(--amplify-components-sliderfield-track-height);
2372
+ min-width: var(--amplify-components-sliderfield-track-min-width);
2373
+ }
2374
+ .amplify-sliderfield__track[data-orientation=vertical] {
2375
+ width: var(--amplify-components-sliderfield-track-height);
2376
+ min-height: var(--amplify-components-sliderfield-track-min-width);
2377
+ }
2378
+ [data-size=large] .amplify-sliderfield__track[data-orientation=vertical] {
2379
+ width: var(--amplify-components-sliderfield-large-track-height);
2380
+ }
2381
+ [data-size=large] .amplify-sliderfield__track[data-orientation=horizontal] {
2382
+ height: var(--amplify-components-sliderfield-large-track-height);
2383
+ }
2384
+ [data-size=small] .amplify-sliderfield__track[data-orientation=vertical] {
2385
+ width: var(--amplify-components-sliderfield-small-track-height);
2386
+ }
2387
+ [data-size=small] .amplify-sliderfield__track[data-orientation=horizontal] {
2388
+ height: var(--amplify-components-sliderfield-small-track-height);
2389
+ }
2390
+
2391
+ .amplify-sliderfield__range {
2392
+ position: absolute;
2393
+ border-radius: var(--amplify-components-sliderfield-range-border-radius);
2394
+ background-color: var(--amplify-components-sliderfield-range-background-color);
2395
+ }
2396
+ .amplify-sliderfield__range[data-disabled] {
2397
+ background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
2398
+ }
2399
+ .amplify-sliderfield__range[data-orientation=horizontal] {
2400
+ height: 100%;
2401
+ }
2402
+ .amplify-sliderfield__range[data-orientation=vertical] {
2403
+ width: 100%;
2404
+ }
2405
+
2406
+ .amplify-sliderfield__thumb {
2407
+ display: block;
2408
+ width: var(--amplify-components-sliderfield-thumb-width);
2409
+ height: var(--amplify-components-sliderfield-thumb-height);
2410
+ background-color: var(--amplify-components-sliderfield-thumb-background-color);
2411
+ box-shadow: var(--amplify-components-sliderfield-thumb-box-shadow);
2412
+ border-radius: var(--amplify-components-sliderfield-thumb-border-radius);
2413
+ border-width: var(--amplify-components-sliderfield-thumb-border-width);
2414
+ border-color: var(--amplify-components-sliderfield-thumb-border-color);
2415
+ border-style: var(--amplify-components-sliderfield-thumb-border-style);
2416
+ }
2417
+ .amplify-sliderfield__thumb:hover {
2418
+ background-color: var(--amplify-components-sliderfield-thumb-hover-background-color);
2419
+ border-color: var(--amplify-components-sliderfield-thumb-hover-border-color);
2420
+ }
2421
+ .amplify-sliderfield__thumb:focus {
2422
+ box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
2423
+ }
2424
+ .amplify-sliderfield__thumb[data-disabled] {
2425
+ background-color: var(--amplify-components-sliderfield-thumb-disabled-background-color);
2426
+ border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color);
2427
+ box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
2428
+ }
2429
+ [data-size=large] .amplify-sliderfield__thumb {
2430
+ width: var(--amplify-components-sliderfield-large-thumb-width);
2431
+ height: var(--amplify-components-sliderfield-large-thumb-height);
2432
+ }
2433
+ [data-size=small] .amplify-sliderfield__thumb {
2434
+ width: var(--amplify-components-sliderfield-small-thumb-width);
2435
+ height: var(--amplify-components-sliderfield-small-thumb-height);
2436
+ }
2437
+
2438
+ .amplify-stepperfield {
2439
+ flex-direction: var(--amplify-components-stepperfield-flex-direction);
2440
+ }
2441
+
2442
+ .amplify-stepperfield__button--decrease[data-invalid=true] {
2443
+ -webkit-border-end: none;
2444
+ border-inline-end: none;
2445
+ }
2446
+ [data-variation=quiet] .amplify-stepperfield__button--decrease {
2447
+ border-width: 0 0 var(--amplify-components-button-border-width) 0;
2448
+ border-radius: 0;
2449
+ }
2450
+
2451
+ .amplify-stepperfield__button--increase[data-invalid=true] {
2452
+ -webkit-border-start: none;
2453
+ border-inline-start: none;
2454
+ }
2455
+ [data-variation=quiet] .amplify-stepperfield__button--increase {
2456
+ border-width: 0 0 var(--amplify-components-button-border-width) 0;
2457
+ border-radius: 0;
2458
+ }
2459
+
2460
+ .amplify-stepperfield__input {
2461
+ -moz-appearance: textfield;
2462
+ text-align: var(--amplify-components-stepperfield-input-text-align);
2463
+ }
2464
+ .amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
2465
+ -webkit-appearance: none;
2466
+ margin: 0;
2467
+ }
2468
+ .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
2469
+ -webkit-border-start: none;
2470
+ border-inline-start: none;
2471
+ -webkit-border-end: none;
2472
+ border-inline-end: none;
2473
+ }
2474
+
2475
+ .amplify-switchfield {
2476
+ display: inline-block;
2477
+ }
2478
+ .amplify-switchfield[data-size=small] {
2479
+ font-size: var(--amplify-components-switchfield-small-font-size);
2480
+ }
2481
+ .amplify-switchfield[data-size=large] {
2482
+ font-size: var(--amplify-components-switchfield-large-font-size);
2483
+ }
2484
+
2485
+ .amplify-switch__wrapper {
2486
+ display: inline-flex;
2487
+ align-items: center;
2488
+ }
2489
+ .amplify-switch__wrapper[data-label-position=start] {
2490
+ flex-direction: row;
2491
+ }
2492
+ .amplify-switch__wrapper[data-label-position=end] {
2493
+ flex-direction: row-reverse;
2494
+ }
2495
+ .amplify-switch__wrapper[data-label-position=top] {
2496
+ flex-direction: column;
2497
+ }
2498
+ .amplify-switch__wrapper[data-label-position=bottom] {
2499
+ flex-direction: column-reverse;
2500
+ }
2501
+
2502
+ .amplify-switch-track {
2503
+ display: inline-flex;
2504
+ justify-content: flex-start;
2505
+ box-sizing: content-box;
2506
+ border-radius: var(--amplify-components-switchfield-track-border-radius);
2507
+ padding: var(--amplify-components-switchfield-track-padding);
2508
+ width: var(--amplify-components-switchfield-track-width);
2509
+ height: var(--amplify-components-switchfield-track-height);
2510
+ transition-duration: var(--amplify-components-switchfield-track-transition-duration);
2511
+ background-color: var(--amplify-components-switchfield-track-background-color);
2512
+ }
2513
+ .amplify-switch-track[data-checked=true] {
2514
+ background-color: var(--amplify-components-switchfield-track-checked-background-color);
2515
+ }
2516
+ .amplify-switch-track[data-disabled=true] {
2517
+ opacity: var(--amplify-components-switchfield-disabled-opacity);
2518
+ cursor: not-allowed;
2519
+ }
2520
+ .amplify-switch-track[data-focused=true] {
2521
+ box-shadow: var(--amplify-components-switchfield-focused-shadow);
2522
+ }
2523
+
2524
+ .amplify-switch-thumb {
2525
+ background-color: var(--amplify-components-switchfield-thumb-background-color);
2526
+ transition-duration: var(--amplify-components-switchfield-thumb-transition-duration);
2527
+ border-radius: var(--amplify-components-switchfield-thumb-border-radius);
2528
+ width: var(--amplify-components-switchfield-thumb-width);
2529
+ height: var(--amplify-components-switchfield-thumb-width);
2530
+ border-color: var(--amplify-components-switchfield-thumb-border-color);
2531
+ overflow-wrap: break-word;
2532
+ }
2533
+ .amplify-switch-thumb[data-checked=true] {
2534
+ transform: var(--amplify-components-switchfield-thumb-checked-transform);
2535
+ }
2536
+ .amplify-switch-thumb[data-disabled=true] {
2537
+ cursor: not-allowed;
2538
+ }
2539
+
2540
+ .amplify-switch-label {
2541
+ padding: var(--amplify-components-switchfield-label-padding);
2542
+ cursor: pointer;
2543
+ }
2544
+
2545
+ .amplify-table {
2546
+ /**
2547
+ * Default Table primitive stylings
2548
+ */
2549
+ border-collapse: var(--amplify-components-table-border-collapse);
2550
+ display: var(--amplify-components-table-display);
2551
+ width: var(--amplify-components-table-width);
2552
+ /**
2553
+ * Data attribute stylings
2554
+ */
2555
+ }
2556
+ .amplify-table .amplify-table__caption {
2557
+ caption-side: var(--amplify-components-table-caption-caption-side);
2558
+ color: var(--amplify-components-table-caption-color);
2559
+ display: var(--amplify-components-table-caption-display);
2560
+ font-size: var(--amplify-components-table-caption-font-size);
2561
+ text-align: var(--amplify-components-table-caption-text-align);
2562
+ word-break: var(--amplify-components-table-caption-word-break);
2563
+ }
2564
+ .amplify-table .amplify-table__head {
2565
+ display: var(--amplify-components-table-head-display);
2566
+ vertical-align: var(--amplify-components-table-head-vertical-align);
2567
+ }
2568
+ .amplify-table .amplify-table__body {
2569
+ display: var(--amplify-components-table-body-display);
2570
+ vertical-align: var(--amplify-components-table-body-vertical-align);
2571
+ }
2572
+ .amplify-table .amplify-table__foot {
2573
+ display: var(--amplify-components-table-foot-display);
2574
+ vertical-align: var(--amplify-components-table-foot-vertical-align);
2575
+ }
2576
+ .amplify-table .amplify-table__row {
2577
+ display: var(--amplify-components-table-row-display);
2578
+ vertical-align: var(--amplify-components-table-row-vertical-align);
2579
+ }
2580
+ .amplify-table .amplify-table__th {
2581
+ border-color: var(--amplify-components-table-header-border-color);
2582
+ border-style: var(--amplify-components-table-header-border-style);
2583
+ border-width: var(--amplify-components-table-header-border-width);
2584
+ color: var(--amplify-components-table-header-color);
2585
+ display: var(--amplify-components-table-header-display);
2586
+ font-size: var(--amplify-components-table-header-font-size);
2587
+ font-weight: var(--amplify-components-table-header-font-weight);
2588
+ padding: var(--amplify-components-table-header-padding);
2589
+ vertical-align: var(--amplify-components-table-header-vertical-align);
2590
+ }
2591
+ .amplify-table .amplify-table__td {
2592
+ border-color: var(--amplify-components-table-data-border-color);
2593
+ border-style: var(--amplify-components-table-data-border-style);
2594
+ border-width: var(--amplify-components-table-data-border-width);
2595
+ color: var(--amplify-components-table-data-color);
2596
+ display: var(--amplify-components-table-data-display);
2597
+ font-size: var(--amplify-components-table-data-font-size);
2598
+ font-weight: var(--amplify-components-table-data-font-weight);
2599
+ padding: var(--amplify-components-table-data-padding);
2600
+ vertical-align: var(--amplify-components-table-data-vertical-align);
2601
+ }
2602
+ .amplify-table:not([data-variation=bordered]) .amplify-table__td:not(:first-child),
2603
+ .amplify-table:not([data-variation=bordered]) .amplify-table__th:not(:first-child) {
2604
+ border-left: none;
2605
+ }
2606
+ .amplify-table:not([data-variation=bordered]) .amplify-table__td:not(:last-child),
2607
+ .amplify-table:not([data-variation=bordered]) .amplify-table__th:not(:last-child) {
2608
+ border-right: none;
2609
+ }
2610
+ .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
2611
+ background-color: var(--amplify-components-table-row-striped-background-color);
2612
+ }
2613
+ .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
2614
+ background-color: var(--amplify-components-table-row-hover-background-color);
2615
+ }
2616
+ .amplify-table[data-size=small] .amplify-table__caption {
2617
+ font-size: var(--amplify-components-table-caption-small-font-size);
2618
+ }
2619
+ .amplify-table[data-size=small] .amplify-table__th {
2620
+ font-size: var(--amplify-components-table-header-small-font-size);
2621
+ padding: var(--amplify-components-table-header-small-padding);
2622
+ }
2623
+ .amplify-table[data-size=small] .amplify-table__td {
2624
+ font-size: var(--amplify-components-table-data-small-font-size);
2625
+ padding: var(--amplify-components-table-data-small-padding);
2626
+ }
2627
+ .amplify-table[data-size=large] .amplify-table__caption {
2628
+ font-size: var(--amplify-components-table-caption-large-font-size);
2629
+ }
2630
+ .amplify-table[data-size=large] .amplify-table__th {
2631
+ font-size: var(--amplify-components-table-header-large-font-size);
2632
+ padding: var(--amplify-components-table-header-large-padding);
2633
+ }
2634
+ .amplify-table[data-size=large] .amplify-table__td {
2635
+ font-size: var(--amplify-components-table-data-large-font-size);
2636
+ padding: var(--amplify-components-table-data-large-padding);
2637
+ }
2638
+
2639
+ .amplify-tabs {
2640
+ background-color: var(--amplify-components-tabs-background-color);
2641
+ box-shadow: var(--amplify-components-tabs-box-shadow);
2642
+ border-width: 0 0 var(--amplify-components-tabs-border-width) 0;
2643
+ border-style: var(--amplify-components-tabs-border-style);
2644
+ border-color: var(--amplify-components-tabs-border-color);
2645
+ gap: var(--amplify-components-tabs-gap);
2646
+ }
2647
+ .amplify-tabs[data-indicator-position=top] {
2648
+ border-width: var(--amplify-components-tabs-border-width) 0 0 0;
2649
+ }
2650
+
2651
+ .amplify-tabs-item {
2652
+ background-color: var(--amplify-components-tabs-item-background-color);
2653
+ box-sizing: border-box;
2654
+ color: var(--amplify-components-tabs-item-color);
2655
+ font-size: var(--amplify-components-tabs-item-font-size);
2656
+ font-weight: var(--amplify-components-tabs-item-font-weight);
2657
+ padding: var(--amplify-components-tabs-item-padding-vertical) var(--amplify-components-tabs-item-padding-horizontal);
2658
+ text-align: var(--amplify-components-tabs-item-text-align);
2659
+ transition: all var(--amplify-components-tabs-item-transition-duration);
2660
+ border-width: 0 0 var(--amplify-components-tabs-item-border-width) 0;
2661
+ border-style: var(--amplify-components-tabs-item-border-style);
2662
+ border-color: var(--amplify-components-tabs-item-border-color);
2663
+ margin-bottom: calc(-1 * var(--amplify-components-tabs-item-border-width));
2664
+ }
2665
+ [data-indicator-position=top] > .amplify-tabs-item {
2666
+ border-width: var(--amplify-components-tabs-border-width) 0 0 0;
2667
+ margin-top: calc(-1 * var(--amplify-components-tabs-item-border-width));
2668
+ margin-bottom: 0;
2669
+ }
2670
+ .amplify-tabs-item[data-state=active] {
2671
+ color: var(--amplify-components-tabs-item-active-color);
2672
+ border-color: var(--amplify-components-tabs-item-active-border-color);
2673
+ background-color: var(--amplify-components-tabs-item-active-background-color);
2674
+ transition-property: none;
2675
+ }
2676
+ .amplify-tabs-item:hover {
2677
+ color: var(--amplify-components-tabs-item-hover-color);
2678
+ cursor: pointer;
2679
+ }
2680
+ .amplify-tabs-item:focus {
2681
+ color: var(--amplify-components-tabs-item-focus-color);
2682
+ }
2683
+ .amplify-tabs-item:focus-visible {
2684
+ outline: var(--amplify-components-tabs-item-border-width) var(--amplify-components-tabs-item-border-style) var(--amplify-components-tabs-item-border-color);
2685
+ }
2686
+ .amplify-tabs-item:active {
2687
+ color: var(--amplify-components-tabs-item-active-color);
2688
+ }
2689
+ .amplify-tabs-item[data-disabled] {
2690
+ background-color: var(--amplify-components-tabs-item-disabled-background-color);
2691
+ color: var(--amplify-components-tabs-item-disabled-color);
2692
+ cursor: not-allowed;
2693
+ }
2694
+ .amplify-tabs-item[data-spacing=equal] {
2695
+ flex: 1 1 0;
2696
+ }
2697
+ .amplify-tabs-item[data-spacing=relative] {
2698
+ flex-grow: 1;
2699
+ }
2700
+
2701
+ .amplify-textfield {
2702
+ flex-direction: column;
2703
+ }
2704
+
2705
+ .amplify-togglebutton[data-variation=primary], .amplify-togglebutton:hover, .amplify-togglebutton {
2706
+ border-color: var(--amplify-components-togglebutton-border-color);
2707
+ color: var(--amplify-components-togglebutton-color);
2708
+ }
2709
+
2710
+ .amplify-togglebutton:hover {
2711
+ background-color: var(--amplify-components-togglebutton-hover-background-color);
2712
+ }
2713
+ .amplify-togglebutton:focus {
2714
+ border-color: var(--amplify-components-togglebutton-focus-border-color);
2715
+ color: var(--amplify-components-togglebutton-focus-color);
2716
+ }
2717
+ .amplify-togglebutton:active {
2718
+ background-color: var(--amplify-components-togglebutton-active-background-color);
2719
+ }
2720
+ .amplify-togglebutton:disabled {
2721
+ background-color: var(--amplify-components-togglebutton-disabled-background-color);
2722
+ border-color: var(--amplify-components-togglebutton-disabled-border-color);
2723
+ color: var(--amplify-components-togglebutton-disabled-color);
2724
+ }
2725
+ .amplify-togglebutton[aria-pressed=true] {
2726
+ background-color: var(--amplify-components-togglebutton-pressed-background-color);
2727
+ color: var(--amplify-components-togglebutton-pressed-color);
2728
+ }
2729
+ .amplify-togglebutton[aria-pressed=true]:hover:not(:disabled) {
2730
+ background-color: var(--amplify-components-togglebutton-pressed-hover-background-color);
2731
+ }
2732
+ .amplify-togglebutton[data-variation=primary] {
2733
+ background-color: var(--amplify-components-togglebutton-primary-background-color);
2734
+ border-width: var(--amplify-components-togglebutton-primary-border-width);
2735
+ }
2736
+ .amplify-togglebutton[data-variation=primary]:focus {
2737
+ background-color: var(--amplify-components-togglebutton-primary-focus-background-color);
2738
+ border-color: var(--amplify-components-togglebutton-primary-focus-border-color);
2739
+ color: var(--amplify-components-togglebutton-primary-focus-color);
2740
+ box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
2741
+ }
2742
+ .amplify-togglebutton[data-variation=primary]:hover {
2743
+ background-color: var(--amplify-components-togglebutton-primary-hover-background-color);
2744
+ color: var(--amplify-components-togglebutton-primary-hover-color);
2745
+ }
2746
+ .amplify-togglebutton[data-variation=primary]:disabled {
2747
+ background-color: var(--amplify-components-togglebutton-primary-disabled-background-color);
2748
+ color: var(--amplify-components-togglebutton-primary-disabled-color);
2749
+ }
2750
+ .amplify-togglebutton[data-variation=primary][aria-pressed=true] {
2751
+ background-color: var(--amplify-components-togglebutton-primary-pressed-background-color);
2752
+ border-color: var(--amplify-components-togglebutton-primary-pressed-border-color);
2753
+ color: var(--amplify-components-togglebutton-primary-pressed-color);
2754
+ }
2755
+ .amplify-togglebutton[data-variation=primary][aria-pressed=true]:focus {
2756
+ border-color: var(--amplify-components-togglebutton-primary-pressed-focus-border-color);
2757
+ background-color: var(--amplify-components-togglebutton-primary-pressed-focus-background-color);
2758
+ }
2759
+ .amplify-togglebutton[data-variation=primary][aria-pressed=true]:hover:not(:disabled) {
2760
+ border-color: var(--amplify-components-togglebutton-primary-pressed-hover-border-color);
2761
+ background-color: var(--amplify-components-togglebutton-primary-pressed-hover-background-color);
2762
+ }
2763
+ .amplify-togglebutton[data-variation=link] {
2764
+ color: var(--amplify-components-togglebutton-link-color);
2765
+ }
2766
+ .amplify-togglebutton[data-variation=link]:hover {
2767
+ background-color: var(--amplify-components-togglebutton-link-hover-background-color);
2768
+ color: var(--amplify-components-togglebutton-link-hover-color);
2769
+ }
2770
+ .amplify-togglebutton[data-variation=link]:focus {
2771
+ background-color: var(--amplify-components-togglebutton-link-focus-background-color);
2772
+ color: var(--amplify-components-togglebutton-link-focus-color);
2773
+ }
2774
+ .amplify-togglebutton[data-variation=link]:disabled {
2775
+ color: var(--amplify-components-togglebutton-link-disabled-color);
2776
+ }
2777
+ .amplify-togglebutton[data-variation=link][aria-pressed=true] {
2778
+ background-color: var(--amplify-components-togglebutton-link-pressed-background-color);
2779
+ color: var(--amplify-components-togglebutton-link-pressed-color);
2780
+ }
2781
+ .amplify-togglebutton[data-variation=link][aria-pressed=true]:hover {
2782
+ background-color: var(--amplify-components-togglebutton-link-pressed-hover-background-color);
2783
+ }
2784
+
2785
+ .amplify-togglebuttongroup {
2786
+ align-items: var(--amplify-components-togglebuttongroup-align-items);
2787
+ align-content: var(--amplify-components-togglebuttongroup-align-content);
2788
+ justify-content: var(--amplify-components-togglebuttongroup-justify-content);
2789
+ gap: 0;
2790
+ }
2791
+
2792
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
2793
+ border-start-start-radius: 0;
2794
+ border-end-start-radius: 0;
2795
+ }
2796
+ @supports not (border-start-start-radius: 0) {
2797
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
2798
+ border-top-left-radius: 0;
2799
+ border-bottom-left-radius: 0;
2800
+ }
2801
+ }
2802
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type):not(:focus) {
2803
+ -webkit-border-start: 1px solid transparent;
2804
+ border-inline-start: 1px solid transparent;
2805
+ }
2806
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:last-of-type) {
2807
+ border-start-end-radius: 0;
2808
+ border-end-end-radius: 0;
2809
+ }
2810
+ @supports not (border-end-end-radius: 0) {
2811
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:last-of-type) {
2812
+ border-bottom-right-radius: 0;
2813
+ border-top-right-radius: 0;
2814
+ }
2815
+ }
2816
+
2817
+ .amplify-visually-hidden {
2818
+ position: absolute;
2819
+ width: 1px;
2820
+ height: 1px;
2821
+ padding: 0;
2822
+ margin: -1px;
2823
+ overflow: hidden;
2824
+ clip: rect(0, 0, 0, 0);
2825
+ white-space: nowrap;
2826
+ border-width: 0;
2827
+ }