@aws-amplify/ui 2.0.4-unstable.93 → 3.0.0

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