@rolster/styles-foundations 1.0.0 → 1.0.2

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