@aws-amplify/ui-svelte 0.0.0-next-9a4f1cf-20220113211745 → 0.0.0-next-1e584a1-20251021081955

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