@alfalab/core-components-tabs 10.0.8-alfasans → 10.0.9

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 (47) hide show
  1. package/components/primary-tablist/index.css +167 -180
  2. package/components/primary-tablist/index.module.css.js +1 -1
  3. package/components/primary-tablist/mobile.css +291 -317
  4. package/components/primary-tablist/mobile.module.css.js +1 -1
  5. package/components/scroll-controls/index.css +11 -11
  6. package/components/scroll-controls/index.module.css.js +1 -1
  7. package/components/scrollable-container/index.css +5 -5
  8. package/components/scrollable-container/index.module.css.js +1 -1
  9. package/components/secondary-tablist/index.css +18 -18
  10. package/components/secondary-tablist/index.module.css.js +1 -1
  11. package/components/secondary-tablist/mobile.css +22 -22
  12. package/components/secondary-tablist/mobile.module.css.js +1 -1
  13. package/components/tab/index.css +2 -2
  14. package/components/tab/index.module.css.js +1 -1
  15. package/cssm/components/primary-tablist/index.module.css +35 -48
  16. package/cssm/components/primary-tablist/mobile.module.css +35 -48
  17. package/esm/components/primary-tablist/index.css +167 -180
  18. package/esm/components/primary-tablist/index.module.css.js +1 -1
  19. package/esm/components/primary-tablist/mobile.css +291 -317
  20. package/esm/components/primary-tablist/mobile.module.css.js +1 -1
  21. package/esm/components/scroll-controls/index.css +11 -11
  22. package/esm/components/scroll-controls/index.module.css.js +1 -1
  23. package/esm/components/scrollable-container/index.css +5 -5
  24. package/esm/components/scrollable-container/index.module.css.js +1 -1
  25. package/esm/components/secondary-tablist/index.css +18 -18
  26. package/esm/components/secondary-tablist/index.module.css.js +1 -1
  27. package/esm/components/secondary-tablist/mobile.css +22 -22
  28. package/esm/components/secondary-tablist/mobile.module.css.js +1 -1
  29. package/esm/components/tab/index.css +2 -2
  30. package/esm/components/tab/index.module.css.js +1 -1
  31. package/modern/components/primary-tablist/index.css +167 -180
  32. package/modern/components/primary-tablist/index.module.css.js +1 -1
  33. package/modern/components/primary-tablist/mobile.css +291 -317
  34. package/modern/components/primary-tablist/mobile.module.css.js +1 -1
  35. package/modern/components/scroll-controls/index.css +11 -11
  36. package/modern/components/scroll-controls/index.module.css.js +1 -1
  37. package/modern/components/scrollable-container/index.css +5 -5
  38. package/modern/components/scrollable-container/index.module.css.js +1 -1
  39. package/modern/components/secondary-tablist/index.css +18 -18
  40. package/modern/components/secondary-tablist/index.module.css.js +1 -1
  41. package/modern/components/secondary-tablist/mobile.css +22 -22
  42. package/modern/components/secondary-tablist/mobile.module.css.js +1 -1
  43. package/modern/components/tab/index.css +2 -2
  44. package/modern/components/tab/index.module.css.js +1 -1
  45. package/moderncssm/components/primary-tablist/index.module.css +30 -45
  46. package/moderncssm/components/primary-tablist/mobile.module.css +30 -45
  47. package/package.json +12 -12
package/components/primary-tablist/index.css CHANGED
@@ -28,9 +28,11 @@
28
28
  --gap-4-neg: var(--gap-2xs-neg);
29
29
  }
30
30
  :root {
31
- --font-family-alfasans:
32
- 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
33
- Helvetica, sans-serif;
31
+ --font-family-system:
32
+ system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
33
+ --font-family-styrene:
34
+ 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
35
+ sans-serif;
34
36
  }
35
37
  :root {
36
38
  --focus-color: var(--color-light-status-info);
@@ -52,12 +54,12 @@
52
54
  --primary-tablist-xl-gaps: var(--gap-32);
53
55
  --primary-tablist-xl-padding: var(--gap-4) var(--gap-0) var(--gap-24);
54
56
  }
55
- .tabs__component_1hn1u {
57
+ .tabs__component_13c0p {
56
58
  position: relative;
57
59
  display: inline-flex;
58
60
  min-width: 100%;
59
61
  }
60
- .tabs__component_1hn1u:before {
62
+ .tabs__component_13c0p:before {
61
63
  content: '';
62
64
  display: block;
63
65
  position: absolute;
@@ -66,375 +68,361 @@
66
68
  width: 100%;
67
69
  background-color: var(--primary-tablist-bottom-border-color);
68
70
  }
69
- .tabs__desktop_1hn1u.tabs__paragraph-primary-large_1hn1u .tabs__title_1hn1u {
71
+ .tabs__desktop_13c0p.tabs__paragraph-primary-large_13c0p .tabs__title_13c0p {
70
72
  font-size: 18px;
71
73
  line-height: 24px;
72
74
  font-weight: 400;
73
- letter-spacing: -0.36px;
74
- font-family: var(--font-family-alfasans);
75
+ font-family: var(--font-family-system);
75
76
  }
76
- .tabs__desktop_1hn1u.tabs__paragraph-primary-medium_1hn1u .tabs__title_1hn1u {
77
+ .tabs__desktop_13c0p.tabs__paragraph-primary-medium_13c0p .tabs__title_13c0p {
77
78
  font-size: 16px;
78
79
  line-height: 24px;
79
80
  font-weight: 400;
80
- letter-spacing: -0.24px;
81
- font-family: var(--font-family-alfasans);
81
+ font-family: var(--font-family-system);
82
82
  }
83
- .tabs__desktop_1hn1u.tabs__paragraph-primary-small_1hn1u .tabs__title_1hn1u {
83
+ .tabs__desktop_13c0p.tabs__paragraph-primary-small_13c0p .tabs__title_13c0p {
84
84
  font-size: 14px;
85
85
  line-height: 20px;
86
86
  font-weight: 400;
87
- letter-spacing: -0.08px;
88
- font-family: var(--font-family-alfasans);
87
+ font-family: var(--font-family-system);
89
88
  }
90
- .tabs__desktop_1hn1u.tabs__action-primary-large_1hn1u .tabs__title_1hn1u {
89
+ .tabs__desktop_13c0p.tabs__action-primary-large_13c0p .tabs__title_13c0p {
91
90
  font-size: 18px;
92
91
  line-height: 24px;
93
92
  font-weight: 500;
94
- letter-spacing: -0.17px;
95
- font-family: var(--font-family-alfasans);
93
+ font-family: var(--font-family-system);
96
94
  }
97
- .tabs__desktop_1hn1u.tabs__action-primary-medium_1hn1u .tabs__title_1hn1u {
95
+ .tabs__desktop_13c0p.tabs__action-primary-medium_13c0p .tabs__title_13c0p {
98
96
  font-size: 16px;
99
97
  line-height: 24px;
100
98
  font-weight: 500;
101
- letter-spacing: -0.05px;
102
- font-family: var(--font-family-alfasans);
99
+ font-family: var(--font-family-system);
103
100
  }
104
- .tabs__desktop_1hn1u.tabs__action-primary-small_1hn1u .tabs__title_1hn1u {
101
+ .tabs__desktop_13c0p.tabs__action-primary-small_13c0p .tabs__title_13c0p {
105
102
  font-size: 14px;
106
103
  line-height: 20px;
107
104
  font-weight: 500;
108
- letter-spacing: 0.07px;
109
- font-family: var(--font-family-alfasans);
105
+ font-family: var(--font-family-system);
110
106
  }
111
- .tabs__desktop_1hn1u.tabs__accent-primary-large_1hn1u .tabs__title_1hn1u {
107
+ .tabs__desktop_13c0p.tabs__accent-primary-large_13c0p .tabs__title_13c0p {
112
108
  font-size: 18px;
113
109
  line-height: 24px;
114
110
  font-weight: 700;
115
- letter-spacing: 0.38px;
116
- font-family: var(--font-family-alfasans);
111
+ font-family: var(--font-family-system);
117
112
  }
118
- .tabs__desktop_1hn1u.tabs__accent-primary-medium_1hn1u .tabs__title_1hn1u {
113
+ .tabs__desktop_13c0p.tabs__accent-primary-medium_13c0p .tabs__title_13c0p {
119
114
  font-size: 16px;
120
115
  line-height: 24px;
121
116
  font-weight: 700;
122
- letter-spacing: 0.43px;
123
- font-family: var(--font-family-alfasans);
117
+ font-family: var(--font-family-system);
124
118
  }
125
- .tabs__desktop_1hn1u.tabs__accent-primary-small_1hn1u .tabs__title_1hn1u {
119
+ .tabs__desktop_13c0p.tabs__accent-primary-small_13c0p .tabs__title_13c0p {
126
120
  font-size: 14px;
127
121
  line-height: 20px;
128
122
  font-weight: 700;
129
- letter-spacing: 0.47px;
130
- font-family: var(--font-family-alfasans);
123
+ font-family: var(--font-family-system);
131
124
  }
132
- .tabs__desktop_1hn1u.tabs__paragraph-primary-large_1hn1u .tabs__title_1hn1u, .tabs__desktop_1hn1u.tabs__paragraph-primary-medium_1hn1u .tabs__title_1hn1u, .tabs__desktop_1hn1u.tabs__accent-primary-large_1hn1u .tabs__title_1hn1u, .tabs__desktop_1hn1u.tabs__accent-primary-medium_1hn1u .tabs__title_1hn1u, .tabs__desktop_1hn1u.tabs__action-primary-large_1hn1u .tabs__title_1hn1u, .tabs__desktop_1hn1u.tabs__action-primary-medium_1hn1u .tabs__title_1hn1u {
125
+ .tabs__desktop_13c0p.tabs__paragraph-primary-large_13c0p .tabs__title_13c0p, .tabs__desktop_13c0p.tabs__paragraph-primary-medium_13c0p .tabs__title_13c0p, .tabs__desktop_13c0p.tabs__accent-primary-large_13c0p .tabs__title_13c0p, .tabs__desktop_13c0p.tabs__accent-primary-medium_13c0p .tabs__title_13c0p, .tabs__desktop_13c0p.tabs__action-primary-large_13c0p .tabs__title_13c0p, .tabs__desktop_13c0p.tabs__action-primary-medium_13c0p .tabs__title_13c0p {
133
126
  padding-bottom: calc(24px / 2);
134
127
  }
135
- .tabs__desktop_1hn1u.tabs__paragraph-primary-large_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
136
- .tabs__desktop_1hn1u.tabs__paragraph-primary-medium_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
137
- .tabs__desktop_1hn1u.tabs__accent-primary-large_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
138
- .tabs__desktop_1hn1u.tabs__accent-primary-medium_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
139
- .tabs__desktop_1hn1u.tabs__action-primary-large_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
140
- .tabs__desktop_1hn1u.tabs__action-primary-medium_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
141
- .tabs__desktop_1hn1u.tabs__paragraph-primary-large_1hn1u .tabs__pickerWrapper_1hn1u,
142
- .tabs__desktop_1hn1u.tabs__paragraph-primary-medium_1hn1u .tabs__pickerWrapper_1hn1u,
143
- .tabs__desktop_1hn1u.tabs__accent-primary-large_1hn1u .tabs__pickerWrapper_1hn1u,
144
- .tabs__desktop_1hn1u.tabs__accent-primary-medium_1hn1u .tabs__pickerWrapper_1hn1u,
145
- .tabs__desktop_1hn1u.tabs__action-primary-large_1hn1u .tabs__pickerWrapper_1hn1u,
146
- .tabs__desktop_1hn1u.tabs__action-primary-medium_1hn1u .tabs__pickerWrapper_1hn1u {
128
+ .tabs__desktop_13c0p.tabs__paragraph-primary-large_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
129
+ .tabs__desktop_13c0p.tabs__paragraph-primary-medium_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
130
+ .tabs__desktop_13c0p.tabs__accent-primary-large_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
131
+ .tabs__desktop_13c0p.tabs__accent-primary-medium_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
132
+ .tabs__desktop_13c0p.tabs__action-primary-large_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
133
+ .tabs__desktop_13c0p.tabs__action-primary-medium_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
134
+ .tabs__desktop_13c0p.tabs__paragraph-primary-large_13c0p .tabs__pickerWrapper_13c0p,
135
+ .tabs__desktop_13c0p.tabs__paragraph-primary-medium_13c0p .tabs__pickerWrapper_13c0p,
136
+ .tabs__desktop_13c0p.tabs__accent-primary-large_13c0p .tabs__pickerWrapper_13c0p,
137
+ .tabs__desktop_13c0p.tabs__accent-primary-medium_13c0p .tabs__pickerWrapper_13c0p,
138
+ .tabs__desktop_13c0p.tabs__action-primary-large_13c0p .tabs__pickerWrapper_13c0p,
139
+ .tabs__desktop_13c0p.tabs__action-primary-medium_13c0p .tabs__pickerWrapper_13c0p {
147
140
  margin-left: 24px;
148
141
  }
149
- .tabs__desktop_1hn1u.tabs__paragraph-primary-large_1hn1u .tabs__option_1hn1u, .tabs__desktop_1hn1u.tabs__paragraph-primary-medium_1hn1u .tabs__option_1hn1u, .tabs__desktop_1hn1u.tabs__accent-primary-large_1hn1u .tabs__option_1hn1u, .tabs__desktop_1hn1u.tabs__accent-primary-medium_1hn1u .tabs__option_1hn1u, .tabs__desktop_1hn1u.tabs__action-primary-large_1hn1u .tabs__option_1hn1u, .tabs__desktop_1hn1u.tabs__action-primary-medium_1hn1u .tabs__option_1hn1u {
142
+ .tabs__desktop_13c0p.tabs__paragraph-primary-large_13c0p .tabs__option_13c0p, .tabs__desktop_13c0p.tabs__paragraph-primary-medium_13c0p .tabs__option_13c0p, .tabs__desktop_13c0p.tabs__accent-primary-large_13c0p .tabs__option_13c0p, .tabs__desktop_13c0p.tabs__accent-primary-medium_13c0p .tabs__option_13c0p, .tabs__desktop_13c0p.tabs__action-primary-large_13c0p .tabs__option_13c0p, .tabs__desktop_13c0p.tabs__action-primary-medium_13c0p .tabs__option_13c0p {
150
143
  padding: var(--gap-0);
151
144
  }
152
- .tabs__desktop_1hn1u.tabs__paragraph-primary-large_1hn1u .tabs__scrollControls_1hn1u > button, .tabs__desktop_1hn1u.tabs__paragraph-primary-medium_1hn1u .tabs__scrollControls_1hn1u > button, .tabs__desktop_1hn1u.tabs__accent-primary-large_1hn1u .tabs__scrollControls_1hn1u > button, .tabs__desktop_1hn1u.tabs__accent-primary-medium_1hn1u .tabs__scrollControls_1hn1u > button, .tabs__desktop_1hn1u.tabs__action-primary-large_1hn1u .tabs__scrollControls_1hn1u > button, .tabs__desktop_1hn1u.tabs__action-primary-medium_1hn1u .tabs__scrollControls_1hn1u > button {
145
+ .tabs__desktop_13c0p.tabs__paragraph-primary-large_13c0p .tabs__scrollControls_13c0p > button, .tabs__desktop_13c0p.tabs__paragraph-primary-medium_13c0p .tabs__scrollControls_13c0p > button, .tabs__desktop_13c0p.tabs__accent-primary-large_13c0p .tabs__scrollControls_13c0p > button, .tabs__desktop_13c0p.tabs__accent-primary-medium_13c0p .tabs__scrollControls_13c0p > button, .tabs__desktop_13c0p.tabs__action-primary-large_13c0p .tabs__scrollControls_13c0p > button, .tabs__desktop_13c0p.tabs__action-primary-medium_13c0p .tabs__scrollControls_13c0p > button {
153
146
  box-sizing: content-box;
154
147
  width: 24px;
155
148
  height: 24px;
156
149
  padding: var(--gap-0);
157
150
  }
158
- .tabs__desktop_1hn1u.tabs__paragraph-primary-large_1hn1u .tabs__scrollControls_1hn1u button:first-child, .tabs__desktop_1hn1u.tabs__paragraph-primary-medium_1hn1u .tabs__scrollControls_1hn1u button:first-child, .tabs__desktop_1hn1u.tabs__accent-primary-large_1hn1u .tabs__scrollControls_1hn1u button:first-child, .tabs__desktop_1hn1u.tabs__accent-primary-medium_1hn1u .tabs__scrollControls_1hn1u button:first-child, .tabs__desktop_1hn1u.tabs__action-primary-large_1hn1u .tabs__scrollControls_1hn1u button:first-child, .tabs__desktop_1hn1u.tabs__action-primary-medium_1hn1u .tabs__scrollControls_1hn1u button:first-child {
151
+ .tabs__desktop_13c0p.tabs__paragraph-primary-large_13c0p .tabs__scrollControls_13c0p button:first-child, .tabs__desktop_13c0p.tabs__paragraph-primary-medium_13c0p .tabs__scrollControls_13c0p button:first-child, .tabs__desktop_13c0p.tabs__accent-primary-large_13c0p .tabs__scrollControls_13c0p button:first-child, .tabs__desktop_13c0p.tabs__accent-primary-medium_13c0p .tabs__scrollControls_13c0p button:first-child, .tabs__desktop_13c0p.tabs__action-primary-large_13c0p .tabs__scrollControls_13c0p button:first-child, .tabs__desktop_13c0p.tabs__action-primary-medium_13c0p .tabs__scrollControls_13c0p button:first-child {
159
152
  margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(24px / 2);
160
153
  }
161
- .tabs__desktop_1hn1u.tabs__paragraph-primary-small_1hn1u .tabs__title_1hn1u, .tabs__desktop_1hn1u.tabs__accent-primary-small_1hn1u .tabs__title_1hn1u, .tabs__desktop_1hn1u.tabs__action-primary-small_1hn1u .tabs__title_1hn1u {
154
+ .tabs__desktop_13c0p.tabs__paragraph-primary-small_13c0p .tabs__title_13c0p, .tabs__desktop_13c0p.tabs__accent-primary-small_13c0p .tabs__title_13c0p, .tabs__desktop_13c0p.tabs__action-primary-small_13c0p .tabs__title_13c0p {
162
155
  padding-bottom: calc(20px / 2);
163
156
  }
164
- .tabs__desktop_1hn1u.tabs__paragraph-primary-small_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
165
- .tabs__desktop_1hn1u.tabs__accent-primary-small_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
166
- .tabs__desktop_1hn1u.tabs__action-primary-small_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
167
- .tabs__desktop_1hn1u.tabs__paragraph-primary-small_1hn1u .tabs__pickerWrapper_1hn1u,
168
- .tabs__desktop_1hn1u.tabs__accent-primary-small_1hn1u .tabs__pickerWrapper_1hn1u,
169
- .tabs__desktop_1hn1u.tabs__action-primary-small_1hn1u .tabs__pickerWrapper_1hn1u {
157
+ .tabs__desktop_13c0p.tabs__paragraph-primary-small_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
158
+ .tabs__desktop_13c0p.tabs__accent-primary-small_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
159
+ .tabs__desktop_13c0p.tabs__action-primary-small_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
160
+ .tabs__desktop_13c0p.tabs__paragraph-primary-small_13c0p .tabs__pickerWrapper_13c0p,
161
+ .tabs__desktop_13c0p.tabs__accent-primary-small_13c0p .tabs__pickerWrapper_13c0p,
162
+ .tabs__desktop_13c0p.tabs__action-primary-small_13c0p .tabs__pickerWrapper_13c0p {
170
163
  margin-left: 20px;
171
164
  }
172
- .tabs__desktop_1hn1u.tabs__paragraph-primary-small_1hn1u .tabs__option_1hn1u, .tabs__desktop_1hn1u.tabs__accent-primary-small_1hn1u .tabs__option_1hn1u, .tabs__desktop_1hn1u.tabs__action-primary-small_1hn1u .tabs__option_1hn1u {
165
+ .tabs__desktop_13c0p.tabs__paragraph-primary-small_13c0p .tabs__option_13c0p, .tabs__desktop_13c0p.tabs__accent-primary-small_13c0p .tabs__option_13c0p, .tabs__desktop_13c0p.tabs__action-primary-small_13c0p .tabs__option_13c0p {
173
166
  padding: var(--gap-0);
174
167
  }
175
- .tabs__desktop_1hn1u.tabs__paragraph-primary-small_1hn1u .tabs__scrollControls_1hn1u > button, .tabs__desktop_1hn1u.tabs__accent-primary-small_1hn1u .tabs__scrollControls_1hn1u > button, .tabs__desktop_1hn1u.tabs__action-primary-small_1hn1u .tabs__scrollControls_1hn1u > button {
168
+ .tabs__desktop_13c0p.tabs__paragraph-primary-small_13c0p .tabs__scrollControls_13c0p > button, .tabs__desktop_13c0p.tabs__accent-primary-small_13c0p .tabs__scrollControls_13c0p > button, .tabs__desktop_13c0p.tabs__action-primary-small_13c0p .tabs__scrollControls_13c0p > button {
176
169
  box-sizing: content-box;
177
170
  width: 20px;
178
171
  height: 20px;
179
172
  padding: var(--gap-0);
180
173
  }
181
- .tabs__desktop_1hn1u.tabs__paragraph-primary-small_1hn1u .tabs__scrollControls_1hn1u button:first-child, .tabs__desktop_1hn1u.tabs__accent-primary-small_1hn1u .tabs__scrollControls_1hn1u button:first-child, .tabs__desktop_1hn1u.tabs__action-primary-small_1hn1u .tabs__scrollControls_1hn1u button:first-child {
174
+ .tabs__desktop_13c0p.tabs__paragraph-primary-small_13c0p .tabs__scrollControls_13c0p button:first-child, .tabs__desktop_13c0p.tabs__accent-primary-small_13c0p .tabs__scrollControls_13c0p button:first-child, .tabs__desktop_13c0p.tabs__action-primary-small_13c0p .tabs__scrollControls_13c0p button:first-child {
182
175
  margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(20px / 2);
183
176
  }
184
- .tabs__desktop_1hn1u.tabs__headline-system-xlarge_1hn1u .tabs__title_1hn1u {
177
+ .tabs__desktop_13c0p.tabs__headline-system-xlarge_13c0p .tabs__title_13c0p {
185
178
  font-size: 48px;
186
179
  line-height: 52px;
187
180
  font-weight: 700;
188
- letter-spacing: 0.1px;
189
- font-family: var(--font-family-alfasans);
181
+ font-family: var(--font-family-system);
190
182
  }
191
- .tabs__desktop_1hn1u.tabs__headline-system-large_1hn1u .tabs__title_1hn1u {
183
+ .tabs__desktop_13c0p.tabs__headline-system-large_13c0p .tabs__title_13c0p {
192
184
  font-size: 40px;
193
185
  line-height: 48px;
194
186
  font-weight: 700;
195
- letter-spacing: 0.1px;
196
- font-family: var(--font-family-alfasans);
187
+ font-family: var(--font-family-system);
197
188
  }
198
- .tabs__desktop_1hn1u.tabs__headline-system-medium_1hn1u .tabs__title_1hn1u {
189
+ .tabs__desktop_13c0p.tabs__headline-system-medium_13c0p .tabs__title_13c0p {
199
190
  font-size: 30px;
200
191
  line-height: 36px;
201
192
  font-weight: 700;
202
- letter-spacing: 0.1px;
203
- font-family: var(--font-family-alfasans);
193
+ font-family: var(--font-family-system);
204
194
  }
205
- .tabs__desktop_1hn1u.tabs__headline-system-small_1hn1u .tabs__title_1hn1u {
195
+ .tabs__desktop_13c0p.tabs__headline-system-small_13c0p .tabs__title_13c0p {
206
196
  font-size: 22px;
207
197
  line-height: 26px;
208
198
  font-weight: 700;
209
- letter-spacing: 0.2px;
210
- font-family: var(--font-family-alfasans);
199
+ font-family: var(--font-family-system);
211
200
  }
212
- .tabs__desktop_1hn1u.tabs__headline-system-xsmall_1hn1u .tabs__title_1hn1u {
201
+ .tabs__desktop_13c0p.tabs__headline-system-xsmall_13c0p .tabs__title_13c0p {
213
202
  font-size: 18px;
214
203
  line-height: 22px;
215
204
  font-weight: 700;
216
- letter-spacing: 0.38px;
217
- font-family: var(--font-family-alfasans);
205
+ font-family: var(--font-family-system);
218
206
  }
219
- .tabs__desktop_1hn1u.tabs__headline-xlarge_1hn1u .tabs__title_1hn1u {
207
+ .tabs__desktop_13c0p.tabs__headline-xlarge_13c0p .tabs__title_13c0p {
220
208
  font-size: 48px;
221
209
  line-height: 64px;
222
- font-weight: 700;
223
- letter-spacing: 0.1px;
224
- font-family: var(--font-family-alfasans);
210
+ font-weight: 500;
211
+ font-feature-settings: 'ss01';
212
+ font-family: var(--font-family-styrene);
225
213
  }
226
- .tabs__desktop_1hn1u.tabs__headline-large_1hn1u .tabs__title_1hn1u {
214
+ .tabs__desktop_13c0p.tabs__headline-large_13c0p .tabs__title_13c0p {
227
215
  font-size: 40px;
228
216
  line-height: 48px;
229
- font-weight: 700;
230
- letter-spacing: 0.1px;
231
- font-family: var(--font-family-alfasans);
217
+ font-weight: 500;
218
+ font-feature-settings: 'ss01';
219
+ font-family: var(--font-family-styrene);
232
220
  }
233
- .tabs__desktop_1hn1u.tabs__headline-medium_1hn1u .tabs__title_1hn1u {
221
+ .tabs__desktop_13c0p.tabs__headline-medium_13c0p .tabs__title_13c0p {
234
222
  font-size: 32px;
235
223
  line-height: 40px;
236
- font-weight: 700;
237
- letter-spacing: 0.3px;
238
- font-family: var(--font-family-alfasans);
224
+ font-weight: 500;
225
+ font-feature-settings: 'ss01';
226
+ font-family: var(--font-family-styrene);
239
227
  }
240
- .tabs__desktop_1hn1u.tabs__headline-small_1hn1u .tabs__title_1hn1u {
228
+ .tabs__desktop_13c0p.tabs__headline-small_13c0p .tabs__title_13c0p {
241
229
  font-size: 24px;
242
230
  line-height: 32px;
243
- font-weight: 700;
244
- letter-spacing: 0.39px;
245
- font-family: var(--font-family-alfasans);
231
+ font-weight: 500;
232
+ font-feature-settings: 'ss01';
233
+ font-family: var(--font-family-styrene);
246
234
  }
247
- .tabs__desktop_1hn1u.tabs__headline-xsmall_1hn1u .tabs__title_1hn1u {
235
+ .tabs__desktop_13c0p.tabs__headline-xsmall_13c0p .tabs__title_13c0p {
248
236
  font-size: 20px;
249
237
  line-height: 24px;
250
- font-weight: 700;
251
- letter-spacing: 0.33px;
252
- font-family: var(--font-family-alfasans);
238
+ font-weight: 500;
239
+ font-feature-settings: 'ss01';
240
+ font-family: var(--font-family-styrene);
253
241
  }
254
- .tabs__desktop_1hn1u.tabs__headline-system-xlarge_1hn1u .tabs__title_1hn1u {
242
+ .tabs__desktop_13c0p.tabs__headline-system-xlarge_13c0p .tabs__title_13c0p {
255
243
  padding-bottom: calc(52px / 2);
256
244
  }
257
- .tabs__desktop_1hn1u.tabs__headline-system-xlarge_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
258
- .tabs__desktop_1hn1u.tabs__headline-system-xlarge_1hn1u .tabs__pickerWrapper_1hn1u {
245
+ .tabs__desktop_13c0p.tabs__headline-system-xlarge_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
246
+ .tabs__desktop_13c0p.tabs__headline-system-xlarge_13c0p .tabs__pickerWrapper_13c0p {
259
247
  margin-left: 52px;
260
248
  }
261
- .tabs__desktop_1hn1u.tabs__headline-system-xlarge_1hn1u .tabs__option_1hn1u {
249
+ .tabs__desktop_13c0p.tabs__headline-system-xlarge_13c0p .tabs__option_13c0p {
262
250
  padding: var(--gap-0);
263
251
  }
264
- .tabs__desktop_1hn1u.tabs__headline-system-xlarge_1hn1u .tabs__scrollControls_1hn1u > button {
252
+ .tabs__desktop_13c0p.tabs__headline-system-xlarge_13c0p .tabs__scrollControls_13c0p > button {
265
253
  box-sizing: content-box;
266
254
  width: 52px;
267
255
  height: 52px;
268
256
  padding: var(--gap-0);
269
257
  }
270
- .tabs__desktop_1hn1u.tabs__headline-system-xlarge_1hn1u .tabs__scrollControls_1hn1u button:first-child {
258
+ .tabs__desktop_13c0p.tabs__headline-system-xlarge_13c0p .tabs__scrollControls_13c0p button:first-child {
271
259
  margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(52px / 2);
272
260
  }
273
- .tabs__desktop_1hn1u.tabs__headline-system-large_1hn1u .tabs__title_1hn1u, .tabs__desktop_1hn1u.tabs__headline-large_1hn1u .tabs__title_1hn1u {
261
+ .tabs__desktop_13c0p.tabs__headline-system-large_13c0p .tabs__title_13c0p, .tabs__desktop_13c0p.tabs__headline-large_13c0p .tabs__title_13c0p {
274
262
  padding-bottom: calc(48px / 2);
275
263
  }
276
- .tabs__desktop_1hn1u.tabs__headline-system-large_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
277
- .tabs__desktop_1hn1u.tabs__headline-large_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
278
- .tabs__desktop_1hn1u.tabs__headline-system-large_1hn1u .tabs__pickerWrapper_1hn1u,
279
- .tabs__desktop_1hn1u.tabs__headline-large_1hn1u .tabs__pickerWrapper_1hn1u {
264
+ .tabs__desktop_13c0p.tabs__headline-system-large_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
265
+ .tabs__desktop_13c0p.tabs__headline-large_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
266
+ .tabs__desktop_13c0p.tabs__headline-system-large_13c0p .tabs__pickerWrapper_13c0p,
267
+ .tabs__desktop_13c0p.tabs__headline-large_13c0p .tabs__pickerWrapper_13c0p {
280
268
  margin-left: 48px;
281
269
  }
282
- .tabs__desktop_1hn1u.tabs__headline-system-large_1hn1u .tabs__option_1hn1u, .tabs__desktop_1hn1u.tabs__headline-large_1hn1u .tabs__option_1hn1u {
270
+ .tabs__desktop_13c0p.tabs__headline-system-large_13c0p .tabs__option_13c0p, .tabs__desktop_13c0p.tabs__headline-large_13c0p .tabs__option_13c0p {
283
271
  padding: var(--gap-0);
284
272
  }
285
- .tabs__desktop_1hn1u.tabs__headline-system-large_1hn1u .tabs__scrollControls_1hn1u > button, .tabs__desktop_1hn1u.tabs__headline-large_1hn1u .tabs__scrollControls_1hn1u > button {
273
+ .tabs__desktop_13c0p.tabs__headline-system-large_13c0p .tabs__scrollControls_13c0p > button, .tabs__desktop_13c0p.tabs__headline-large_13c0p .tabs__scrollControls_13c0p > button {
286
274
  box-sizing: content-box;
287
275
  width: 48px;
288
276
  height: 48px;
289
277
  padding: var(--gap-0);
290
278
  }
291
- .tabs__desktop_1hn1u.tabs__headline-system-large_1hn1u .tabs__scrollControls_1hn1u button:first-child, .tabs__desktop_1hn1u.tabs__headline-large_1hn1u .tabs__scrollControls_1hn1u button:first-child {
279
+ .tabs__desktop_13c0p.tabs__headline-system-large_13c0p .tabs__scrollControls_13c0p button:first-child, .tabs__desktop_13c0p.tabs__headline-large_13c0p .tabs__scrollControls_13c0p button:first-child {
292
280
  margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(48px / 2);
293
281
  }
294
- .tabs__desktop_1hn1u.tabs__headline-system-medium_1hn1u .tabs__title_1hn1u {
282
+ .tabs__desktop_13c0p.tabs__headline-system-medium_13c0p .tabs__title_13c0p {
295
283
  padding-bottom: calc(36px / 2);
296
284
  }
297
- .tabs__desktop_1hn1u.tabs__headline-system-medium_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
298
- .tabs__desktop_1hn1u.tabs__headline-system-medium_1hn1u .tabs__pickerWrapper_1hn1u {
285
+ .tabs__desktop_13c0p.tabs__headline-system-medium_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
286
+ .tabs__desktop_13c0p.tabs__headline-system-medium_13c0p .tabs__pickerWrapper_13c0p {
299
287
  margin-left: 36px;
300
288
  }
301
- .tabs__desktop_1hn1u.tabs__headline-system-medium_1hn1u .tabs__option_1hn1u {
289
+ .tabs__desktop_13c0p.tabs__headline-system-medium_13c0p .tabs__option_13c0p {
302
290
  padding: var(--gap-0);
303
291
  }
304
- .tabs__desktop_1hn1u.tabs__headline-system-medium_1hn1u .tabs__scrollControls_1hn1u > button {
292
+ .tabs__desktop_13c0p.tabs__headline-system-medium_13c0p .tabs__scrollControls_13c0p > button {
305
293
  box-sizing: content-box;
306
294
  width: 36px;
307
295
  height: 36px;
308
296
  padding: var(--gap-0);
309
297
  }
310
- .tabs__desktop_1hn1u.tabs__headline-system-medium_1hn1u .tabs__scrollControls_1hn1u button:first-child {
298
+ .tabs__desktop_13c0p.tabs__headline-system-medium_13c0p .tabs__scrollControls_13c0p button:first-child {
311
299
  margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(36px / 2);
312
300
  }
313
- .tabs__desktop_1hn1u.tabs__headline-system-small_1hn1u .tabs__title_1hn1u {
301
+ .tabs__desktop_13c0p.tabs__headline-system-small_13c0p .tabs__title_13c0p {
314
302
  padding-bottom: calc(26px / 2);
315
303
  }
316
- .tabs__desktop_1hn1u.tabs__headline-system-small_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
317
- .tabs__desktop_1hn1u.tabs__headline-system-small_1hn1u .tabs__pickerWrapper_1hn1u {
304
+ .tabs__desktop_13c0p.tabs__headline-system-small_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
305
+ .tabs__desktop_13c0p.tabs__headline-system-small_13c0p .tabs__pickerWrapper_13c0p {
318
306
  margin-left: 26px;
319
307
  }
320
- .tabs__desktop_1hn1u.tabs__headline-system-small_1hn1u .tabs__option_1hn1u {
308
+ .tabs__desktop_13c0p.tabs__headline-system-small_13c0p .tabs__option_13c0p {
321
309
  padding: var(--gap-0);
322
310
  }
323
- .tabs__desktop_1hn1u.tabs__headline-system-small_1hn1u .tabs__scrollControls_1hn1u > button {
311
+ .tabs__desktop_13c0p.tabs__headline-system-small_13c0p .tabs__scrollControls_13c0p > button {
324
312
  box-sizing: content-box;
325
313
  width: 26px;
326
314
  height: 26px;
327
315
  padding: var(--gap-0);
328
316
  }
329
- .tabs__desktop_1hn1u.tabs__headline-system-small_1hn1u .tabs__scrollControls_1hn1u button:first-child {
317
+ .tabs__desktop_13c0p.tabs__headline-system-small_13c0p .tabs__scrollControls_13c0p button:first-child {
330
318
  margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(26px / 2);
331
319
  }
332
- .tabs__desktop_1hn1u.tabs__headline-system-xsmall_1hn1u .tabs__title_1hn1u {
320
+ .tabs__desktop_13c0p.tabs__headline-system-xsmall_13c0p .tabs__title_13c0p {
333
321
  padding-bottom: calc(22px / 2);
334
322
  }
335
- .tabs__desktop_1hn1u.tabs__headline-system-xsmall_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
336
- .tabs__desktop_1hn1u.tabs__headline-system-xsmall_1hn1u .tabs__pickerWrapper_1hn1u {
323
+ .tabs__desktop_13c0p.tabs__headline-system-xsmall_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
324
+ .tabs__desktop_13c0p.tabs__headline-system-xsmall_13c0p .tabs__pickerWrapper_13c0p {
337
325
  margin-left: 22px;
338
326
  }
339
- .tabs__desktop_1hn1u.tabs__headline-system-xsmall_1hn1u .tabs__option_1hn1u {
327
+ .tabs__desktop_13c0p.tabs__headline-system-xsmall_13c0p .tabs__option_13c0p {
340
328
  padding: var(--gap-0);
341
329
  }
342
- .tabs__desktop_1hn1u.tabs__headline-system-xsmall_1hn1u .tabs__scrollControls_1hn1u > button {
330
+ .tabs__desktop_13c0p.tabs__headline-system-xsmall_13c0p .tabs__scrollControls_13c0p > button {
343
331
  box-sizing: content-box;
344
332
  width: 22px;
345
333
  height: 22px;
346
334
  padding: var(--gap-0);
347
335
  }
348
- .tabs__desktop_1hn1u.tabs__headline-system-xsmall_1hn1u .tabs__scrollControls_1hn1u button:first-child {
336
+ .tabs__desktop_13c0p.tabs__headline-system-xsmall_13c0p .tabs__scrollControls_13c0p button:first-child {
349
337
  margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(22px / 2);
350
338
  }
351
- .tabs__desktop_1hn1u.tabs__headline-xlarge_1hn1u .tabs__title_1hn1u {
339
+ .tabs__desktop_13c0p.tabs__headline-xlarge_13c0p .tabs__title_13c0p {
352
340
  padding-bottom: calc(64px / 2);
353
341
  }
354
- .tabs__desktop_1hn1u.tabs__headline-xlarge_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
355
- .tabs__desktop_1hn1u.tabs__headline-xlarge_1hn1u .tabs__pickerWrapper_1hn1u {
342
+ .tabs__desktop_13c0p.tabs__headline-xlarge_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
343
+ .tabs__desktop_13c0p.tabs__headline-xlarge_13c0p .tabs__pickerWrapper_13c0p {
356
344
  margin-left: 64px;
357
345
  }
358
- .tabs__desktop_1hn1u.tabs__headline-xlarge_1hn1u .tabs__option_1hn1u {
346
+ .tabs__desktop_13c0p.tabs__headline-xlarge_13c0p .tabs__option_13c0p {
359
347
  padding: var(--gap-0);
360
348
  }
361
- .tabs__desktop_1hn1u.tabs__headline-xlarge_1hn1u .tabs__scrollControls_1hn1u > button {
349
+ .tabs__desktop_13c0p.tabs__headline-xlarge_13c0p .tabs__scrollControls_13c0p > button {
362
350
  box-sizing: content-box;
363
351
  width: 64px;
364
352
  height: 64px;
365
353
  padding: var(--gap-0);
366
354
  }
367
- .tabs__desktop_1hn1u.tabs__headline-xlarge_1hn1u .tabs__scrollControls_1hn1u button:first-child {
355
+ .tabs__desktop_13c0p.tabs__headline-xlarge_13c0p .tabs__scrollControls_13c0p button:first-child {
368
356
  margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(64px / 2);
369
357
  }
370
- .tabs__desktop_1hn1u.tabs__headline-medium_1hn1u .tabs__title_1hn1u {
358
+ .tabs__desktop_13c0p.tabs__headline-medium_13c0p .tabs__title_13c0p {
371
359
  padding-bottom: calc(40px / 2);
372
360
  }
373
- .tabs__desktop_1hn1u.tabs__headline-medium_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
374
- .tabs__desktop_1hn1u.tabs__headline-medium_1hn1u .tabs__pickerWrapper_1hn1u {
361
+ .tabs__desktop_13c0p.tabs__headline-medium_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
362
+ .tabs__desktop_13c0p.tabs__headline-medium_13c0p .tabs__pickerWrapper_13c0p {
375
363
  margin-left: 40px;
376
364
  }
377
- .tabs__desktop_1hn1u.tabs__headline-medium_1hn1u .tabs__option_1hn1u {
365
+ .tabs__desktop_13c0p.tabs__headline-medium_13c0p .tabs__option_13c0p {
378
366
  padding: var(--gap-0);
379
367
  }
380
- .tabs__desktop_1hn1u.tabs__headline-medium_1hn1u .tabs__scrollControls_1hn1u > button {
368
+ .tabs__desktop_13c0p.tabs__headline-medium_13c0p .tabs__scrollControls_13c0p > button {
381
369
  box-sizing: content-box;
382
370
  width: 40px;
383
371
  height: 40px;
384
372
  padding: var(--gap-0);
385
373
  }
386
- .tabs__desktop_1hn1u.tabs__headline-medium_1hn1u .tabs__scrollControls_1hn1u button:first-child {
374
+ .tabs__desktop_13c0p.tabs__headline-medium_13c0p .tabs__scrollControls_13c0p button:first-child {
387
375
  margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(40px / 2);
388
376
  }
389
- .tabs__desktop_1hn1u.tabs__headline-small_1hn1u .tabs__title_1hn1u {
377
+ .tabs__desktop_13c0p.tabs__headline-small_13c0p .tabs__title_13c0p {
390
378
  padding-bottom: calc(32px / 2);
391
379
  }
392
- .tabs__desktop_1hn1u.tabs__headline-small_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
393
- .tabs__desktop_1hn1u.tabs__headline-small_1hn1u .tabs__pickerWrapper_1hn1u {
380
+ .tabs__desktop_13c0p.tabs__headline-small_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
381
+ .tabs__desktop_13c0p.tabs__headline-small_13c0p .tabs__pickerWrapper_13c0p {
394
382
  margin-left: 32px;
395
383
  }
396
- .tabs__desktop_1hn1u.tabs__headline-small_1hn1u .tabs__option_1hn1u {
384
+ .tabs__desktop_13c0p.tabs__headline-small_13c0p .tabs__option_13c0p {
397
385
  padding: var(--gap-0);
398
386
  }
399
- .tabs__desktop_1hn1u.tabs__headline-small_1hn1u .tabs__scrollControls_1hn1u > button {
387
+ .tabs__desktop_13c0p.tabs__headline-small_13c0p .tabs__scrollControls_13c0p > button {
400
388
  box-sizing: content-box;
401
389
  width: 32px;
402
390
  height: 32px;
403
391
  padding: var(--gap-0);
404
392
  }
405
- .tabs__desktop_1hn1u.tabs__headline-small_1hn1u .tabs__scrollControls_1hn1u button:first-child {
393
+ .tabs__desktop_13c0p.tabs__headline-small_13c0p .tabs__scrollControls_13c0p button:first-child {
406
394
  margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(32px / 2);
407
395
  }
408
- .tabs__desktop_1hn1u.tabs__headline-xsmall_1hn1u .tabs__title_1hn1u {
396
+ .tabs__desktop_13c0p.tabs__headline-xsmall_13c0p .tabs__title_13c0p {
409
397
  padding-bottom: calc(24px / 2);
410
398
  }
411
- .tabs__desktop_1hn1u.tabs__headline-xsmall_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u,
412
- .tabs__desktop_1hn1u.tabs__headline-xsmall_1hn1u .tabs__pickerWrapper_1hn1u {
399
+ .tabs__desktop_13c0p.tabs__headline-xsmall_13c0p .tabs__title_13c0p + .tabs__title_13c0p,
400
+ .tabs__desktop_13c0p.tabs__headline-xsmall_13c0p .tabs__pickerWrapper_13c0p {
413
401
  margin-left: 24px;
414
402
  }
415
- .tabs__desktop_1hn1u.tabs__headline-xsmall_1hn1u .tabs__option_1hn1u {
403
+ .tabs__desktop_13c0p.tabs__headline-xsmall_13c0p .tabs__option_13c0p {
416
404
  padding: var(--gap-0);
417
405
  }
418
- .tabs__desktop_1hn1u.tabs__headline-xsmall_1hn1u .tabs__scrollControls_1hn1u > button {
406
+ .tabs__desktop_13c0p.tabs__headline-xsmall_13c0p .tabs__scrollControls_13c0p > button {
419
407
  box-sizing: content-box;
420
408
  width: 24px;
421
409
  height: 24px;
422
410
  padding: var(--gap-0);
423
411
  }
424
- .tabs__desktop_1hn1u.tabs__headline-xsmall_1hn1u .tabs__scrollControls_1hn1u button:first-child {
412
+ .tabs__desktop_13c0p.tabs__headline-xsmall_13c0p .tabs__scrollControls_13c0p button:first-child {
425
413
  margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(24px / 2);
426
414
  }
427
- .tabs__fullWidthScroll_1hn1u {
415
+ .tabs__fullWidthScroll_13c0p {
428
416
  min-width: calc(100% - 2 * var(--gap-16));
429
417
  margin: var(--gap-0) var(--gap-16);
430
418
  }
431
- .tabs__container_1hn1u {
419
+ .tabs__container_13c0p {
432
420
  position: relative;
433
421
  overflow: hidden;
434
422
  margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
435
423
  padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
436
424
  }
437
- .tabs__title_1hn1u {
425
+ .tabs__title_13c0p {
438
426
  display: flex;
439
427
  align-items: center;
440
428
  height: 100%;
@@ -451,26 +439,26 @@
451
439
  user-select: none;
452
440
  outline: none;
453
441
  }
454
- .tabs__title_1hn1u:not(:disabled):hover {
442
+ .tabs__title_13c0p:not(:disabled):hover {
455
443
  color: var(--primary-tablist-hover-color);
456
444
  }
457
- .tabs__focused_1hn1u {
445
+ .tabs__focused_13c0p {
458
446
  outline: 2px solid var(--focus-color);
459
447
  outline-offset: 2px;
460
448
  }
461
- .tabs__collapsed_1hn1u {
449
+ .tabs__collapsed_13c0p {
462
450
  order: 99;
463
451
  visibility: collapse;
464
452
  }
465
- .tabs__selected_1hn1u {
453
+ .tabs__selected_13c0p {
466
454
  cursor: default;
467
455
  color: var(--primary-tablist-selected-color);
468
456
  }
469
- .tabs__disabled_1hn1u {
457
+ .tabs__disabled_13c0p {
470
458
  cursor: var(--disabled-cursor);
471
459
  color: var(--primary-tablist-disabled-color);
472
460
  }
473
- .tabs__line_1hn1u {
461
+ .tabs__line_13c0p {
474
462
  position: absolute;
475
463
  height: 3px;
476
464
  bottom: calc(var(--gap-2) / 2);
@@ -480,70 +468,69 @@
480
468
  transform 0.2s ease,
481
469
  width 0.2s ease;
482
470
  }
483
- .tabs__option_1hn1u {
471
+ .tabs__option_13c0p {
484
472
  color: var(--color-light-text-primary);
485
473
  }
486
- .tabs__s_1hn1u .tabs__title_1hn1u, .tabs__xs_1hn1u .tabs__title_1hn1u, .tabs__xxs_1hn1u .tabs__title_1hn1u {
474
+ .tabs__s_13c0p .tabs__title_13c0p, .tabs__xs_13c0p .tabs__title_13c0p, .tabs__xxs_13c0p .tabs__title_13c0p {
487
475
  padding: var(--primary-tablist-s-padding);
488
476
  }
489
- .tabs__s_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u, .tabs__xs_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u, .tabs__xxs_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u {
477
+ .tabs__s_13c0p .tabs__title_13c0p + .tabs__title_13c0p, .tabs__xs_13c0p .tabs__title_13c0p + .tabs__title_13c0p, .tabs__xxs_13c0p .tabs__title_13c0p + .tabs__title_13c0p {
490
478
  margin-left: var(--primary-tablist-s-gaps);
491
479
  }
492
- .tabs__s_1hn1u .tabs__pickerWrapper_1hn1u, .tabs__xs_1hn1u .tabs__pickerWrapper_1hn1u, .tabs__xxs_1hn1u .tabs__pickerWrapper_1hn1u {
480
+ .tabs__s_13c0p .tabs__pickerWrapper_13c0p, .tabs__xs_13c0p .tabs__pickerWrapper_13c0p, .tabs__xxs_13c0p .tabs__pickerWrapper_13c0p {
493
481
  margin-left: var(--primary-tablist-s-gaps);
494
482
  }
495
- .tabs__s_1hn1u .tabs__option_1hn1u, .tabs__xs_1hn1u .tabs__option_1hn1u, .tabs__xxs_1hn1u .tabs__option_1hn1u {
483
+ .tabs__s_13c0p .tabs__option_13c0p, .tabs__xs_13c0p .tabs__option_13c0p, .tabs__xxs_13c0p .tabs__option_13c0p {
496
484
  padding: var(--gap-0);
497
485
  }
498
- .tabs__m_1hn1u .tabs__title_1hn1u {
486
+ .tabs__m_13c0p .tabs__title_13c0p {
499
487
  padding: var(--primary-tablist-m-padding);
500
488
  }
501
- .tabs__m_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u {
489
+ .tabs__m_13c0p .tabs__title_13c0p + .tabs__title_13c0p {
502
490
  margin-left: var(--primary-tablist-m-gaps);
503
491
  }
504
- .tabs__m_1hn1u .tabs__pickerWrapper_1hn1u {
492
+ .tabs__m_13c0p .tabs__pickerWrapper_13c0p {
505
493
  margin-left: var(--primary-tablist-m-gaps);
506
494
  }
507
- .tabs__m_1hn1u .tabs__option_1hn1u {
495
+ .tabs__m_13c0p .tabs__option_13c0p {
508
496
  padding: var(--gap-0);
509
497
  }
510
- .tabs__l_1hn1u .tabs__title_1hn1u {
498
+ .tabs__l_13c0p .tabs__title_13c0p {
511
499
  padding: var(--primary-tablist-l-padding);
512
500
  }
513
- .tabs__l_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u {
501
+ .tabs__l_13c0p .tabs__title_13c0p + .tabs__title_13c0p {
514
502
  margin-left: var(--primary-tablist-l-gaps);
515
503
  }
516
- .tabs__l_1hn1u .tabs__pickerWrapper_1hn1u {
504
+ .tabs__l_13c0p .tabs__pickerWrapper_13c0p {
517
505
  margin-left: var(--primary-tablist-l-gaps);
518
506
  }
519
- .tabs__l_1hn1u .tabs__option_1hn1u {
507
+ .tabs__l_13c0p .tabs__option_13c0p {
520
508
  padding: var(--gap-0);
521
509
  }
522
- .tabs__xl_1hn1u .tabs__title_1hn1u {
510
+ .tabs__xl_13c0p .tabs__title_13c0p {
523
511
  padding: var(--primary-tablist-xl-padding);
524
512
  }
525
- .tabs__xl_1hn1u .tabs__title_1hn1u + .tabs__title_1hn1u {
513
+ .tabs__xl_13c0p .tabs__title_13c0p + .tabs__title_13c0p {
526
514
  margin-left: var(--primary-tablist-xl-gaps);
527
515
  }
528
- .tabs__xl_1hn1u .tabs__pickerWrapper_1hn1u {
516
+ .tabs__xl_13c0p .tabs__pickerWrapper_13c0p {
529
517
  margin-left: var(--primary-tablist-xl-gaps);
530
518
  }
531
- .tabs__xl_1hn1u .tabs__option_1hn1u {
519
+ .tabs__xl_13c0p .tabs__option_13c0p {
532
520
  padding: var(--gap-0);
533
521
  }
534
- .tabs__rightAddons_1hn1u {
522
+ .tabs__rightAddons_13c0p {
535
523
  display: flex;
536
524
  justify-content: center;
537
525
  align-items: center;
538
526
  margin-left: var(--gap-8);
539
527
  }
540
- .tabs__rightAddonsMarginZero_1hn1u {
528
+ .tabs__rightAddonsMarginZero_13c0p {
541
529
  margin-left: var(--gap-0);
542
530
  }
543
- .tabs__title_1hn1u.tabs__noTextStyle_1hn1u {
531
+ .tabs__title_13c0p.tabs__noTextStyle_13c0p {
544
532
  font-size: 18px;
545
533
  line-height: 24px;
546
534
  font-weight: 400;
547
- letter-spacing: -0.36px;
548
- font-family: var(--font-family-alfasans);
535
+ font-family: var(--font-family-system);
549
536
  }