@adyen/kyc-components 2.46.1 → 2.47.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/es/adyen-kyc-components.es.js +796 -357
  2. package/dist/style.css +836 -1264
  3. package/dist/types/components/Company/trustedFields.d.ts +7 -0
  4. package/dist/types/components/Dropins/CompanyDropin/components/CompanyDropinComponent.d.ts +1 -1
  5. package/dist/types/components/Dropins/CompanyDropin/types.d.ts +2 -0
  6. package/dist/types/components/Dropins/HighExposureDropin/components/AdditionalFieldsForHighExposureParentCompany.d.ts +1 -1
  7. package/dist/types/components/Dropins/HighExposureDropin/components/AdditionalFieldsForHighExposureUltimateParentCompany.d.ts +1 -1
  8. package/dist/types/components/Dropins/HighExposureDropin/components/HighExposureBusinessInformation.d.ts +2 -1
  9. package/dist/types/components/Dropins/HighExposureDropin/components/HighExposureOwnershipStructure.d.ts +4 -0
  10. package/dist/types/components/Dropins/HighExposureDropin/types.d.ts +80 -7
  11. package/dist/types/components/Dropins/HighExposureDropin/validate.d.ts +4 -1
  12. package/dist/types/components/EmbeddedDropins/UpdateLegalEntityForHighExposure/UpdateLegalEntityForHighExposure.d.ts +1 -1
  13. package/dist/types/components/Individual/types.d.ts +1 -1
  14. package/dist/types/components/internal/LegalFormField/LegalFormField.d.ts +1 -1
  15. package/dist/types/components/internal/LegalFormField/types.d.ts +4 -1
  16. package/dist/types/components/internal/NaceCodeField/NaceCodeField.d.ts +1 -1
  17. package/dist/types/components/internal/NaceCodeField/types.d.ts +5 -1
  18. package/dist/types/components/internal/Spinner/Spinner.d.ts +3 -4
  19. package/dist/types/components/internal/Tag/Tag.d.ts +6 -5
  20. package/dist/types/components/internal/Toast/types.d.ts +1 -1
  21. package/dist/types/components/internal/Typography/Typography.d.ts +3 -0
  22. package/dist/types/components/internal/Typography/types.d.ts +12 -0
  23. package/dist/types/core/models/api/legal-entity.d.ts +6 -0
  24. package/dist/types/core/models/api/trusted-fields-provider.d.ts +4 -0
  25. package/dist/types/utils/get-props.d.ts +0 -9
  26. package/dist/types/utils/roleMetadata.d.ts +3 -2
  27. package/package.json +1 -1
  28. package/dist/types/components/internal/Heading/Heading.d.ts +0 -10
  29. package/dist/types/components/internal/Spinner/index.d.ts +0 -1
  30. package/dist/types/components/internal/Tag/index.d.ts +0 -1
package/dist/style.css CHANGED
@@ -1,7 +1,5 @@
1
1
  /* #region Colors */
2
2
  /* #endregion */
3
- /* #region Fonts */
4
- /* #endregion */
5
3
  /* #region Borders */
6
4
  /* #endregion */
7
5
  /* #region Box-shadow */
@@ -18,18 +16,14 @@
18
16
  /* #endregion */
19
17
  /* #region Inline components */
20
18
  /* #endregion */
21
- /* stylelint-disable-line scss/dollar-variable-pattern */
22
- /* stylelint-disable-line scss/dollar-variable-pattern */
23
- /* stylelint-disable-line scss/dollar-variable-pattern */
24
- /* stylelint-disable-line scss/dollar-variable-pattern */
25
19
  .adyen-kyc-summary {
26
- color: #00112c;
27
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
28
- font-size: 15px;
20
+ color: var(--adyen-sdk-color-label-primary, #00112c);
21
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
22
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
23
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
24
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
29
25
  -webkit-font-smoothing: antialiased;
30
26
  -moz-osx-font-smoothing: grayscale;
31
- font-weight: 400;
32
- line-height: 1.4;
33
27
  }
34
28
  .adyen-kyc-summary *,
35
29
  .adyen-kyc-summary *::before,
@@ -37,8 +31,8 @@
37
31
  box-sizing: border-box;
38
32
  }
39
33
  .adyen-kyc-summary__heading {
40
- font-size: 24px;
41
- font-weight: 600;
34
+ font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
35
+ font-weight: var(--adyen-sdk-text-title-l-font-weight, 600);
42
36
  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
43
37
  }
44
38
  .adyen-kyc-summary-section {
@@ -54,8 +48,8 @@
54
48
  padding: var(--adyen-sdk-spacer-000, 0px);
55
49
  }
56
50
  .adyen-kyc-summary-section__heading {
57
- font-size: 15px;
58
- font-weight: 600;
51
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
52
+ font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
59
53
  }
60
54
  .adyen-kyc-summary-section__content {
61
55
  padding: var(--adyen-sdk-spacer-000, 0px);
@@ -63,7 +57,7 @@
63
57
  }
64
58
  .adyen-kyc-summary-section__field {
65
59
  display: flex;
66
- font-size: 15px;
60
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
67
61
  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
68
62
  }
69
63
  .adyen-layout-xs-only .adyen-kyc-summary-section__field {
@@ -86,15 +80,13 @@
86
80
  margin-top: var(--adyen-sdk-spacer-010, 2px);
87
81
  }
88
82
  .adyen-kyc-summary__legal-caption {
89
- color: #69778c;
90
- font-size: 13px;
83
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
84
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
91
85
  }
92
86
  .adyen-kyc-summary .adyen-kyc-review-alert {
93
87
  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
94
88
  }/* #region Colors */
95
89
  /* #endregion */
96
- /* #region Fonts */
97
- /* #endregion */
98
90
  /* #region Borders */
99
91
  /* #endregion */
100
92
  /* #region Box-shadow */
@@ -111,30 +103,26 @@
111
103
  /* #endregion */
112
104
  /* #region Inline components */
113
105
  /* #endregion */
114
- /* stylelint-disable-line scss/dollar-variable-pattern */
115
- /* stylelint-disable-line scss/dollar-variable-pattern */
116
- /* stylelint-disable-line scss/dollar-variable-pattern */
117
- /* stylelint-disable-line scss/dollar-variable-pattern */
118
106
  /* Base button */
119
107
  /* base/primary */
120
108
  .adyen-kyc-button {
121
- color: #00112c;
122
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
123
- font-size: 15px;
109
+ color: var(--adyen-sdk-color-label-primary, #00112c);
110
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
111
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
112
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
113
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
124
114
  -webkit-font-smoothing: antialiased;
125
115
  -moz-osx-font-smoothing: grayscale;
126
- font-weight: 400;
127
- line-height: 1.4;
128
116
  align-items: center;
129
117
  background: none;
130
118
  border: none;
131
119
  cursor: pointer;
132
120
  display: inline-flex;
133
121
  justify-content: center;
134
- line-height: 1.4;
135
- margin: 0;
122
+ line-height: calc(var(--adyen-sdk-text-body-line-height, 20px) * 1.4);
123
+ margin: var(--adyen-sdk-spacer-000, 0px);
136
124
  outline: none;
137
- padding: 0;
125
+ padding: var(--adyen-sdk-spacer-000, 0px);
138
126
  text-decoration: none;
139
127
  user-select: none;
140
128
  vertical-align: baseline;
@@ -143,10 +131,10 @@
143
131
  background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
144
132
  border-radius: var(--adyen-sdk-border-radius-m, 8px);
145
133
  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
146
- font-size: 14px;
147
- font-weight: 600;
134
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
135
+ font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
148
136
  height: fit-content;
149
- padding: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-060, 12px);
137
+ padding: var(--adyen-sdk-spacer-050, 10px) var(--adyen-sdk-spacer-060, 12px);
150
138
  position: relative;
151
139
  transition-property: color, background-color, box-shadow;
152
140
  }
@@ -157,13 +145,17 @@
157
145
  }
158
146
  .adyen-kyc-button::-moz-focus-inner {
159
147
  border: none;
160
- padding: 0;
148
+ padding: var(--adyen-sdk-spacer-000, 0px);
161
149
  }
162
150
  .adyen-kyc-button:hover {
163
151
  background-color: var(--adyen-sdk-color-background-inverse-primary-hover, #5c687c);
164
152
  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
165
153
  }
166
154
 
155
+ .adyen-kyc-button > span {
156
+ line-height: 1;
157
+ }
158
+
167
159
  /* secondary */
168
160
  .adyen-kyc-button--secondary {
169
161
  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
@@ -180,6 +172,7 @@
180
172
  color: var(--adyen-sdk-color-label-primary-active, #8d95a3);
181
173
  }
182
174
 
175
+ /* tertiary */
183
176
  .adyen-kyc-button--tertiary {
184
177
  color: var(--adyen-sdk-color-label-primary, #00112c);
185
178
  background-color: transparent;
@@ -209,7 +202,7 @@
209
202
  .adyen-kyc-button--small {
210
203
  border-radius: var(--adyen-sdk-border-radius-m, 8px);
211
204
  font-size: var(--adyen-sdk-text-body-font-size, 14px);
212
- padding: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-050, 10px);
205
+ padding: var(--adyen-sdk-spacer-030, 6px) var(--adyen-sdk-spacer-050, 10px);
213
206
  }
214
207
 
215
208
  .adyen-kyc-button--block {
@@ -222,6 +215,7 @@
222
215
  }
223
216
  .adyen-kyc-button--icon-left .adyen-kyc-icon {
224
217
  margin-left: 0;
218
+ height: 1em;
225
219
  }
226
220
 
227
221
  /* Disabled */
@@ -237,8 +231,6 @@ button[disabled]:hover {
237
231
  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
238
232
  }/* #region Colors */
239
233
  /* #endregion */
240
- /* #region Fonts */
241
- /* #endregion */
242
234
  /* #region Borders */
243
235
  /* #endregion */
244
236
  /* #region Box-shadow */
@@ -255,21 +247,17 @@ button[disabled]:hover {
255
247
  /* #endregion */
256
248
  /* #region Inline components */
257
249
  /* #endregion */
258
- /* stylelint-disable-line scss/dollar-variable-pattern */
259
- /* stylelint-disable-line scss/dollar-variable-pattern */
260
- /* stylelint-disable-line scss/dollar-variable-pattern */
261
- /* stylelint-disable-line scss/dollar-variable-pattern */
262
250
  .adyen-kyc-link {
263
- color: #00112c;
264
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
265
- font-size: 15px;
251
+ color: var(--adyen-sdk-color-label-primary, #00112c);
252
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
253
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
254
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
255
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
266
256
  -webkit-font-smoothing: antialiased;
267
257
  -moz-osx-font-smoothing: grayscale;
268
- font-weight: 400;
269
- line-height: 1.4;
270
258
  background-color: transparent;
271
259
  border: 0;
272
- color: #06f;
260
+ color: var(--adyen-sdk-color-link-primary, #00112c);
273
261
  cursor: pointer;
274
262
  display: inline;
275
263
  padding: var(--adyen-sdk-spacer-000, 0px);
@@ -282,17 +270,18 @@ button[disabled]:hover {
282
270
  box-sizing: border-box;
283
271
  }
284
272
  .adyen-kyc-link:hover {
273
+ color: var(--adyen-sdk-color-link-primary-hover, #5c687c);
285
274
  text-decoration: underline;
286
275
  }
287
276
  .adyen-kyc-link:active {
288
- color: #06f;
277
+ color: var(--adyen-sdk-color-link-primary-active, #8d95a3);
289
278
  }
290
279
  .adyen-kyc-link:focus {
291
280
  outline: none;
292
281
  text-decoration: underline;
293
282
  }
294
283
  .adyen-kyc-link:visited {
295
- color: #06f;
284
+ color: var(--adyen-sdk-color-link-primary, #00112c);
296
285
  }
297
286
  .adyen-kyc-link--inherit, .adyen-kyc-link--inherit:hover, .adyen-kyc-link--inherit:active, .adyen-kyc-link--inherit:visited {
298
287
  color: inherit;
@@ -306,7 +295,7 @@ button[disabled]:hover {
306
295
  color: inherit;
307
296
  }
308
297
  .adyen-kyc-link--underline:hover {
309
- color: #00112c;
298
+ color: var(--adyen-sdk-color-label-primary, #00112c);
310
299
  }
311
300
  .adyen-kyc-link--with-icon, .adyen-kyc-link--with-icon:hover {
312
301
  text-decoration: none;
@@ -350,54 +339,14 @@ button[disabled]:hover {
350
339
  }
351
340
  .adyen-kyc-link__icon[class*="-small "], .adyen-kyc-link__icon[class$=-small] {
352
341
  margin: var(--adyen-sdk-spacer-000, 0px);
353
- }/* #region Colors */
354
- /* #endregion */
355
- /* #region Fonts */
356
- /* #endregion */
357
- /* #region Borders */
358
- /* #endregion */
359
- /* #region Box-shadow */
360
- /* #endregion */
361
- /* #region Shadows */
362
- /* #endregion */
363
- /* #region Z-index */
364
- /* #endregion */
365
- /* #region Transition */
366
- /* #endregion */
367
- /* #region Timing functions */
368
- /* #endregion */
369
- /* #region Focus ring */
370
- /* #endregion */
371
- /* #region Inline components */
372
- /* #endregion */
373
- .adyen-kyc-icon {
342
+ }.adyen-kyc-icon {
374
343
  color: inherit;
375
344
  display: inline-block;
376
345
  vertical-align: baseline;
377
346
  }
378
347
  .adyen-kyc-icon svg {
379
348
  height: 1em;
380
- }/* #region Colors */
381
- /* #endregion */
382
- /* #region Fonts */
383
- /* #endregion */
384
- /* #region Borders */
385
- /* #endregion */
386
- /* #region Box-shadow */
387
- /* #endregion */
388
- /* #region Shadows */
389
- /* #endregion */
390
- /* #region Z-index */
391
- /* #endregion */
392
- /* #region Transition */
393
- /* #endregion */
394
- /* #region Timing functions */
395
- /* #endregion */
396
- /* #region Focus ring */
397
- /* #endregion */
398
- /* #region Inline components */
399
- /* #endregion */
400
- .adyen-kyc-spinner__wrapper {
349
+ }.adyen-kyc-spinner__wrapper {
401
350
  align-items: center;
402
351
  display: flex;
403
352
  height: 100%;
@@ -412,7 +361,7 @@ button[disabled]:hover {
412
361
 
413
362
  .adyen-kyc-spinner {
414
363
  animation: rotateSpinner 1.5s infinite linear;
415
- border: 3px solid #06f;
364
+ border: var(--adyen-sdk-border-width-l, 3px) solid var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
416
365
  border-radius: 50%;
417
366
  border-top-color: transparent;
418
367
  height: 43px;
@@ -425,7 +374,7 @@ button[disabled]:hover {
425
374
  }
426
375
 
427
376
  .adyen-kyc-spinner--small {
428
- border-width: 2px;
377
+ border-width: var(--adyen-sdk-border-width-m, 2px);
429
378
  height: 16px;
430
379
  width: 16px;
431
380
  }
@@ -453,8 +402,6 @@ button[disabled]:hover {
453
402
  margin-bottom: var(--adyen-sdk-spacer-080, 20px);
454
403
  }/* #region Colors */
455
404
  /* #endregion */
456
- /* #region Fonts */
457
- /* #endregion */
458
405
  /* #region Borders */
459
406
  /* #endregion */
460
407
  /* #region Box-shadow */
@@ -471,20 +418,16 @@ button[disabled]:hover {
471
418
  /* #endregion */
472
419
  /* #region Inline components */
473
420
  /* #endregion */
474
- /* stylelint-disable-line scss/dollar-variable-pattern */
475
- /* stylelint-disable-line scss/dollar-variable-pattern */
476
- /* stylelint-disable-line scss/dollar-variable-pattern */
477
- /* stylelint-disable-line scss/dollar-variable-pattern */
478
421
  /* Base button */
479
422
  .adyen-kyc-alert {
480
- color: #00112c;
481
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
482
- font-size: 15px;
423
+ color: var(--adyen-sdk-color-label-primary, #00112c);
424
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
425
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
426
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
427
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
483
428
  -webkit-font-smoothing: antialiased;
484
429
  -moz-osx-font-smoothing: grayscale;
485
- font-weight: 400;
486
- line-height: 1.4;
487
- border-radius: 12px;
430
+ border-radius: var(--adyen-sdk-border-radius-l, 12px);
488
431
  padding: var(--adyen-sdk-spacer-070, 16px);
489
432
  word-break: break-word;
490
433
  display: flex;
@@ -499,31 +442,31 @@ button[disabled]:hover {
499
442
 
500
443
  .adyen-kyc-alert--basic {
501
444
  background-color: #f3f6f9;
502
- color: #001e4c;
445
+ color: var(--adyen-sdk-color-label-primary, #00112c);
503
446
  }
504
447
 
505
448
  .adyen-kyc-alert--information {
506
449
  background-color: #cce0ff;
507
- color: #0047b2;
450
+ color: var(--adyen-sdk-color-label-highlight, #0070f5);
508
451
  }
509
452
 
510
453
  .adyen-kyc-alert--without-explanation .adyen-kyc-alert__title {
511
- font-weight: 100;
454
+ font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
512
455
  }
513
456
 
514
457
  .adyen-kyc-alert--error {
515
458
  background-color: #fce5e5;
516
- color: #e50000;
459
+ color: var(--adyen-sdk-color-label-critical, #e22d2d);
517
460
  }
518
461
 
519
462
  .adyen-kyc-alert--warning {
520
463
  background-color: #ffeacc;
521
- color: #7f4a00;
464
+ color: var(--adyen-sdk-color-label-warning, #b06300);
522
465
  }
523
466
 
524
467
  .adyen-kyc-alert--success {
525
468
  background-color: #cef2dd;
526
- color: #055f29;
469
+ color: var(--adyen-sdk-color-label-success, #07893c);
527
470
  }
528
471
 
529
472
  .adyen-kyc-alert__header {
@@ -532,51 +475,51 @@ button[disabled]:hover {
532
475
  }
533
476
 
534
477
  .adyen-kyc-alert__icon {
535
- height: 15px;
536
- line-height: 1;
478
+ height: var(--adyen-sdk-text-body-font-size, 14px);
479
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
537
480
  }
538
481
 
539
482
  .adyen-kyc-alert__title {
540
- color: #20304c;
483
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
541
484
  flex-grow: 1;
542
- font-size: 15px;
543
- font-weight: 600;
544
- line-height: 1.4;
485
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
486
+ font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
487
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
545
488
  margin-left: var(--adyen-sdk-spacer-070, 16px);
546
489
  }
547
490
  .adyen-kyc-alert__title:first-child {
548
491
  margin-left: var(--adyen-sdk-spacer-000, 0px);
549
492
  }
550
493
  .adyen-kyc-alert__title--no-content {
551
- font-weight: 400;
494
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
552
495
  }
553
496
 
554
497
  .adyen-kyc-alert__action {
555
- color: #00112c;
556
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
557
- font-size: 15px;
498
+ color: var(--adyen-sdk-color-label-primary, #00112c);
499
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
500
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
501
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
502
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
558
503
  -webkit-font-smoothing: antialiased;
559
504
  -moz-osx-font-smoothing: grayscale;
560
- font-weight: 400;
561
- line-height: 1.4;
562
505
  align-items: center;
563
506
  background: none;
564
507
  border: none;
565
508
  cursor: pointer;
566
509
  display: inline-flex;
567
510
  justify-content: center;
568
- line-height: 1.4;
569
- margin: 0;
511
+ line-height: calc(var(--adyen-sdk-text-body-line-height, 20px) * 1.4);
512
+ margin: var(--adyen-sdk-spacer-000, 0px);
570
513
  outline: none;
571
- padding: 0;
514
+ padding: var(--adyen-sdk-spacer-000, 0px);
572
515
  text-decoration: none;
573
516
  user-select: none;
574
517
  vertical-align: baseline;
575
518
  white-space: nowrap;
576
519
  color: inherit;
577
- font-size: 13px;
578
- font-weight: 600;
579
- line-height: 1;
520
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
521
+ font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
522
+ line-height: var(--adyen-sdk-text-caption-line-height, 18px);
580
523
  margin-left: var(--adyen-sdk-spacer-090, 24px);
581
524
  text-transform: uppercase;
582
525
  white-space: nowrap;
@@ -588,39 +531,39 @@ button[disabled]:hover {
588
531
  }
589
532
  .adyen-kyc-alert__action::-moz-focus-inner {
590
533
  border: none;
591
- padding: 0;
534
+ padding: var(--adyen-sdk-spacer-000, 0px);
592
535
  }
593
536
  .adyen-kyc-alert__action:hover {
594
- color: #00112c;
537
+ color: var(--adyen-sdk-color-label-primary, #00112c);
595
538
  text-decoration: underline;
596
539
  }
597
540
 
598
541
  .adyen-kyc-alert__dismiss {
599
- color: #00112c;
600
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
601
- font-size: 15px;
542
+ color: var(--adyen-sdk-color-label-primary, #00112c);
543
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
544
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
545
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
546
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
602
547
  -webkit-font-smoothing: antialiased;
603
548
  -moz-osx-font-smoothing: grayscale;
604
- font-weight: 400;
605
- line-height: 1.4;
606
549
  align-items: center;
607
550
  background: none;
608
551
  border: none;
609
552
  cursor: pointer;
610
553
  display: inline-flex;
611
554
  justify-content: center;
612
- line-height: 1.4;
613
- margin: 0;
555
+ line-height: calc(var(--adyen-sdk-text-body-line-height, 20px) * 1.4);
556
+ margin: var(--adyen-sdk-spacer-000, 0px);
614
557
  outline: none;
615
- padding: 0;
558
+ padding: var(--adyen-sdk-spacer-000, 0px);
616
559
  text-decoration: none;
617
560
  user-select: none;
618
561
  vertical-align: baseline;
619
562
  white-space: nowrap;
620
563
  color: inherit;
621
- font-size: 15px;
622
- height: 15px;
623
- line-height: 1;
564
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
565
+ height: var(--adyen-sdk-text-body-font-size, 14px);
566
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
624
567
  margin-left: var(--adyen-sdk-spacer-120, 48px);
625
568
  }
626
569
  .adyen-kyc-alert__dismiss *,
@@ -630,37 +573,37 @@ button[disabled]:hover {
630
573
  }
631
574
  .adyen-kyc-alert__dismiss::-moz-focus-inner {
632
575
  border: none;
633
- padding: 0;
576
+ padding: var(--adyen-sdk-spacer-000, 0px);
634
577
  }
635
578
  .adyen-kyc-alert__dismiss:hover {
636
579
  background: transparent;
637
- color: #00112c;
580
+ color: var(--adyen-sdk-color-label-primary, #00112c);
638
581
  }
639
582
 
640
583
  .adyen-kyc-alert__explanation {
641
- color: #20304c;
642
- font-size: 14px;
643
- line-height: 1.4;
584
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
585
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
586
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
644
587
  padding-left: var(--adyen-sdk-spacer-100, 32px);
645
588
  }
646
589
  .adyen-kyc-alert__explanation .adyen-kyc-link {
647
- color: #00112c;
648
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
649
- font-size: 15px;
590
+ color: var(--adyen-sdk-color-label-primary, #00112c);
591
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
592
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
593
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
594
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
650
595
  -webkit-font-smoothing: antialiased;
651
596
  -moz-osx-font-smoothing: grayscale;
652
- font-weight: 400;
653
- line-height: 1.4;
654
597
  background-color: transparent;
655
598
  border: 0;
656
- color: #06f;
599
+ color: var(--adyen-sdk-color-link-primary, #00112c);
657
600
  cursor: pointer;
658
601
  display: inline;
659
602
  padding: var(--adyen-sdk-spacer-000, 0px);
660
603
  text-decoration: none;
661
604
  vertical-align: baseline;
662
- color: #20304c;
663
- font-size: 14px;
605
+ color: var(--adyen-sdk-color-link-primary, #00112c);
606
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
664
607
  text-decoration: underline;
665
608
  }
666
609
  .adyen-kyc-alert__explanation .adyen-kyc-link *,
@@ -669,17 +612,18 @@ button[disabled]:hover {
669
612
  box-sizing: border-box;
670
613
  }
671
614
  .adyen-kyc-alert__explanation .adyen-kyc-link:hover {
615
+ color: var(--adyen-sdk-color-link-primary-hover, #5c687c);
672
616
  text-decoration: underline;
673
617
  }
674
618
  .adyen-kyc-alert__explanation .adyen-kyc-link:active {
675
- color: #06f;
619
+ color: var(--adyen-sdk-color-link-primary-active, #8d95a3);
676
620
  }
677
621
  .adyen-kyc-alert__explanation .adyen-kyc-link:focus {
678
622
  outline: none;
679
623
  text-decoration: underline;
680
624
  }
681
625
  .adyen-kyc-alert__explanation .adyen-kyc-link:visited {
682
- color: #06f;
626
+ color: var(--adyen-sdk-color-link-primary, #00112c);
683
627
  }
684
628
  .adyen-kyc-alert__explanation .adyen-kyc-link, .adyen-kyc-alert__explanation .adyen-kyc-link:hover, .adyen-kyc-alert__explanation .adyen-kyc-link:active, .adyen-kyc-alert__explanation .adyen-kyc-link:visited {
685
629
  color: inherit;
@@ -687,20 +631,23 @@ button[disabled]:hover {
687
631
  font-weight: inherit;
688
632
  }
689
633
  .adyen-kyc-alert__explanation .adyen-kyc-link:hover {
690
- color: #20304c;
634
+ color: var(--adyen-sdk-color-link-primary-hover, #5c687c);
635
+ }
636
+ .adyen-kyc-alert__explanation .adyen-kyc-link:active {
637
+ color: var(--adyen-sdk-color-link-primary-active, #8d95a3);
691
638
  }
692
639
  .adyen-kyc-alert__explanation .adyen-kyc-link:focus {
693
- border: 1px dotted;
640
+ border: var(--adyen-sdk-border-width-s, 1px) dotted;
694
641
  }
695
642
 
696
643
  .adyen-kyc-alert__list {
697
- color: #00112c;
698
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
699
- font-size: 15px;
644
+ color: var(--adyen-sdk-color-label-primary, #00112c);
645
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
646
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
647
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
648
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
700
649
  -webkit-font-smoothing: antialiased;
701
650
  -moz-osx-font-smoothing: grayscale;
702
- font-weight: 400;
703
- line-height: 1.4;
704
651
  display: block;
705
652
  list-style-position: outside;
706
653
  list-style-type: disc;
@@ -716,23 +663,23 @@ button[disabled]:hover {
716
663
  }
717
664
 
718
665
  .adyen-kyc-alert__link {
719
- color: #00112c;
720
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
721
- font-size: 15px;
666
+ color: var(--adyen-sdk-color-label-primary, #00112c);
667
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
668
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
669
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
670
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
722
671
  -webkit-font-smoothing: antialiased;
723
672
  -moz-osx-font-smoothing: grayscale;
724
- font-weight: 400;
725
- line-height: 1.4;
726
673
  background-color: transparent;
727
674
  border: 0;
728
- color: #06f;
675
+ color: var(--adyen-sdk-color-link-primary, #00112c);
729
676
  cursor: pointer;
730
677
  display: inline;
731
678
  padding: var(--adyen-sdk-spacer-000, 0px);
732
679
  text-decoration: none;
733
680
  vertical-align: baseline;
734
- color: #20304c;
735
- font-size: 14px;
681
+ color: var(--adyen-sdk-color-link-primary, #00112c);
682
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
736
683
  text-decoration: underline;
737
684
  }
738
685
  .adyen-kyc-alert__link *,
@@ -741,17 +688,18 @@ button[disabled]:hover {
741
688
  box-sizing: border-box;
742
689
  }
743
690
  .adyen-kyc-alert__link:hover {
691
+ color: var(--adyen-sdk-color-link-primary-hover, #5c687c);
744
692
  text-decoration: underline;
745
693
  }
746
694
  .adyen-kyc-alert__link:active {
747
- color: #06f;
695
+ color: var(--adyen-sdk-color-link-primary-active, #8d95a3);
748
696
  }
749
697
  .adyen-kyc-alert__link:focus {
750
698
  outline: none;
751
699
  text-decoration: underline;
752
700
  }
753
701
  .adyen-kyc-alert__link:visited {
754
- color: #06f;
702
+ color: var(--adyen-sdk-color-link-primary, #00112c);
755
703
  }
756
704
  .adyen-kyc-alert__link, .adyen-kyc-alert__link:hover, .adyen-kyc-alert__link:active, .adyen-kyc-alert__link:visited {
757
705
  color: inherit;
@@ -759,7 +707,10 @@ button[disabled]:hover {
759
707
  font-weight: inherit;
760
708
  }
761
709
  .adyen-kyc-alert__link:hover {
762
- color: #20304c;
710
+ color: var(--adyen-sdk-color-link-primary-hover, #5c687c);
711
+ }
712
+ .adyen-kyc-alert__link:active {
713
+ color: var(--adyen-sdk-color-link-primary-active, #8d95a3);
763
714
  }
764
715
 
765
716
  .adyen-kyc-review-alert {
@@ -768,14 +719,12 @@ button[disabled]:hover {
768
719
 
769
720
  .adyen-kyc-icon.adyen-kyc-alert-error-icon::before {
770
721
  display: inline-block;
771
- color: #a10000;
722
+ color: var(--adyen-sdk-color-label-critical, #e22d2d);
772
723
  transform: scale(1.6);
773
724
  }.adyen-kyc-individual .adyen-kyc-form {
774
725
  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
775
726
  }/* #region Colors */
776
727
  /* #endregion */
777
- /* #region Fonts */
778
- /* #endregion */
779
728
  /* #region Borders */
780
729
  /* #endregion */
781
730
  /* #region Box-shadow */
@@ -802,27 +751,27 @@ button[disabled]:hover {
802
751
  display: block;
803
752
  }
804
753
  .adyen-kyc-label--disabled {
805
- color: #f3f6f9;
754
+ color: var(--adyen-sdk-color-label-disabled, #8d95a3);
806
755
  opacity: 0.5;
807
756
  pointer-events: none;
808
757
  }
809
758
 
810
759
  .adyen-kyc-optional-label {
811
- color: #69778c;
760
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
812
761
  }
813
762
 
814
763
  .adyen-kyc-label__text {
815
- color: #00112c;
764
+ color: var(--adyen-sdk-color-label-primary, #00112c);
816
765
  display: block;
817
- font-size: 15px;
818
- font-weight: normal;
766
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
767
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
819
768
  transition: color 0.1s ease-out;
820
769
  }
821
770
 
822
771
  .adyen-kyc-helper-text {
823
- color: #69778c;
824
- font-size: 13px;
825
- font-weight: normal;
772
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
773
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
774
+ font-weight: var(--adyen-sdk-text-caption-font-size, 12px);
826
775
  display: flex;
827
776
  align-items: center;
828
777
  }
@@ -833,25 +782,25 @@ button[disabled]:hover {
833
782
  margin-top: var(--adyen-sdk-spacer-020, 4px);
834
783
  }
835
784
  .adyen-kyc-helper-text__valid-format-check {
836
- color: #0abf53;
837
- font-size: 21px;
785
+ color: var(--adyen-sdk-color-label-success, #07893c);
786
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
838
787
  display: inline-flex;
839
788
  }
840
789
 
841
790
  .adyen-kyc-label__text--error {
842
- color: #e50000;
791
+ color: var(--adyen-sdk-color-label-critical, #e22d2d);
843
792
  }
844
793
 
845
794
  .adyen-kyc-label--focused .adyen-kyc-label__text {
846
- color: #06f;
795
+ color: var(--adyen-sdk-color-label-primary, #00112c);
847
796
  }
848
797
 
849
798
  .adyen-kyc-error-text {
850
799
  align-items: center;
851
- color: #e50000;
800
+ color: var(--adyen-sdk-color-label-critical, #e22d2d);
852
801
  display: flex;
853
- font-size: 13px;
854
- font-weight: normal;
802
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
803
+ font-weight: var(--adyen-sdk-text-caption-font-size, 12px);
855
804
  margin-top: var(--adyen-sdk-spacer-020, 4px);
856
805
  position: relative;
857
806
  }
@@ -867,8 +816,6 @@ button[disabled]:hover {
867
816
  padding-left: var(--adyen-sdk-spacer-070, 16px);
868
817
  }/* #region Colors */
869
818
  /* #endregion */
870
- /* #region Fonts */
871
- /* #endregion */
872
819
  /* #region Borders */
873
820
  /* #endregion */
874
821
  /* #region Box-shadow */
@@ -885,24 +832,20 @@ button[disabled]:hover {
885
832
  /* #endregion */
886
833
  /* #region Inline components */
887
834
  /* #endregion */
888
- /* stylelint-disable-line scss/dollar-variable-pattern */
889
- /* stylelint-disable-line scss/dollar-variable-pattern */
890
- /* stylelint-disable-line scss/dollar-variable-pattern */
891
- /* stylelint-disable-line scss/dollar-variable-pattern */
892
835
  .adyen-kyc-dropdown {
893
- font-size: 1em;
836
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
894
837
  max-width: 100%;
895
838
  width: 100%;
896
839
  }
897
840
 
898
841
  .adyen-kyc-dropdown-button {
899
842
  background: #fff;
900
- border: 1px solid #dce0e5;
901
- border-radius: 6px;
843
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-tertiary, #8d95a3);
844
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
902
845
  box-sizing: border-box;
903
- color: #00112c;
904
- font-size: 1em;
905
- line-height: 20px;
846
+ color: var(--adyen-sdk-color-label-primary, #00112c);
847
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
848
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
906
849
  min-height: 40px;
907
850
  outline: 0;
908
851
  padding: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-090, 24px) var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-060, 12px);
@@ -912,11 +855,11 @@ button[disabled]:hover {
912
855
  }
913
856
 
914
857
  .adyen-kyc-dropdown-button:hover {
915
- border-color: #99a3ad;
858
+ border-color: var(--adyen-sdk-color-outline-tertiary-hover, #6d7789);
916
859
  }
917
860
 
918
861
  .adyen-kyc-dropdown-button__icon svg {
919
- border-radius: 3px;
862
+ border-radius: var(--adyen-sdk-border-radius-s, 4px);
920
863
  margin-right: var(--adyen-sdk-spacer-040, 8px);
921
864
  height: 26px;
922
865
  max-width: 40px;
@@ -926,16 +869,16 @@ button[disabled]:hover {
926
869
  .adyen-kyc-dropdown-button--active:hover,
927
870
  .adyen-kyc-dropdown-button:active,
928
871
  .adyen-kyc-dropdown-button:focus {
929
- border-color: #06f;
930
- box-shadow: 0 0 0 2px #80b2ff;
872
+ border-color: var(--adyen-sdk-color-outline-tertiary-active, #00112c);
873
+ outline: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-tertiary-active, #00112c);
931
874
  }
932
875
 
933
876
  .adyen-kyc-dropdown-button--readonly, .adyen-kyc-dropdown-button--readonly.adyen-kyc-dropdown-button--active, .adyen-kyc-dropdown-button--readonly:hover, .adyen-kyc-dropdown-button--readonly:focus {
934
- border: 1px solid #a5afbd;
935
- color: #8390a3;
877
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-disabled, #dbdee2);
878
+ color: var(--adyen-sdk-color-label-disabled, #8d95a3);
936
879
  cursor: not-allowed;
937
880
  background-color: #f3f6f9;
938
- border-color: #dce0e5;
881
+ border-color: var(--adyen-sdk-color-outline-disabled, #dbdee2);
939
882
  }
940
883
 
941
884
  .adyen-kyc-dropdown-button--readonly::after {
@@ -943,20 +886,20 @@ button[disabled]:hover {
943
886
  }
944
887
 
945
888
  .adyen-kyc-dropdown-button--invalid {
946
- border-color: #e50000;
889
+ border-color: var(--adyen-sdk-color-outline-critical, #e22d2d);
947
890
  }
948
891
 
949
892
  .adyen-kyc-dropdown-button__text {
950
- line-height: 1;
893
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
951
894
  overflow: hidden;
952
895
  pointer-events: none;
953
896
  text-overflow: ellipsis;
954
897
  white-space: nowrap;
955
898
  }
956
899
  .adyen-kyc-dropdown-button__text--placeholder {
957
- color: #a5afbd;
958
- font-weight: 200;
959
- line-height: 1.2;
900
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
901
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
902
+ line-height: calc(var(--adyen-sdk-text-body-line-height, 20px) * 1.2);
960
903
  }
961
904
 
962
905
  .adyen-kyc-dropdown-button-search {
@@ -965,12 +908,12 @@ button[disabled]:hover {
965
908
  width: 100%;
966
909
  }
967
910
  .adyen-kyc-dropdown-button-search__icon {
968
- color: #a5afbd;
969
- font-size: 0.81em;
911
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
912
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
970
913
  padding-right: var(--adyen-sdk-spacer-040, 8px);
971
914
  }
972
915
  .adyen-kyc-dropdown-button-search .adyen-kyc-filter-input::placeholder {
973
- color: #a5afbd;
916
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
974
917
  }
975
918
 
976
919
  .adyen-kyc-dropdown-button-search::after {
@@ -981,11 +924,11 @@ button[disabled]:hover {
981
924
  background: #a5afbd;
982
925
  }
983
926
  .adyen-kyc-loading-indicator::after {
984
- border-top-color: #a5afbd;
927
+ border-top-color: var(--adyen-sdk-color-outline-secondary, #c9cdd3);
985
928
  }
986
929
 
987
930
  .adyen-kyc-dropdown-list {
988
- border-radius: 6px;
931
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
989
932
  box-shadow: 0 2px 7px rgba(0, 15, 45, 0.3);
990
933
  max-height: 145px;
991
934
  z-index: 2;
@@ -1003,11 +946,11 @@ button[disabled]:hover {
1003
946
  }
1004
947
 
1005
948
  .adyen-kyc-dropdown-element {
1006
- border: 1px solid transparent;
949
+ border: var(--adyen-sdk-border-width-s, 1px) solid transparent;
1007
950
  cursor: pointer;
1008
- font-size: 0.81em;
951
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
1009
952
  hyphens: auto;
1010
- line-height: 20px;
953
+ line-height: var(--adyen-sdk-text-caption-line-height, 18px);
1011
954
  outline: 0;
1012
955
  padding: var(--adyen-sdk-spacer-040, 8px);
1013
956
  transition: background 0.2s ease-out, border-color 0.2s ease-out;
@@ -1017,7 +960,7 @@ button[disabled]:hover {
1017
960
  .adyen-kyc-dropdown-element.adyen-kyc-dropdown-search-element {
1018
961
  align-items: baseline;
1019
962
  display: flex;
1020
- font-size: 1em;
963
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1021
964
  width: 100%;
1022
965
  }
1023
966
 
@@ -1025,15 +968,15 @@ button[disabled]:hover {
1025
968
  flex: 1;
1026
969
  }
1027
970
  .adyen-kyc-dropdown-search-element__description--highlight {
1028
- font-weight: 600;
971
+ font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
1029
972
  }
1030
973
  .adyen-kyc-dropdown-search-element__addresses {
1031
- color: #69778c;
974
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
1032
975
  display: flex;
1033
976
  }
1034
977
  .adyen-kyc-dropdown-search-element__addresses--icon {
1035
978
  align-items: center;
1036
- color: #69778c;
979
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
1037
980
  display: flex;
1038
981
  margin-left: var(--adyen-sdk-spacer-040, 8px);
1039
982
  }
@@ -1073,7 +1016,7 @@ button[disabled]:hover {
1073
1016
  }
1074
1017
 
1075
1018
  .adyen-kyc-dropdown-element__icon svg {
1076
- border-radius: 4px;
1019
+ border-radius: var(--adyen-sdk-border-radius-s, 4px);
1077
1020
  margin-right: var(--adyen-sdk-spacer-040, 8px);
1078
1021
  height: 26px;
1079
1022
  max-width: 40px;
@@ -1082,11 +1025,7 @@ button[disabled]:hover {
1082
1025
  .adyen-kyc-dropdown-element.adyen-kyc-dropdown-element-description {
1083
1026
  align-items: baseline;
1084
1027
  flex-direction: column;
1085
- font-size: 1em;
1086
- }
1087
-
1088
- .adyen-kyc-dropdown-element-description__text {
1089
- color: #69778c;
1028
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1090
1029
  }
1091
1030
 
1092
1031
  .adyen-kyc-dropdown + .adyen-kyc-input__inline-validation {
@@ -1101,8 +1040,8 @@ button[disabled]:hover {
1101
1040
  }
1102
1041
  .adyen-kyc-dropdown-selected-items .adyen-kyc-tag {
1103
1042
  align-self: center;
1104
- border-radius: 6px;
1105
- color: #00112c;
1043
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
1044
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1106
1045
  letter-spacing: 0.2px;
1107
1046
  margin: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-000, 0px);
1108
1047
  padding: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-040, 8px);
@@ -1114,8 +1053,6 @@ button[disabled]:hover {
1114
1053
  background-color: #e6f0ff;
1115
1054
  }/* #region Colors */
1116
1055
  /* #endregion */
1117
- /* #region Fonts */
1118
- /* #endregion */
1119
1056
  /* #region Borders */
1120
1057
  /* #endregion */
1121
1058
  /* #region Box-shadow */
@@ -1132,10 +1069,6 @@ button[disabled]:hover {
1132
1069
  /* #endregion */
1133
1070
  /* #region Inline components */
1134
1071
  /* #endregion */
1135
- /* stylelint-disable-line scss/dollar-variable-pattern */
1136
- /* stylelint-disable-line scss/dollar-variable-pattern */
1137
- /* stylelint-disable-line scss/dollar-variable-pattern */
1138
- /* stylelint-disable-line scss/dollar-variable-pattern */
1139
1072
  .adyen-kyc-loader__wrapper {
1140
1073
  align-items: center;
1141
1074
  display: flex;
@@ -1150,16 +1083,16 @@ button[disabled]:hover {
1150
1083
  }
1151
1084
 
1152
1085
  .adyen-kyc-loading-indicator {
1153
- color: #00112c;
1154
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1155
- font-size: 15px;
1086
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1087
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1088
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1089
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1090
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
1156
1091
  -webkit-font-smoothing: antialiased;
1157
1092
  -moz-osx-font-smoothing: grayscale;
1158
- font-weight: 400;
1159
- line-height: 1.4;
1160
1093
  box-sizing: border-box;
1161
1094
  display: inline-block;
1162
- font-size: 15px;
1095
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1163
1096
  font-weight: 100;
1164
1097
  min-height: 24px;
1165
1098
  min-width: 24px;
@@ -1172,9 +1105,9 @@ button[disabled]:hover {
1172
1105
  }
1173
1106
  .adyen-kyc-loading-indicator::after {
1174
1107
  animation: adyen-kyc-progress-circular-rotate 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
1175
- border: 3px solid #dce0e5;
1108
+ border: var(--adyen-sdk-border-width-l, 3px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
1176
1109
  border-radius: 50%;
1177
- border-top-color: #06f;
1110
+ border-top-color: var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
1178
1111
  box-sizing: border-box;
1179
1112
  content: "";
1180
1113
  display: block;
@@ -1195,20 +1128,20 @@ button[disabled]:hover {
1195
1128
  padding: var(--adyen-sdk-spacer-040, 8px);
1196
1129
  }
1197
1130
  .adyen-kyc-loading-indicator--xsmall::after {
1198
- border-width: 2px;
1131
+ border-width: var(--adyen-sdk-border-width-m, 2px);
1199
1132
  min-height: 14px;
1200
1133
  min-width: 14px;
1201
1134
  }
1202
1135
  .adyen-kyc-loading-indicator--dot::before {
1203
- background: #06f;
1136
+ background: var(--adyen-sdk-color-background-inverse-primary, #00112c);
1204
1137
  border-radius: 50%;
1205
1138
  content: "";
1206
1139
  display: block;
1207
- left: 4px;
1208
- min-height: 7px;
1209
- min-width: 7px;
1140
+ left: 5px;
1141
+ min-height: 6px;
1142
+ min-width: 6px;
1210
1143
  position: absolute;
1211
- top: 4px;
1144
+ top: 5px;
1212
1145
  }
1213
1146
  .adyen-kyc-loading-indicator--small {
1214
1147
  padding: var(--adyen-sdk-spacer-060, 12px);
@@ -1229,8 +1162,6 @@ button[disabled]:hover {
1229
1162
  }
1230
1163
  }/* #region Colors */
1231
1164
  /* #endregion */
1232
- /* #region Fonts */
1233
- /* #endregion */
1234
1165
  /* #region Borders */
1235
1166
  /* #endregion */
1236
1167
  /* #region Box-shadow */
@@ -1247,31 +1178,23 @@ button[disabled]:hover {
1247
1178
  /* #endregion */
1248
1179
  /* #region Inline components */
1249
1180
  /* #endregion */
1250
- /* stylelint-disable-line scss/dollar-variable-pattern */
1251
- /* stylelint-disable-line scss/dollar-variable-pattern */
1252
- /* stylelint-disable-line scss/dollar-variable-pattern */
1253
- /* stylelint-disable-line scss/dollar-variable-pattern */
1254
1181
  .adyen-kyc-tag {
1255
- color: #00112c;
1256
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1257
- font-size: 15px;
1182
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1183
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1184
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1185
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1186
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
1258
1187
  -webkit-font-smoothing: antialiased;
1259
1188
  -moz-osx-font-smoothing: grayscale;
1260
- font-weight: 400;
1261
- line-height: 1.4;
1262
- background: #f3f6f9;
1263
- border: 1px solid #dce0e5;
1264
- border-radius: 0;
1265
- color: #394962;
1266
1189
  display: inline-block;
1267
- font-size: 12px;
1268
- font-weight: 600;
1269
- height: 24px;
1270
- line-height: 24px;
1271
- padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-040, 8px);
1190
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
1191
+ font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
1192
+ line-height: var(--adyen-sdk-text-caption-line-height, 18px);
1193
+ padding: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-040, 8px);
1272
1194
  text-decoration: none;
1273
- vertical-align: baseline;
1195
+ vertical-align: "baseline";
1274
1196
  white-space: nowrap;
1197
+ border: none;
1275
1198
  }
1276
1199
  .adyen-kyc-tag *,
1277
1200
  .adyen-kyc-tag *::before,
@@ -1279,97 +1202,41 @@ button[disabled]:hover {
1279
1202
  box-sizing: border-box;
1280
1203
  }
1281
1204
 
1282
- .adyen-kyc-tag--dark {
1283
- background: #394962;
1284
- border: 1px solid #20304c;
1285
- color: #fff;
1286
- }
1287
- .adyen-kyc-tag--dark.adyen-kyc-tag--removable:active {
1288
- background-color: #384861 !important;
1205
+ .adyen-kyc-tag--grey {
1206
+ background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
1207
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
1289
1208
  }
1290
1209
 
1291
1210
  .adyen-kyc-tag--blue {
1292
- background: #e6f0ff;
1293
- border: 1px solid #cce0ff;
1294
- color: #06f;
1295
- }
1296
- .adyen-kyc-tag--blue.adyen-kyc-tag--removable:active {
1297
- background-color: #e1ecfb !important;
1298
- }
1299
-
1300
- .adyen-kyc-tag--red {
1301
- background: #fce5e5;
1302
- border: 1px solid #facccc;
1303
- color: #a10000;
1304
- }
1305
- .adyen-kyc-tag--red.adyen-kyc-tag--removable:active {
1306
- background-color: #f7e1e1 !important;
1211
+ background: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
1212
+ color: var(--adyen-sdk-color-label-on-background-highlight-weak, #0063d7);
1307
1213
  }
1308
1214
 
1309
1215
  .adyen-kyc-tag--orange {
1310
- background: #fff4e5;
1311
- border: 1px solid #ffeacc;
1312
- color: #b36900;
1313
- }
1314
- .adyen-kyc-tag--orange.adyen-kyc-tag--removable:active {
1315
- background-color: #faefe1 !important;
1316
- }
1317
-
1318
- .adyen-kyc-tag--green {
1319
- background: #e6f8ed;
1320
- border: 1px solid #cef2dd;
1321
- color: #07863a;
1322
- }
1323
- .adyen-kyc-tag--green.adyen-kyc-tag--removable:active {
1324
- background-color: #e1f3e9 !important;
1325
- }
1326
-
1327
- .adyen-kyc-tag--purple {
1328
- background: #f2e5ff;
1329
- border: 1px solid #e6ccff;
1330
- color: #8000ff;
1331
- }
1332
- .adyen-kyc-tag--purple.adyen-kyc-tag--removable:active {
1333
- background-color: #ede1fb !important;
1216
+ background: var(--adyen-sdk-color-background-warning-weak, #fff5e9);
1217
+ color: var(--adyen-sdk-color-label-on-background-warning-weak, #9b5700);
1334
1218
  }
1335
1219
 
1336
- .adyen-kyc-tag--mint {
1337
- background: #e6fdf7;
1338
- border: 1px solid #cdfaef;
1339
- color: #027458;
1340
- }
1341
- .adyen-kyc-tag--mint.adyen-kyc-tag--removable:active {
1342
- background-color: #e1f8f3 !important;
1220
+ .adyen-kyc-tag--red {
1221
+ background: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
1222
+ color: var(--adyen-sdk-color-label-on-background-critical-weak, #c72727);
1343
1223
  }
1344
1224
 
1345
1225
  .adyen-kyc-tag--teal {
1346
- background: #eef9f9;
1347
- border: 1px solid #eef9f9;
1348
- color: #eef9f9;
1349
- }
1350
- .adyen-kyc-tag--teal.adyen-kyc-tag--removable:active {
1351
- background-color: #e9f4f5 !important;
1226
+ background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
1227
+ color: #065e79;
1352
1228
  }
1353
1229
 
1354
- .adyen-kyc-tag--light-blue {
1355
- background: #e6f0ff;
1356
- border: 1px solid #e6f0ff;
1357
- color: #e6f0ff;
1358
- }
1359
- .adyen-kyc-tag--light-blue.adyen-kyc-tag--removable:active {
1360
- background-color: #e1ecfb !important;
1230
+ .adyen-kyc-tag--green {
1231
+ background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
1232
+ color: var(--adyen-sdk-color-label-on-background-success-weak, #067934);
1361
1233
  }
1362
1234
 
1363
1235
  .adyen-kyc-tag--basic {
1364
- border-radius: 4px;
1365
- border-style: none;
1366
- color: #394962;
1367
- font-size: 14px;
1368
- font-weight: 400;
1236
+ background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
1237
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
1369
1238
  }/* #region Colors */
1370
1239
  /* #endregion */
1371
- /* #region Fonts */
1372
- /* #endregion */
1373
1240
  /* #region Borders */
1374
1241
  /* #endregion */
1375
1242
  /* #region Box-shadow */
@@ -1386,10 +1253,6 @@ button[disabled]:hover {
1386
1253
  /* #endregion */
1387
1254
  /* #region Inline components */
1388
1255
  /* #endregion */
1389
- /* stylelint-disable-line scss/dollar-variable-pattern */
1390
- /* stylelint-disable-line scss/dollar-variable-pattern */
1391
- /* stylelint-disable-line scss/dollar-variable-pattern */
1392
- /* stylelint-disable-line scss/dollar-variable-pattern */
1393
1256
  .adyen-kyc-dropdown {
1394
1257
  position: relative;
1395
1258
  }
@@ -1418,17 +1281,17 @@ button[disabled]:hover {
1418
1281
  .adyen-kyc-filter-input {
1419
1282
  background: #fff;
1420
1283
  border: 0;
1421
- caret-color: #06f;
1422
- color: #00112c;
1284
+ caret-color: var(--adyen-sdk-color-label-highlight, #0070f5);
1285
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1423
1286
  font-family: inherit;
1424
- font-size: 1em;
1287
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1425
1288
  height: 100%;
1426
1289
  padding: var(--adyen-sdk-spacer-000, 0px);
1427
1290
  width: 100%;
1428
1291
  }
1429
1292
  .adyen-kyc-filter-input::placeholder {
1430
- color: #a5afbd;
1431
- font-weight: 200;
1293
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
1294
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1432
1295
  }
1433
1296
  .adyen-kyc-filter-input:focus, .adyen-kyc-filter-input:active {
1434
1297
  outline: 0;
@@ -1456,7 +1319,128 @@ button[disabled]:hover {
1456
1319
  display: flex;
1457
1320
  }/* #region Colors */
1458
1321
  /* #endregion */
1459
- /* #region Fonts */
1322
+ /* #region Borders */
1323
+ /* #endregion */
1324
+ /* #region Box-shadow */
1325
+ /* #endregion */
1326
+ /* #region Shadows */
1327
+ /* #endregion */
1328
+ /* #region Z-index */
1329
+ /* #endregion */
1330
+ /* #region Transition */
1331
+ /* #endregion */
1332
+ /* #region Timing functions */
1333
+ /* #endregion */
1334
+ /* #region Focus ring */
1335
+ /* #endregion */
1336
+ /* #region Inline components */
1337
+ /* #endregion */
1338
+ .adyen-kyc-typography {
1339
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1340
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1341
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1342
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1343
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
1344
+ -webkit-font-smoothing: antialiased;
1345
+ -moz-osx-font-smoothing: grayscale;
1346
+ display: block;
1347
+ margin: var(--adyen-sdk-spacer-000, 0px);
1348
+ }
1349
+ .adyen-kyc-typography *,
1350
+ .adyen-kyc-typography *::before,
1351
+ .adyen-kyc-typography *::after {
1352
+ box-sizing: border-box;
1353
+ }
1354
+ .adyen-kyc-typography--body {
1355
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1356
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
1357
+ letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
1358
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1359
+ }
1360
+ .adyen-kyc-typography--body-stronger {
1361
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1362
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
1363
+ letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
1364
+ font-weight: var(--adyen-sdk-text-body-stronger-font-weight, 500);
1365
+ }
1366
+ .adyen-kyc-typography--body-strongest {
1367
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1368
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
1369
+ letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
1370
+ font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
1371
+ }
1372
+ .adyen-kyc-typography--caption {
1373
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
1374
+ line-height: var(--adyen-sdk-text-caption-line-height, 18px);
1375
+ letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
1376
+ font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
1377
+ }
1378
+ .adyen-kyc-typography--caption-stronger {
1379
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
1380
+ line-height: var(--adyen-sdk-text-caption-line-height, 18px);
1381
+ letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
1382
+ font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
1383
+ }
1384
+ .adyen-kyc-typography--title {
1385
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
1386
+ font-weight: var(--adyen-sdk-text-title-font-weight, 600);
1387
+ line-height: var(--adyen-sdk-text-title-line-height, 26px);
1388
+ letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
1389
+ }
1390
+ .adyen-layout-xs-only .adyen-kyc-typography--title {
1391
+ font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
1392
+ line-height: var(--adyen-sdk-text-title-mobile-line-height, 26px);
1393
+ }
1394
+ .adyen-kyc-typography--title-m {
1395
+ font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
1396
+ font-weight: var(--adyen-sdk-text-title-m-font-weight, 600);
1397
+ line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
1398
+ letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
1399
+ }
1400
+ .adyen-layout-xs-only .adyen-kyc-typography--title-m {
1401
+ font-size: var(--adyen-sdk-text-title-m-mobile-font-size, 18px);
1402
+ line-height: var(--adyen-sdk-text-title-m-mobile-line-height, 28px);
1403
+ }
1404
+ .adyen-kyc-typography--title-l {
1405
+ font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
1406
+ font-weight: var(--adyen-sdk-text-title-l-font-weight, 600);
1407
+ line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
1408
+ letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
1409
+ }
1410
+ .adyen-layout-xs-only .adyen-kyc-typography--title-l {
1411
+ font-size: var(--adyen-sdk-text-title-l-mobile-font-size, 20px);
1412
+ line-height: var(--adyen-sdk-text-title-l-mobile-line-height, 30px);
1413
+ }
1414
+ .adyen-kyc-typography--primary {
1415
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1416
+ }
1417
+ .adyen-kyc-typography--secondary {
1418
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
1419
+ }
1420
+ .adyen-kyc-typography--tertiary {
1421
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
1422
+ }
1423
+ .adyen-kyc-typography--disabled {
1424
+ color: var(--adyen-sdk-color-label-disabled, #8d95a3);
1425
+ }
1426
+ .adyen-kyc-typography--success {
1427
+ color: var(--adyen-sdk-color-label-success, #07893c);
1428
+ }
1429
+ .adyen-kyc-typography--warning {
1430
+ color: var(--adyen-sdk-color-label-warning, #b06300);
1431
+ }
1432
+ .adyen-kyc-typography--critical {
1433
+ color: var(--adyen-sdk-color-label-critical, #e22d2d);
1434
+ }
1435
+ .adyen-kyc-typography--highlight {
1436
+ color: var(--adyen-sdk-color-label-highlight, #0070f5);
1437
+ }
1438
+ .adyen-kyc-typography--inverse-primary {
1439
+ color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
1440
+ }
1441
+ .adyen-kyc-typography--inverse-secondary {
1442
+ color: var(--adyen-sdk-color-label-inverse-secondary, #9ea6b1);
1443
+ }/* #region Colors */
1460
1444
  /* #endregion */
1461
1445
  /* #region Borders */
1462
1446
  /* #endregion */
@@ -1478,21 +1462,21 @@ button[disabled]:hover {
1478
1462
  display: block;
1479
1463
  }
1480
1464
  .adyen-kyc-checkbox__label {
1481
- color: #00112c;
1465
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1482
1466
  cursor: pointer;
1483
1467
  display: inline-block;
1484
- font-size: 15px;
1485
- font-weight: normal;
1486
- line-height: 21px;
1468
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1469
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1470
+ line-height: calc(var(--adyen-sdk-text-body-font-size, 14px) + 2px);
1487
1471
  padding-left: var(--adyen-sdk-spacer-090, 24px);
1488
1472
  position: relative;
1489
1473
  user-select: none;
1490
1474
  }
1491
1475
  .adyen-kyc-checkbox__helper-text {
1492
- color: #69778c;
1476
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
1493
1477
  cursor: pointer;
1494
1478
  display: block;
1495
- font-size: 15px;
1479
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1496
1480
  padding-left: var(--adyen-sdk-spacer-090, 24px);
1497
1481
  }
1498
1482
 
@@ -1507,53 +1491,49 @@ button[disabled]:hover {
1507
1491
  opacity: 1;
1508
1492
  }
1509
1493
  .adyen-kyc-checkbox__input:checked + .adyen-kyc-checkbox__label::after {
1510
- background-color: #06f;
1511
- border: 1px solid #06f;
1494
+ background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
1495
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-inverse-primary, #00112c);
1512
1496
  }
1513
1497
  .adyen-kyc-checkbox__input:checked:hover + .adyen-kyc-checkbox__label::after {
1514
- border-color: #06f;
1498
+ border-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
1515
1499
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.4);
1516
1500
  }
1517
1501
  .adyen-kyc-checkbox__input:focus + .adyen-kyc-checkbox__label::after {
1518
- border: 1px solid #06f;
1502
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-inverse-primary, #00112c);
1519
1503
  box-shadow: 0 0 0 2px #80b2ff;
1520
1504
  }
1521
1505
  .adyen-kyc-checkbox__input:hover:not(:focus) + .adyen-kyc-checkbox__label::after {
1522
- border-color: #99a3ad;
1523
1506
  box-shadow: 0 0 0 2px #dce0e5;
1524
1507
  }
1525
1508
  .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::before {
1526
- border-bottom: 2px solid #fff;
1527
- border-radius: 0 2px 1px;
1528
- border-right: 2px solid #fff;
1509
+ border-bottom: var(--adyen-sdk-border-width-m, 2px) solid var(--adyen-sdk-color-background-primary, #ffffff);
1510
+ border-right: var(--adyen-sdk-border-width-m, 2px) solid var(--adyen-sdk-color-background-primary, #ffffff);
1529
1511
  content: "";
1530
- height: 11px;
1531
- left: 1px;
1512
+ height: 7px;
1513
+ left: 3px;
1532
1514
  opacity: 0;
1533
1515
  position: absolute;
1534
- top: 2px;
1516
+ top: 4px;
1535
1517
  transform: rotateZ(37deg);
1536
1518
  transform-origin: 100% 100%;
1537
1519
  transition: opacity 0.2s ease-out;
1538
- width: 6px;
1520
+ width: 5px;
1539
1521
  z-index: 1;
1540
1522
  }
1541
1523
  .adyen-kyc-checkbox__input + .adyen-kyc-checkbox__label::after {
1542
1524
  background-color: #fff;
1543
- border: 1px solid #a5afbd;
1544
- border-radius: 4px;
1525
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-secondary, #c9cdd3);
1526
+ border-radius: var(--adyen-sdk-border-radius-s, 4px);
1545
1527
  content: "";
1546
- height: 16px;
1528
+ height: calc(var(--adyen-sdk-text-body-font-size, 14px) + 2px);
1547
1529
  left: 0;
1548
1530
  position: absolute;
1549
1531
  top: 0;
1550
1532
  transition: background 0.15s ease-out, border 0.05s ease-out, box-shadow 0.1s ease-out;
1551
- width: 16px;
1533
+ width: calc(var(--adyen-sdk-text-body-font-size, 14px) + 2px);
1552
1534
  z-index: 0;
1553
1535
  }/* #region Colors */
1554
1536
  /* #endregion */
1555
- /* #region Fonts */
1556
- /* #endregion */
1557
1537
  /* #region Borders */
1558
1538
  /* #endregion */
1559
1539
  /* #region Box-shadow */
@@ -1570,25 +1550,19 @@ button[disabled]:hover {
1570
1550
  /* #endregion */
1571
1551
  /* #region Inline components */
1572
1552
  /* #endregion */
1573
- /* stylelint-disable-line scss/dollar-variable-pattern */
1574
- /* stylelint-disable-line scss/dollar-variable-pattern */
1575
- /* stylelint-disable-line scss/dollar-variable-pattern */
1576
- /* stylelint-disable-line scss/dollar-variable-pattern */
1577
1553
  .adyen-kyc-form-header {
1578
1554
  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
1579
1555
  }
1580
1556
  .adyen-kyc-form-header__heading {
1581
- font-size: 24px;
1582
- font-weight: 600;
1557
+ font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
1558
+ font-weight: var(--adyen-sdk-text-title-l-font-weight, 600);
1583
1559
  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
1584
1560
  }
1585
1561
  .adyen-kyc-form-header__description {
1586
- color: #394962;
1587
- font-size: 16px;
1562
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
1563
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
1588
1564
  }/* #region Colors */
1589
1565
  /* #endregion */
1590
- /* #region Fonts */
1591
- /* #endregion */
1592
1566
  /* #region Borders */
1593
1567
  /* #endregion */
1594
1568
  /* #region Box-shadow */
@@ -1605,10 +1579,6 @@ button[disabled]:hover {
1605
1579
  /* #endregion */
1606
1580
  /* #region Inline components */
1607
1581
  /* #endregion */
1608
- /* stylelint-disable-line scss/dollar-variable-pattern */
1609
- /* stylelint-disable-line scss/dollar-variable-pattern */
1610
- /* stylelint-disable-line scss/dollar-variable-pattern */
1611
- /* stylelint-disable-line scss/dollar-variable-pattern */
1612
1582
  .adyen-kyc-field-wrapper {
1613
1583
  display: flex;
1614
1584
  flex-wrap: wrap;
@@ -1643,14 +1613,14 @@ button[disabled]:hover {
1643
1613
  padding-bottom: var(--adyen-sdk-spacer-000, 0px);
1644
1614
  padding-top: var(--adyen-sdk-spacer-000, 0px);
1645
1615
  background: #fff;
1646
- border: 1px solid #dce0e5;
1647
- border-radius: 6px;
1616
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-tertiary, #8d95a3);
1617
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
1648
1618
  box-sizing: border-box;
1649
- caret-color: #06f;
1650
- color: #00112c;
1619
+ caret-color: var(--adyen-sdk-color-label-highlight, #0070f5);
1620
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1651
1621
  display: block;
1652
1622
  font-family: inherit;
1653
- font-size: 1em;
1623
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1654
1624
  outline: none;
1655
1625
  padding: var(--adyen-sdk-spacer-040, 8px);
1656
1626
  position: relative;
@@ -1658,31 +1628,32 @@ button[disabled]:hover {
1658
1628
  width: 100%;
1659
1629
  }
1660
1630
  .adyen-kyc-input::placeholder {
1661
- color: #a5afbd;
1662
- font-weight: 200;
1631
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
1632
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1663
1633
  }
1664
1634
  .adyen-kyc-input:hover {
1665
- border-color: #99a3ad;
1635
+ border-color: var(--adyen-sdk-color-outline-tertiary-hover, #6d7789);
1666
1636
  }
1667
1637
  .adyen-kyc-input:required {
1668
1638
  box-shadow: none;
1669
1639
  }
1670
1640
  .adyen-kyc-input[readonly], .adyen-kyc-input[readonly]:hover, .adyen-kyc-input--disabled {
1671
- border: 1px solid #a5afbd;
1672
- color: #8390a3;
1641
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-disabled, #dbdee2);
1642
+ color: var(--adyen-sdk-color-label-disabled, #8d95a3);
1673
1643
  cursor: not-allowed;
1674
1644
  background-color: #f3f6f9;
1675
- border-color: #dce0e5;
1645
+ border-color: var(--adyen-sdk-color-outline-disabled, #dbdee2);
1676
1646
  }
1677
1647
  .adyen-kyc-input--disabled:hover {
1678
- border-color: #f3f6f9;
1648
+ border-color: var(--adyen-sdk-color-outline-disabled, #dbdee2);
1679
1649
  }
1680
1650
  .adyen-kyc-input--error, .adyen-kyc-input--invalid, .adyen-kyc-input--error:hover, .adyen-kyc-input--invalid:hover {
1681
- border-color: #e50000;
1682
- color: #e50000;
1651
+ border-color: var(--adyen-sdk-color-outline-critical, #e22d2d);
1652
+ color: var(--adyen-sdk-color-label-critical, #e22d2d);
1683
1653
  }
1684
1654
  .adyen-kyc-input:active, .adyen-kyc-input:focus, .adyen-kyc-input--focus, .adyen-kyc-input:active:hover, .adyen-kyc-input:focus:hover, .adyen-kyc-input--focus:hover {
1685
- border: 1px solid #06f;
1655
+ border-color: var(--adyen-sdk-color-outline-tertiary-active, #00112c);
1656
+ outline: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-tertiary-active, #00112c);
1686
1657
  }
1687
1658
  .adyen-kyc-input--date {
1688
1659
  padding-right: var(--adyen-sdk-spacer-100, 32px);
@@ -1698,19 +1669,19 @@ button[disabled]:hover {
1698
1669
  width: 16px;
1699
1670
  }
1700
1671
  .adyen-kyc-input__inline-validation--valid {
1701
- color: #0abf53;
1672
+ color: var(--adyen-sdk-color-label-success, #07893c);
1702
1673
  display: none;
1703
1674
  }
1704
1675
  .adyen-kyc-input__inline-validation--invalid {
1705
- color: #e50000;
1676
+ color: var(--adyen-sdk-color-label-critical, #e22d2d);
1706
1677
  top: 50%;
1707
1678
  }
1708
1679
  .adyen-kyc-input__inline-validation--invalid-bottom {
1709
1680
  top: var(--adyen-sdk-spacer-040, 8px);
1710
1681
  }
1711
1682
  .adyen-kyc-input__counter {
1712
- color: #69778c;
1713
- font-size: 13px;
1683
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
1684
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
1714
1685
  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px);
1715
1686
  position: absolute;
1716
1687
  right: 0;
@@ -1728,46 +1699,26 @@ button[disabled]:hover {
1728
1699
  }
1729
1700
  .adyen-layout-md .adyen-kyc-field-wrapper > .adyen-kyc-field:nth-child(2) {
1730
1701
  margin-left: var(--adyen-sdk-spacer-040, 8px);
1731
- }/* #region Colors */
1732
- /* #endregion */
1733
- /* #region Fonts */
1734
- /* #endregion */
1735
- /* #region Borders */
1736
- /* #endregion */
1737
- /* #region Box-shadow */
1738
- /* #endregion */
1739
- /* #region Shadows */
1740
- /* #endregion */
1741
- /* #region Z-index */
1742
- /* #endregion */
1743
- /* #region Transition */
1744
- /* #endregion */
1745
- /* #region Timing functions */
1746
- /* #endregion */
1747
- /* #region Focus ring */
1748
- /* #endregion */
1749
- /* #region Inline components */
1750
- /* #endregion */
1751
- .adyen-kyc-disclaimer-container {
1752
- background-color: var(--adyen-sdk-color-background-selected, #e3f0ff);
1702
+ }.adyen-kyc-disclaimer-container {
1703
+ background-color: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
1753
1704
  border: 0;
1754
- border-radius: var(--adyen-sdk-spacer-020, 4px);
1705
+ border-radius: var(--adyen-sdk-border-radius-s, 4px);
1755
1706
  margin: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-000, 0px);
1756
- padding: var(--adyen-sdk-spacer-060, 12px) var(--adyen-sdk-spacer-070, 16px);
1707
+ padding: var(--adyen-sdk-spacer-070, 16px);
1757
1708
  }
1758
1709
 
1759
1710
  .adyen-kyc-disclaimer__title {
1760
- color: var(--adyen-sdk-color-label-secondary, #5c687c);
1761
- font-size: 13px;
1762
- font-weight: bold;
1711
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1712
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
1713
+ font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
1763
1714
  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
1764
1715
  }
1765
1716
 
1766
1717
  .adyen-kyc-disclaimer__content {
1767
- color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
1718
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1768
1719
  display: flex;
1769
1720
  flex-direction: column;
1770
- font-size: 13px;
1721
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
1771
1722
  gap: var(--adyen-sdk-spacer-040, 8px);
1772
1723
  }
1773
1724
  .adyen-kyc-disclaimer__content p {
@@ -1784,7 +1735,7 @@ button[disabled]:hover {
1784
1735
  margin-bottom: var(--adyen-sdk-spacer-060, 12px);
1785
1736
  }.adyen-kyc-input--mismatch {
1786
1737
  animation: mismatchShake 300ms;
1787
- border-color: rgb(255, 35, 35) !important;
1738
+ border-color: var(--adyen-sdk-color-outline-critical, #e22d2d) !important;
1788
1739
  }
1789
1740
 
1790
1741
  @keyframes mismatchShake {
@@ -1797,11 +1748,7 @@ button[disabled]:hover {
1797
1748
  75% {
1798
1749
  transform: translateX(4px);
1799
1750
  }
1800
- }/* stylelint-disable-line scss/dollar-variable-pattern */
1801
- /* stylelint-disable-line scss/dollar-variable-pattern */
1802
- /* stylelint-disable-line scss/dollar-variable-pattern */
1803
- /* stylelint-disable-line scss/dollar-variable-pattern */
1804
- .adyen-kyc-radio-group {
1751
+ }.adyen-kyc-radio-group {
1805
1752
  display: flex;
1806
1753
  flex-direction: column;
1807
1754
  margin-top: var(--adyen-sdk-spacer-040, 8px);
@@ -1817,9 +1764,9 @@ button[disabled]:hover {
1817
1764
  .adyen-kyc-radio-group__label {
1818
1765
  color: inherit;
1819
1766
  display: block;
1820
- font-size: 1em;
1821
- font-weight: normal;
1822
- line-height: 21px;
1767
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1768
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1769
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
1823
1770
  overflow: visible;
1824
1771
  padding-bottom: var(--adyen-sdk-spacer-000, 0px);
1825
1772
  padding-left: var(--adyen-sdk-spacer-090, 24px);
@@ -1830,8 +1777,6 @@ button[disabled]:hover {
1830
1777
  color: inherit;
1831
1778
  }/* #region Colors */
1832
1779
  /* #endregion */
1833
- /* #region Fonts */
1834
- /* #endregion */
1835
1780
  /* #region Borders */
1836
1781
  /* #endregion */
1837
1782
  /* #region Box-shadow */
@@ -1848,18 +1793,14 @@ button[disabled]:hover {
1848
1793
  /* #endregion */
1849
1794
  /* #region Inline components */
1850
1795
  /* #endregion */
1851
- /* stylelint-disable-line scss/dollar-variable-pattern */
1852
- /* stylelint-disable-line scss/dollar-variable-pattern */
1853
- /* stylelint-disable-line scss/dollar-variable-pattern */
1854
- /* stylelint-disable-line scss/dollar-variable-pattern */
1855
1796
  .adyen-kyc-input-radio {
1856
- color: #00112c;
1857
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1858
- font-size: 15px;
1797
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1798
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1799
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
1800
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1801
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
1859
1802
  -webkit-font-smoothing: antialiased;
1860
1803
  -moz-osx-font-smoothing: grayscale;
1861
- font-weight: 400;
1862
- line-height: 1.4;
1863
1804
  display: inline-flex;
1864
1805
  vertical-align: baseline;
1865
1806
  }
@@ -1872,8 +1813,8 @@ button[disabled]:hover {
1872
1813
  .adyen-kyc-input-radio__input {
1873
1814
  appearance: none;
1874
1815
  background-color: #fff;
1875
- border: 1px solid #dce0e5;
1876
- border-radius: 12px;
1816
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
1817
+ border-radius: var(--adyen-sdk-border-radius-l, 12px);
1877
1818
  cursor: pointer;
1878
1819
  display: inline-block;
1879
1820
  flex-basis: 16px;
@@ -1893,7 +1834,7 @@ button[disabled]:hover {
1893
1834
  }
1894
1835
  .adyen-kyc-input-radio__input::before {
1895
1836
  background: #fff;
1896
- border-radius: 12px;
1837
+ border-radius: var(--adyen-sdk-border-radius-l, 12px);
1897
1838
  content: "";
1898
1839
  display: block;
1899
1840
  height: 6px;
@@ -1906,8 +1847,8 @@ button[disabled]:hover {
1906
1847
  width: 6px;
1907
1848
  }
1908
1849
  .adyen-kyc-input-radio__input:checked {
1909
- background: #06f;
1910
- border-color: #06f;
1850
+ background: var(--adyen-sdk-color-background-inverse-primary, #00112c);
1851
+ border-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
1911
1852
  }
1912
1853
  .adyen-kyc-input-radio__input:checked::before {
1913
1854
  opacity: 1;
@@ -1920,16 +1861,16 @@ button[disabled]:hover {
1920
1861
  border-color: transparent;
1921
1862
  }
1922
1863
  .adyen-kyc-input-radio__input:checked:hover {
1923
- border-color: #0047b2;
1864
+ border-color: var(--adyen-sdk-color-outline-inverse-primary-hover, #6d7789);
1924
1865
  }
1925
1866
  .adyen-kyc-input-radio__input:hover {
1926
- border-color: #69778c;
1867
+ border-color: var(--adyen-sdk-color-outline-inverse-primary-hover, #6d7789);
1927
1868
  }
1928
1869
  .adyen-kyc-input-radio__input:focus {
1929
1870
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 102, 255, 0.4);
1930
1871
  transition: 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
1931
1872
  transition-property: box-shadow;
1932
- border-color: #06f;
1873
+ border-color: var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
1933
1874
  }
1934
1875
  .adyen-kyc-input-radio__input:disabled {
1935
1876
  background-color: #dce0e5;
@@ -1939,19 +1880,17 @@ button[disabled]:hover {
1939
1880
 
1940
1881
  .adyen-kyc-input-radio__label {
1941
1882
  cursor: pointer;
1942
- line-height: 24px;
1883
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
1943
1884
  margin-right: var(--adyen-sdk-spacer-070, 16px);
1944
1885
  padding-left: var(--adyen-sdk-spacer-040, 8px);
1945
1886
  vertical-align: baseline;
1946
1887
  }
1947
1888
 
1948
1889
  .adyen-kyc-input-radio__label--disabled {
1949
- color: #8390a3;
1890
+ color: var(--adyen-sdk-color-label-disabled, #8d95a3);
1950
1891
  cursor: not-allowed;
1951
1892
  }/* #region Colors */
1952
1893
  /* #endregion */
1953
- /* #region Fonts */
1954
- /* #endregion */
1955
1894
  /* #region Borders */
1956
1895
  /* #endregion */
1957
1896
  /* #region Box-shadow */
@@ -1971,7 +1910,7 @@ button[disabled]:hover {
1971
1910
  .adyen-kyc-accordion__details,
1972
1911
  .adyen-kyc-accordion__summary {
1973
1912
  background-color: #f3f6f9;
1974
- color: #00112c;
1913
+ color: var(--adyen-sdk-color-label-primary, #00112c);
1975
1914
  --adyen-kyc-accordion-animation-space: var(--adyen-sdk-spacer-080, 20px);
1976
1915
  }
1977
1916
 
@@ -1984,9 +1923,9 @@ button[disabled]:hover {
1984
1923
  align-items: center;
1985
1924
  gap: var(--adyen-sdk-spacer-050, 10px);
1986
1925
  padding: var(--adyen-sdk-spacer-030, 6px);
1987
- font-weight: bold;
1926
+ font-weight: var(--adyen-sdk-text-title-font-weight, 600);
1988
1927
  transition: margin 150ms ease-out;
1989
- margin-bottom: 0;
1928
+ margin-bottom: var(--adyen-sdk-spacer-000, 0px);
1990
1929
  }
1991
1930
 
1992
1931
  .adyen-kyc-accordion__summary > .adyen-kyc-accordion__arrow {
@@ -2022,33 +1961,13 @@ button[disabled]:hover {
2022
1961
  }
2023
1962
  .adyen-kyc-field--entityType .adyen-kyc-label__text {
2024
1963
  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
2025
- }/* #region Colors */
2026
- /* #endregion */
2027
- /* #region Fonts */
2028
- /* #endregion */
2029
- /* #region Borders */
2030
- /* #endregion */
2031
- /* #region Box-shadow */
2032
- /* #endregion */
2033
- /* #region Shadows */
2034
- /* #endregion */
2035
- /* #region Z-index */
2036
- /* #endregion */
2037
- /* #region Transition */
2038
- /* #endregion */
2039
- /* #region Timing functions */
2040
- /* #endregion */
2041
- /* #region Focus ring */
2042
- /* #endregion */
2043
- /* #region Inline components */
2044
- /* #endregion */
2045
- .adyen-kyc-radio-group-card__label.adyen-kyc-entity-type-radio-group-card__header {
1964
+ }.adyen-kyc-radio-group-card__label.adyen-kyc-entity-type-radio-group-card__header {
2046
1965
  margin-bottom: var(--adyen-sdk-spacer-020, 4px);
2047
1966
  }
2048
1967
 
2049
1968
  .adyen-kyc-radio-card__icon.adyen-kyc-entity-type-radio-group-card__icon span {
2050
1969
  display: flex;
2051
- font-size: 40px;
1970
+ font-size: calc(var(--adyen-sdk-text-title-m-font-size, 20px) * 2);
2052
1971
  }
2053
1972
 
2054
1973
  .adyen-kyc-radio-card.adyen-kyc-entity-type-radio-group-card__container {
@@ -2066,15 +1985,13 @@ button[disabled]:hover {
2066
1985
  }
2067
1986
 
2068
1987
  .adyen-kyc-entity-type-radio-group-card__description {
2069
- font-weight: 400;
1988
+ font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
2070
1989
  }
2071
1990
 
2072
1991
  .adyen-kyc-entity-type-radio-group-card__examples {
2073
- font-weight: 100;
1992
+ font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
2074
1993
  }/* #region Colors */
2075
1994
  /* #endregion */
2076
- /* #region Fonts */
2077
- /* #endregion */
2078
1995
  /* #region Borders */
2079
1996
  /* #endregion */
2080
1997
  /* #region Box-shadow */
@@ -2091,20 +2008,16 @@ button[disabled]:hover {
2091
2008
  /* #endregion */
2092
2009
  /* #region Inline components */
2093
2010
  /* #endregion */
2094
- /* stylelint-disable-line scss/dollar-variable-pattern */
2095
- /* stylelint-disable-line scss/dollar-variable-pattern */
2096
- /* stylelint-disable-line scss/dollar-variable-pattern */
2097
- /* stylelint-disable-line scss/dollar-variable-pattern */
2098
2011
  .adyen-kyc-radio-card {
2099
- color: #00112c;
2100
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
2101
- font-size: 15px;
2012
+ color: var(--adyen-sdk-color-label-primary, #00112c);
2013
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
2014
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
2015
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
2016
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
2102
2017
  -webkit-font-smoothing: antialiased;
2103
2018
  -moz-osx-font-smoothing: grayscale;
2104
- font-weight: 400;
2105
- line-height: 1.4;
2106
- border: 1px solid #dce0e5;
2107
- border-radius: 8px;
2019
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
2020
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
2108
2021
  cursor: pointer;
2109
2022
  display: block;
2110
2023
  list-style: none;
@@ -2129,15 +2042,15 @@ button[disabled]:hover {
2129
2042
  width: 18px;
2130
2043
  }
2131
2044
  .adyen-kyc-radio-card__loading-icon .adyen-kyc-loading-indicator::before {
2132
- background: #06f;
2045
+ background: var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
2133
2046
  }
2134
2047
  .adyen-kyc-radio-card__loading-icon .adyen-kyc-loading-indicator::after {
2135
- border-top-color: #06f;
2048
+ border-top-color: var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
2136
2049
  }
2137
2050
 
2138
2051
  .adyen-kyc-radio-card__body {
2139
- color: #394962;
2140
- font-size: 13px;
2052
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
2053
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2141
2054
  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
2142
2055
  }
2143
2056
 
@@ -2145,8 +2058,6 @@ button[disabled]:hover {
2145
2058
  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
2146
2059
  }/* #region Colors */
2147
2060
  /* #endregion */
2148
- /* #region Fonts */
2149
- /* #endregion */
2150
2061
  /* #region Borders */
2151
2062
  /* #endregion */
2152
2063
  /* #region Box-shadow */
@@ -2163,19 +2074,15 @@ button[disabled]:hover {
2163
2074
  /* #endregion */
2164
2075
  /* #region Inline components */
2165
2076
  /* #endregion */
2166
- /* stylelint-disable-line scss/dollar-variable-pattern */
2167
- /* stylelint-disable-line scss/dollar-variable-pattern */
2168
- /* stylelint-disable-line scss/dollar-variable-pattern */
2169
- /* stylelint-disable-line scss/dollar-variable-pattern */
2170
2077
  .adyen-kyc-radio-group-card {
2171
2078
  display: flex;
2172
2079
  flex-direction: column;
2173
2080
  gap: var(--adyen-sdk-spacer-040, 8px);
2174
2081
  }
2175
2082
  .adyen-kyc-radio-group-card__label {
2176
- font-size: 15px;
2177
- font-weight: 600;
2178
- line-height: 1.4;
2083
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
2084
+ font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
2085
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
2179
2086
  padding-right: var(--adyen-sdk-spacer-070, 16px);
2180
2087
  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
2181
2088
  }
@@ -2183,9 +2090,9 @@ button[disabled]:hover {
2183
2090
  padding-right: var(--adyen-sdk-spacer-000, 0px);
2184
2091
  }
2185
2092
  .adyen-kyc-radio-group-card__subtitle {
2186
- color: #8390a3;
2187
- font-size: 13px;
2188
- font-weight: 100;
2093
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
2094
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2095
+ font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
2189
2096
  margin-bottom: var(--adyen-sdk-spacer-020, 4px);
2190
2097
  }
2191
2098
  .adyen-kyc-radio-group-card input {
@@ -2207,8 +2114,6 @@ button[disabled]:hover {
2207
2114
  top: var(--adyen-sdk-spacer-070, 16px);
2208
2115
  }/* #region Colors */
2209
2116
  /* #endregion */
2210
- /* #region Fonts */
2211
- /* #endregion */
2212
2117
  /* #region Borders */
2213
2118
  /* #endregion */
2214
2119
  /* #region Box-shadow */
@@ -2225,10 +2130,6 @@ button[disabled]:hover {
2225
2130
  /* #endregion */
2226
2131
  /* #region Inline components */
2227
2132
  /* #endregion */
2228
- /* stylelint-disable-line scss/dollar-variable-pattern */
2229
- /* stylelint-disable-line scss/dollar-variable-pattern */
2230
- /* stylelint-disable-line scss/dollar-variable-pattern */
2231
- /* stylelint-disable-line scss/dollar-variable-pattern */
2232
2133
  .adyen-kyc-document-guidance {
2233
2134
  overflow: auto;
2234
2135
  }
@@ -2254,14 +2155,8 @@ button[disabled]:hover {
2254
2155
  }
2255
2156
 
2256
2157
  .adyen-kyc-document-guidance__description {
2257
- font-weight: 600;
2258
- }/* stylelint-disable-line scss/dollar-variable-pattern */
2259
- /* stylelint-disable-line scss/dollar-variable-pattern */
2260
- /* stylelint-disable-line scss/dollar-variable-pattern */
2261
- /* stylelint-disable-line scss/dollar-variable-pattern */
2262
- /* #region Colors */
2263
- /* #endregion */
2264
- /* #region Fonts */
2158
+ font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
2159
+ }/* #region Colors */
2265
2160
  /* #endregion */
2266
2161
  /* #region Borders */
2267
2162
  /* #endregion */
@@ -2280,20 +2175,20 @@ button[disabled]:hover {
2280
2175
  /* #region Inline components */
2281
2176
  /* #endregion */
2282
2177
  .adyen-kyc-dropzone {
2283
- border: 1px dashed #a5afbd;
2284
- border-radius: 6px;
2178
+ border: var(--adyen-sdk-border-width-s, 1px) dashed var(--adyen-sdk-color-outline-secondary, #c9cdd3);
2179
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
2285
2180
  display: flex;
2286
2181
  flex-direction: row;
2287
- font-size: 0.81em;
2182
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2288
2183
  min-height: 70px;
2289
2184
  transition: all 0.2s ease-out;
2290
2185
  }
2291
2186
  .adyen-kyc-dropzone--dragged {
2292
- border: 1px solid #0047b2;
2187
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-secondary-active, #00112c);
2293
2188
  box-shadow: 0 0 0 3px #cce0ff;
2294
2189
  }
2295
2190
  .adyen-kyc-dropzone--error {
2296
- border: 1px dashed #e50000;
2191
+ border: var(--adyen-sdk-border-width-s, 1px) dashed var(--adyen-sdk-color-outline-critical, #e22d2d);
2297
2192
  }
2298
2193
  .adyen-kyc-dropzone__icon {
2299
2194
  align-items: center;
@@ -2312,33 +2207,31 @@ button[disabled]:hover {
2312
2207
  display: none;
2313
2208
  }
2314
2209
  .adyen-kyc-dropzone__drag-text {
2315
- color: #00112c;
2316
- font-size: 13px;
2317
- font-weight: 600;
2210
+ color: var(--adyen-sdk-color-label-primary, #00112c);
2211
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2212
+ font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
2318
2213
  margin-bottom: var(--adyen-sdk-spacer-020, 4px);
2319
2214
  }
2320
2215
  .adyen-kyc-dropzone__button {
2321
2216
  background: none;
2322
2217
  border: 0;
2323
- color: #06f;
2218
+ color: var(--adyen-sdk-color-label-highlight, #0070f5);
2324
2219
  cursor: pointer;
2325
- font-size: 13px;
2326
- font-weight: 600;
2220
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2221
+ font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
2327
2222
  padding: var(--adyen-sdk-spacer-000, 0px);
2328
2223
  text-transform: lowercase;
2329
2224
  }
2330
2225
  .adyen-kyc-dropzone__supports-text {
2331
- color: #394962;
2332
- font-size: 13px;
2226
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
2227
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2333
2228
  }
2334
2229
  .adyen-kyc-dropzone .adyen-kyc-icon-new-document {
2335
- color: #a5afbd;
2230
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
2336
2231
  display: flex;
2337
- font-size: 30px;
2232
+ font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
2338
2233
  }/* #region Colors */
2339
2234
  /* #endregion */
2340
- /* #region Fonts */
2341
- /* #endregion */
2342
2235
  /* #region Borders */
2343
2236
  /* #endregion */
2344
2237
  /* #region Box-shadow */
@@ -2355,17 +2248,13 @@ button[disabled]:hover {
2355
2248
  /* #endregion */
2356
2249
  /* #region Inline components */
2357
2250
  /* #endregion */
2358
- /* stylelint-disable-line scss/dollar-variable-pattern */
2359
- /* stylelint-disable-line scss/dollar-variable-pattern */
2360
- /* stylelint-disable-line scss/dollar-variable-pattern */
2361
- /* stylelint-disable-line scss/dollar-variable-pattern */
2362
2251
  .adyen-kyc-dropzone-file {
2363
2252
  align-items: center;
2364
- border: 1px solid #dce0e5;
2365
- border-radius: 6px;
2253
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
2254
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
2366
2255
  display: flex;
2367
2256
  flex-direction: row;
2368
- font-size: 0.81em;
2257
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2369
2258
  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
2370
2259
  min-height: 70px;
2371
2260
  }
@@ -2381,20 +2270,20 @@ button[disabled]:hover {
2381
2270
  overflow: hidden;
2382
2271
  }
2383
2272
  .adyen-kyc-dropzone-file__name {
2384
- color: #00112c;
2385
- font-size: 13px;
2386
- font-weight: 600;
2273
+ color: var(--adyen-sdk-color-label-primary, #00112c);
2274
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2275
+ font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
2387
2276
  margin-bottom: var(--adyen-sdk-spacer-020, 4px);
2388
2277
  overflow: hidden;
2389
2278
  text-overflow: ellipsis;
2390
2279
  white-space: nowrap;
2391
2280
  }
2392
2281
  .adyen-kyc-dropzone-file__size {
2393
- color: #8390a3;
2394
- font-size: 13px;
2282
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
2283
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2395
2284
  }
2396
2285
  .adyen-kyc-dropzone-file__error {
2397
- color: #e50000;
2286
+ color: var(--adyen-sdk-color-label-critical, #e22d2d);
2398
2287
  }
2399
2288
  .adyen-kyc-dropzone-file__button {
2400
2289
  background: none;
@@ -2408,19 +2297,17 @@ button[disabled]:hover {
2408
2297
  display: flex;
2409
2298
  }
2410
2299
  .adyen-kyc-dropzone-file .adyen-kyc-icon-checkmark {
2411
- color: #60d58f;
2412
- font-size: 30px;
2300
+ color: var(--adyen-sdk-color-label-success, #07893c);
2301
+ font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
2413
2302
  }
2414
2303
  .adyen-kyc-dropzone-file .adyen-kyc-icon-wrong {
2415
- color: #e50000;
2416
- font-size: 30px;
2304
+ color: var(--adyen-sdk-color-label-critical, #e22d2d);
2305
+ font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
2417
2306
  }
2418
2307
  .adyen-kyc-dropzone-file .adyen-kyc-icon-remove {
2419
- color: #8390a3;
2308
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
2420
2309
  }/* #region Colors */
2421
2310
  /* #endregion */
2422
- /* #region Fonts */
2423
- /* #endregion */
2424
2311
  /* #region Borders */
2425
2312
  /* #endregion */
2426
2313
  /* #region Box-shadow */
@@ -2437,18 +2324,14 @@ button[disabled]:hover {
2437
2324
  /* #endregion */
2438
2325
  /* #region Inline components */
2439
2326
  /* #endregion */
2440
- /* stylelint-disable-line scss/dollar-variable-pattern */
2441
- /* stylelint-disable-line scss/dollar-variable-pattern */
2442
- /* stylelint-disable-line scss/dollar-variable-pattern */
2443
- /* stylelint-disable-line scss/dollar-variable-pattern */
2444
2327
  .adyen-kyc-list {
2445
- color: #00112c;
2446
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
2447
- font-size: 15px;
2328
+ color: var(--adyen-sdk-color-label-primary, #00112c);
2329
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
2330
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
2331
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
2332
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
2448
2333
  -webkit-font-smoothing: antialiased;
2449
2334
  -moz-osx-font-smoothing: grayscale;
2450
- font-weight: 400;
2451
- line-height: 1.4;
2452
2335
  display: block;
2453
2336
  list-style-position: outside;
2454
2337
  list-style-type: disc;
@@ -2486,8 +2369,6 @@ button[disabled]:hover {
2486
2369
  list-style-type: decimal;
2487
2370
  }/* #region Colors */
2488
2371
  /* #endregion */
2489
- /* #region Fonts */
2490
- /* #endregion */
2491
2372
  /* #region Borders */
2492
2373
  /* #endregion */
2493
2374
  /* #region Box-shadow */
@@ -2532,8 +2413,6 @@ button[disabled]:hover {
2532
2413
  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
2533
2414
  }/* #region Colors */
2534
2415
  /* #endregion */
2535
- /* #region Fonts */
2536
- /* #endregion */
2537
2416
  /* #region Borders */
2538
2417
  /* #endregion */
2539
2418
  /* #region Box-shadow */
@@ -2561,13 +2440,8 @@ button[disabled]:hover {
2561
2440
  margin: var(--adyen-sdk-spacer-070, 16px) auto var(--adyen-sdk-spacer-000, 0px);
2562
2441
  max-width: 430px;
2563
2442
  text-align: center;
2564
- }
2565
- .adyen-kyc-document-upload__manual-upload .adyen-kyc-link {
2566
- color: #69778c;
2567
2443
  }/* #region Colors */
2568
2444
  /* #endregion */
2569
- /* #region Fonts */
2570
- /* #endregion */
2571
2445
  /* #region Borders */
2572
2446
  /* #endregion */
2573
2447
  /* #region Box-shadow */
@@ -2584,10 +2458,6 @@ button[disabled]:hover {
2584
2458
  /* #endregion */
2585
2459
  /* #region Inline components */
2586
2460
  /* #endregion */
2587
- /* stylelint-disable-line scss/dollar-variable-pattern */
2588
- /* stylelint-disable-line scss/dollar-variable-pattern */
2589
- /* stylelint-disable-line scss/dollar-variable-pattern */
2590
- /* stylelint-disable-line scss/dollar-variable-pattern */
2591
2461
  /**
2592
2462
  * Overriding onfido styles with our own
2593
2463
  */
@@ -2603,28 +2473,28 @@ button[disabled]:hover {
2603
2473
  position: relative !important;
2604
2474
  }
2605
2475
  .adyen-kyc-id-verification .onfido-sdk-ui-DocumentSelector-option {
2606
- border: #20304c 1px solid !important;
2476
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-inverse-primary, #2f3e56) !important;
2607
2477
  }
2608
2478
  .adyen-kyc-id-verification .onfido-sdk-ui-DocumentSelector-option:hover {
2609
- box-shadow: 0 0 0 1px #20304c !important;
2479
+ box-shadow: 0 0 0 1px var(--adyen-sdk-color-outline-inverse-primary, #2f3e56) !important;
2610
2480
  }
2611
2481
  .adyen-kyc-id-verification .onfido-sdk-ui-CountrySelector-custom__option:hover {
2612
2482
  background-color: #20304c !important;
2613
2483
  }
2614
2484
  .adyen-kyc-id-verification .onfido-sdk-ui-Button-button {
2615
2485
  background-color: #20304c;
2616
- border-radius: 6px;
2486
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
2617
2487
  }
2618
2488
  .adyen-kyc-id-verification .onfido-sdk-ui-Button-button:hover:not([disabled]) {
2619
2489
  background-color: #394962 !important;
2620
2490
  }
2621
2491
  .adyen-kyc-id-verification .onfido-sdk-ui-Theme-link {
2622
2492
  border-bottom-style: none !important;
2623
- color: #20304c !important;
2493
+ color: var(--adyen-sdk-color-label-secondary, #5c687c) !important;
2624
2494
  }
2625
2495
  .adyen-kyc-id-verification .onfido-sdk-ui-Theme-link:hover {
2626
2496
  background: none !important;
2627
- color: #20304c !important;
2497
+ color: var(--adyen-sdk-color-label-secondary, #5c687c) !important;
2628
2498
  text-decoration: underline !important;
2629
2499
  }
2630
2500
  .adyen-kyc-id-verification .onfido-sdk-ui-Theme-step,
@@ -2683,8 +2553,6 @@ button[disabled]:hover {
2683
2553
  display: block;
2684
2554
  }/* #region Colors */
2685
2555
  /* #endregion */
2686
- /* #region Fonts */
2687
- /* #endregion */
2688
2556
  /* #region Borders */
2689
2557
  /* #endregion */
2690
2558
  /* #region Box-shadow */
@@ -2701,13 +2569,9 @@ button[disabled]:hover {
2701
2569
  /* #endregion */
2702
2570
  /* #region Inline components */
2703
2571
  /* #endregion */
2704
- /* stylelint-disable-line scss/dollar-variable-pattern */
2705
- /* stylelint-disable-line scss/dollar-variable-pattern */
2706
- /* stylelint-disable-line scss/dollar-variable-pattern */
2707
- /* stylelint-disable-line scss/dollar-variable-pattern */
2708
2572
  .adyen-kyc-id-verification-method__guidance {
2709
- color: #394962;
2710
- font-size: 1em;
2573
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
2574
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
2711
2575
  }.adyen-kyc-field--idNumberWithExempt .adyen-kyc-input--text {
2712
2576
  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
2713
2577
  }
@@ -2727,27 +2591,7 @@ button[disabled]:hover {
2727
2591
  }
2728
2592
  .adyen-kyc-field--us4DigitsNumberId .adyen-kyc-input::placeholder {
2729
2593
  text-indent: 0;
2730
- }/* #region Colors */
2731
- /* #endregion */
2732
- /* #region Fonts */
2733
- /* #endregion */
2734
- /* #region Borders */
2735
- /* #endregion */
2736
- /* #region Box-shadow */
2737
- /* #endregion */
2738
- /* #region Shadows */
2739
- /* #endregion */
2740
- /* #region Z-index */
2741
- /* #endregion */
2742
- /* #region Transition */
2743
- /* #endregion */
2744
- /* #region Timing functions */
2745
- /* #endregion */
2746
- /* #region Focus ring */
2747
- /* #endregion */
2748
- /* #region Inline components */
2749
- /* #endregion */
2750
- .adyen-kyc-multi-select-list {
2594
+ }.adyen-kyc-multi-select-list {
2751
2595
  list-style: none;
2752
2596
  margin: var(--adyen-sdk-spacer-000, 0px);
2753
2597
  padding: var(--adyen-sdk-spacer-000, 0px);
@@ -2757,32 +2601,12 @@ button[disabled]:hover {
2757
2601
  background: none !important;
2758
2602
  }
2759
2603
  .adyen-kyc-multi-select-list-item--with-description .adyen-kyc-checkbox__label {
2760
- font-weight: 600;
2761
- }/* #region Colors */
2762
- /* #endregion */
2763
- /* #region Fonts */
2764
- /* #endregion */
2765
- /* #region Borders */
2766
- /* #endregion */
2767
- /* #region Box-shadow */
2768
- /* #endregion */
2769
- /* #region Shadows */
2770
- /* #endregion */
2771
- /* #region Z-index */
2772
- /* #endregion */
2773
- /* #region Transition */
2774
- /* #endregion */
2775
- /* #region Timing functions */
2776
- /* #endregion */
2777
- /* #region Focus ring */
2778
- /* #endregion */
2779
- /* #region Inline components */
2780
- /* #endregion */
2781
- .adyen-kyc-bank-statement-upload__subtitle {
2604
+ font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
2605
+ }.adyen-kyc-bank-statement-upload__subtitle {
2782
2606
  margin: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-040, 8px);
2783
2607
  }
2784
2608
  .adyen-kyc-bank-statement-upload__requirements {
2785
- font-size: 13px;
2609
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2786
2610
  padding-left: var(--adyen-sdk-spacer-070, 16px);
2787
2611
  }.adyen-kyc-bank-document {
2788
2612
  min-height: 240px;
@@ -2797,8 +2621,6 @@ button[disabled]:hover {
2797
2621
  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
2798
2622
  }/* #region Colors */
2799
2623
  /* #endregion */
2800
- /* #region Fonts */
2801
- /* #endregion */
2802
2624
  /* #region Borders */
2803
2625
  /* #endregion */
2804
2626
  /* #region Box-shadow */
@@ -2821,7 +2643,7 @@ button[disabled]:hover {
2821
2643
  height: 100%;
2822
2644
  }
2823
2645
  .adyen-kyc-bank-verification .adyen-action-bar {
2824
- border-top: 1px solid #dce0e5;
2646
+ border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
2825
2647
  flex-flow: row;
2826
2648
  margin: var(--adyen-sdk-spacer-000, 0px);
2827
2649
  padding: var(--adyen-sdk-spacer-070, 16px);
@@ -2842,21 +2664,19 @@ button[disabled]:hover {
2842
2664
 
2843
2665
  .adyen-kyc-bank-verification-success {
2844
2666
  align-items: center;
2845
- background: #cef2dd;
2846
- border-radius: 4px;
2847
- color: #055f29;
2667
+ background: var(--adyen-sdk-color-background-success-weak, #edfaf3);
2668
+ border-radius: var(--adyen-sdk-border-radius-s, 4px);
2669
+ color: var(--adyen-sdk-color-label-success, #07893c);
2848
2670
  display: flex;
2849
- font-size: 15px;
2671
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
2850
2672
  padding: var(--adyen-sdk-spacer-090, 24px) var(--adyen-sdk-spacer-090, 24px);
2851
2673
  }
2852
2674
  .adyen-kyc-bank-verification-success__checkmark-icon {
2853
2675
  display: flex;
2854
- font-size: 21px;
2676
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
2855
2677
  margin-right: var(--adyen-sdk-spacer-070, 16px);
2856
2678
  }/* #region Colors */
2857
2679
  /* #endregion */
2858
- /* #region Fonts */
2859
- /* #endregion */
2860
2680
  /* #region Borders */
2861
2681
  /* #endregion */
2862
2682
  /* #region Box-shadow */
@@ -2873,10 +2693,6 @@ button[disabled]:hover {
2873
2693
  /* #endregion */
2874
2694
  /* #region Inline components */
2875
2695
  /* #endregion */
2876
- /* stylelint-disable-line scss/dollar-variable-pattern */
2877
- /* stylelint-disable-line scss/dollar-variable-pattern */
2878
- /* stylelint-disable-line scss/dollar-variable-pattern */
2879
- /* stylelint-disable-line scss/dollar-variable-pattern */
2880
2696
  .adyen-action-bar {
2881
2697
  background-color: #fff;
2882
2698
  display: flex;
@@ -2928,8 +2744,6 @@ button[disabled]:hover {
2928
2744
  }
2929
2745
  }/* #region Colors */
2930
2746
  /* #endregion */
2931
- /* #region Fonts */
2932
- /* #endregion */
2933
2747
  /* #region Borders */
2934
2748
  /* #endregion */
2935
2749
  /* #region Box-shadow */
@@ -2946,22 +2760,6 @@ button[disabled]:hover {
2946
2760
  /* #endregion */
2947
2761
  /* #region Inline components */
2948
2762
  /* #endregion */
2949
- /* stylelint-disable-line scss/dollar-variable-pattern */
2950
- /* stylelint-disable-line scss/dollar-variable-pattern */
2951
- /* stylelint-disable-line scss/dollar-variable-pattern */
2952
- /* stylelint-disable-line scss/dollar-variable-pattern */
2953
- .adyen-kyc-account-holder-information {
2954
- display: flex;
2955
- }
2956
- .adyen-kyc-account-holder-information__labels {
2957
- color: #8390a3;
2958
- flex: 1;
2959
- }
2960
- .adyen-kyc-account-holder-information__values {
2961
- flex: 1;
2962
- font-weight: 600;
2963
- }
2964
-
2965
2763
  .adyen-kyc-field-verification-methods {
2966
2764
  display: flex;
2967
2765
  gap: var(--adyen-sdk-spacer-060, 12px);
@@ -2989,166 +2787,64 @@ button[disabled]:hover {
2989
2787
  .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__content {
2990
2788
  width: 80%;
2991
2789
  }
2992
- .adyen-layout-md .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__content {
2993
- width: auto;
2994
- }
2995
- .adyen-kyc-field-verification-methods__footer {
2996
- align-items: center;
2997
- color: #8390a3;
2998
- display: flex;
2999
- font-size: 13px;
3000
- font-weight: 100;
3001
- gap: var(--adyen-sdk-spacer-020, 4px);
3002
- justify-content: end;
3003
- }
3004
- .adyen-kyc-field-verification-methods__icon {
3005
- margin-bottom: var(--adyen-sdk-spacer-030, 6px);
3006
- }
3007
-
3008
- .adyen-kyc-radio-group-card__illustration {
3009
- display: flex;
3010
- justify-content: center;
3011
- }
3012
-
3013
- .adyen-kyc-guidance-list {
3014
- margin: var(--adyen-sdk-spacer-000, 0px);
3015
- padding-left: var(--adyen-sdk-spacer-060, 12px);
3016
- }
3017
- .adyen-kyc-guidance-list__item {
3018
- margin-bottom: var(--adyen-sdk-spacer-020, 4px);
3019
- }
3020
-
3021
- .adyen-kyc-guidance-external-link {
3022
- font-size: 13px;
3023
- }
3024
-
3025
- .adyen-kyc-instant-verification-error,
3026
- .adyen-kyc-instant-verification-error > *,
3027
- .adyen-kyc-instant-verification-error .adyen-kyc-alert__title {
3028
- display: block;
3029
- }
3030
- .adyen-kyc-instant-verification-error > * {
3031
- left: 16px;
3032
- margin: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-070, 16px);
3033
- position: relative;
3034
- }
3035
- .adyen-kyc-instant-verification-error > *:not(.adyen-kyc-alert__header) {
3036
- color: #20304c;
3037
- font-size: 14px;
3038
- }
3039
- .adyen-kyc-instant-verification-error .adyen-kyc-alert__title {
3040
- line-height: 1.25;
3041
- margin: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-020, 4px);
3042
- }
3043
- .adyen-kyc-instant-verification-error .adyen-kyc-alert__icon {
3044
- left: -28px;
3045
- position: absolute;
3046
- }.adyen-kyc-individual .adyen-kyc-form {
3047
- margin-bottom: var(--adyen-sdk-spacer-070, 16px);
3048
- }/* #region Colors */
3049
- /* #endregion */
3050
- /* #region Fonts */
3051
- /* #endregion */
3052
- /* #region Borders */
3053
- /* #endregion */
3054
- /* #region Box-shadow */
3055
- /* #endregion */
3056
- /* #region Shadows */
3057
- /* #endregion */
3058
- /* #region Z-index */
3059
- /* #endregion */
3060
- /* #region Transition */
3061
- /* #endregion */
3062
- /* #region Timing functions */
3063
- /* #endregion */
3064
- /* #region Focus ring */
3065
- /* #endregion */
3066
- /* #region Inline components */
3067
- /* #endregion */
3068
- .adyen-kyc-context-helper {
3069
- background-color: var(--adyen-sdk-color-background-selected, #e3f0ff);
3070
- border-radius: var(--adyen-sdk-spacer-020, 4px);
3071
- margin: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px);
3072
- padding: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-060, 12px);
3073
- }
3074
-
3075
- .adyen-kyc-context-helper__content {
3076
- color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
3077
- display: flex;
3078
- font-size: 13px;
3079
- gap: var(--adyen-sdk-spacer-040, 8px);
3080
- }/* #region Colors */
3081
- /* #endregion */
3082
- /* #region Fonts */
3083
- /* #endregion */
3084
- /* #region Borders */
3085
- /* #endregion */
3086
- /* #region Box-shadow */
3087
- /* #endregion */
3088
- /* #region Shadows */
3089
- /* #endregion */
3090
- /* #region Z-index */
3091
- /* #endregion */
3092
- /* #region Transition */
3093
- /* #endregion */
3094
- /* #region Timing functions */
3095
- /* #endregion */
3096
- /* #region Focus ring */
3097
- /* #endregion */
3098
- /* #region Inline components */
3099
- /* #endregion */
3100
- /* stylelint-disable-line scss/dollar-variable-pattern */
3101
- /* stylelint-disable-line scss/dollar-variable-pattern */
3102
- /* stylelint-disable-line scss/dollar-variable-pattern */
3103
- /* stylelint-disable-line scss/dollar-variable-pattern */
3104
- .adyen-kyc-heading {
3105
- color: #00112c;
3106
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
3107
- font-size: 15px;
3108
- -webkit-font-smoothing: antialiased;
3109
- -moz-osx-font-smoothing: grayscale;
3110
- font-weight: 400;
3111
- line-height: 1.4;
3112
- display: block;
3113
- font-size: 32px;
3114
- font-weight: 600;
3115
- line-height: 40px;
3116
- margin: var(--adyen-sdk-spacer-000, 0px);
3117
- padding: var(--adyen-sdk-spacer-000, 0px);
2790
+ .adyen-layout-md .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__content {
2791
+ width: auto;
3118
2792
  }
3119
- .adyen-kyc-heading *,
3120
- .adyen-kyc-heading *::before,
3121
- .adyen-kyc-heading *::after {
3122
- box-sizing: border-box;
2793
+ .adyen-kyc-field-verification-methods__footer {
2794
+ align-items: center;
2795
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
2796
+ display: flex;
2797
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2798
+ font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
2799
+ gap: var(--adyen-sdk-spacer-020, 4px);
2800
+ justify-content: end;
2801
+ }
2802
+ .adyen-kyc-field-verification-methods__icon {
2803
+ margin-bottom: var(--adyen-sdk-spacer-030, 6px);
3123
2804
  }
3124
2805
 
3125
- .adyen-kyc-heading--2 {
3126
- font-size: 24px;
3127
- font-weight: 600;
3128
- line-height: 32px;
2806
+ .adyen-kyc-radio-group-card__illustration {
2807
+ display: flex;
2808
+ justify-content: center;
3129
2809
  }
3130
2810
 
3131
- .adyen-kyc-heading--3 {
3132
- font-size: 20px;
3133
- font-weight: 600;
3134
- line-height: 28px;
2811
+ .adyen-kyc-guidance-list {
2812
+ margin: var(--adyen-sdk-spacer-000, 0px);
2813
+ padding-left: var(--adyen-sdk-spacer-060, 12px);
2814
+ }
2815
+ .adyen-kyc-guidance-list__item {
2816
+ margin-bottom: var(--adyen-sdk-spacer-020, 4px);
3135
2817
  }
3136
2818
 
3137
- .adyen-kyc-heading--4 {
3138
- font-size: 16px;
3139
- font-weight: 600;
3140
- line-height: 24px;
2819
+ .adyen-kyc-guidance-external-link {
2820
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
3141
2821
  }
3142
2822
 
3143
- .adyen-kyc-heading--sub {
3144
- color: #394962;
3145
- font-size: 16px;
3146
- font-weight: 400;
3147
- line-height: 24px;
2823
+ .adyen-kyc-instant-verification-error,
2824
+ .adyen-kyc-instant-verification-error > *,
2825
+ .adyen-kyc-instant-verification-error .adyen-kyc-alert__title {
2826
+ display: block;
2827
+ }
2828
+ .adyen-kyc-instant-verification-error > * {
2829
+ left: 16px;
2830
+ margin: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-070, 16px);
2831
+ position: relative;
2832
+ }
2833
+ .adyen-kyc-instant-verification-error > *:not(.adyen-kyc-alert__header) {
2834
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
2835
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
2836
+ }
2837
+ .adyen-kyc-instant-verification-error .adyen-kyc-alert__title {
2838
+ line-height: var(--adyen-sdk-text-title-line-height, 26px);
2839
+ margin: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-020, 4px);
2840
+ }
2841
+ .adyen-kyc-instant-verification-error .adyen-kyc-alert__icon {
2842
+ left: -28px;
2843
+ position: absolute;
2844
+ }.adyen-kyc-individual .adyen-kyc-form {
2845
+ margin-bottom: var(--adyen-sdk-spacer-070, 16px);
3148
2846
  }/* #region Colors */
3149
2847
  /* #endregion */
3150
- /* #region Fonts */
3151
- /* #endregion */
3152
2848
  /* #region Borders */
3153
2849
  /* #endregion */
3154
2850
  /* #region Box-shadow */
@@ -3165,7 +2861,19 @@ button[disabled]:hover {
3165
2861
  /* #endregion */
3166
2862
  /* #region Inline components */
3167
2863
  /* #endregion */
3168
- .adyen-kyc-additional-information {
2864
+ .adyen-kyc-context-helper {
2865
+ background-color: var(--adyen-sdk-color-background-selected, #e3f0ff);
2866
+ border-radius: var(--adyen-sdk-border-radius-s, 4px);
2867
+ margin: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px);
2868
+ padding: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-060, 12px);
2869
+ }
2870
+
2871
+ .adyen-kyc-context-helper__content {
2872
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
2873
+ display: flex;
2874
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
2875
+ gap: var(--adyen-sdk-spacer-040, 8px);
2876
+ }.adyen-kyc-additional-information {
3169
2877
  display: flex;
3170
2878
  flex-direction: column;
3171
2879
  }
@@ -3173,9 +2881,9 @@ button[disabled]:hover {
3173
2881
  padding-bottom: var(--adyen-sdk-spacer-090, 24px);
3174
2882
  }
3175
2883
  .adyen-kyc-additional-information__verified-information .adyen-kyc-verified-information-card {
3176
- background: #f3f6f9;
2884
+ background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
3177
2885
  padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
3178
- border-radius: 12px;
2886
+ border-radius: var(--adyen-sdk-border-radius-l, 12px);
3179
2887
  }
3180
2888
  .adyen-kyc-additional-information__other-business-information {
3181
2889
  padding-bottom: var(--adyen-sdk-spacer-090, 24px);
@@ -3200,8 +2908,6 @@ button[disabled]:hover {
3200
2908
  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
3201
2909
  }/* #region Colors */
3202
2910
  /* #endregion */
3203
- /* #region Fonts */
3204
- /* #endregion */
3205
2911
  /* #region Borders */
3206
2912
  /* #endregion */
3207
2913
  /* #region Box-shadow */
@@ -3218,10 +2924,6 @@ button[disabled]:hover {
3218
2924
  /* #endregion */
3219
2925
  /* #region Inline components */
3220
2926
  /* #endregion */
3221
- /* stylelint-disable-line scss/dollar-variable-pattern */
3222
- /* stylelint-disable-line scss/dollar-variable-pattern */
3223
- /* stylelint-disable-line scss/dollar-variable-pattern */
3224
- /* stylelint-disable-line scss/dollar-variable-pattern */
3225
2927
  .adyen-kyc-form-container {
3226
2928
  width: 100%;
3227
2929
  }
@@ -3242,8 +2944,6 @@ button[disabled]:hover {
3242
2944
  flex-direction: column;
3243
2945
  }/* #region Colors */
3244
2946
  /* #endregion */
3245
- /* #region Fonts */
3246
- /* #endregion */
3247
2947
  /* #region Borders */
3248
2948
  /* #endregion */
3249
2949
  /* #region Box-shadow */
@@ -3261,8 +2961,8 @@ button[disabled]:hover {
3261
2961
  /* #region Inline components */
3262
2962
  /* #endregion */
3263
2963
  .adyen-kyc-expiry-modal__header {
3264
- font-size: 21px;
3265
- font-weight: 600;
2964
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
2965
+ font-weight: var(--adyen-sdk-text-title-font-weight, 600);
3266
2966
  }
3267
2967
 
3268
2968
  .adyen-kyc-expiry-modal__footer {
@@ -3271,8 +2971,6 @@ button[disabled]:hover {
3271
2971
  justify-content: end;
3272
2972
  }/* #region Colors */
3273
2973
  /* #endregion */
3274
- /* #region Fonts */
3275
- /* #endregion */
3276
2974
  /* #region Borders */
3277
2975
  /* #endregion */
3278
2976
  /* #region Box-shadow */
@@ -3289,21 +2987,17 @@ button[disabled]:hover {
3289
2987
  /* #endregion */
3290
2988
  /* #region Inline components */
3291
2989
  /* #endregion */
3292
- /* stylelint-disable-line scss/dollar-variable-pattern */
3293
- /* stylelint-disable-line scss/dollar-variable-pattern */
3294
- /* stylelint-disable-line scss/dollar-variable-pattern */
3295
- /* stylelint-disable-line scss/dollar-variable-pattern */
3296
2990
  /* Base button */
3297
2991
  .adyen-kyc-modal {
3298
- color: #00112c;
3299
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
3300
- font-size: 15px;
2992
+ color: var(--adyen-sdk-color-label-primary, #00112c);
2993
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
2994
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
2995
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
2996
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
3301
2997
  -webkit-font-smoothing: antialiased;
3302
2998
  -moz-osx-font-smoothing: grayscale;
3303
- font-weight: 400;
3304
- line-height: 1.4;
3305
2999
  background-color: #fff;
3306
- border-radius: 12px;
3000
+ border-radius: var(--adyen-sdk-border-radius-l, 12px);
3307
3001
  box-shadow: 0 8px 8px rgba(0, 17, 44, 0.04), 0 2px 4px rgba(0, 17, 44, 0.08);
3308
3002
  box-sizing: border-box;
3309
3003
  cursor: initial;
@@ -3330,10 +3024,10 @@ button[disabled]:hover {
3330
3024
  width: 800px;
3331
3025
  }
3332
3026
  .adyen-kyc-modal--large .adyen-kyc-modal__header {
3333
- border-bottom: 1px solid #dce0e5;
3027
+ border-bottom: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3334
3028
  }
3335
3029
  .adyen-kyc-modal--large .adyen-kyc-modal__footer {
3336
- border-top: 1px solid #dce0e5;
3030
+ border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3337
3031
  }
3338
3032
 
3339
3033
  .adyen-kyc-modal--full-screen {
@@ -3345,10 +3039,10 @@ button[disabled]:hover {
3345
3039
  width: 100%;
3346
3040
  }
3347
3041
  .adyen-kyc-modal--full-screen .adyen-kyc-modal__header {
3348
- border-bottom: 1px solid #dce0e5;
3042
+ border-bottom: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3349
3043
  }
3350
3044
  .adyen-kyc-modal--full-screen .adyen-kyc-modal__footer {
3351
- border-top: 1px solid #dce0e5;
3045
+ border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3352
3046
  }
3353
3047
 
3354
3048
  .adyen-kyc-modal__close {
@@ -3377,8 +3071,7 @@ button[disabled]:hover {
3377
3071
 
3378
3072
  .adyen-kyc-modal__footer {
3379
3073
  background-color: #fff;
3380
- border-bottom-left-radius: 12px;
3381
- border-bottom-right-radius: 12px;
3074
+ border-radius: 0 0 var(--adyen-sdk-border-radius-l, 12px) var(--adyen-sdk-border-radius-l, 12px);
3382
3075
  }
3383
3076
 
3384
3077
  .adyen-kyc-slide-fade-enter-active {
@@ -3393,8 +3086,6 @@ button[disabled]:hover {
3393
3086
  z-index: 600;
3394
3087
  }/* #region Colors */
3395
3088
  /* #endregion */
3396
- /* #region Fonts */
3397
- /* #endregion */
3398
3089
  /* #region Borders */
3399
3090
  /* #endregion */
3400
3091
  /* #region Box-shadow */
@@ -3437,8 +3128,6 @@ button[disabled]:hover {
3437
3128
  visibility: visible;
3438
3129
  }/* #region Colors */
3439
3130
  /* #endregion */
3440
- /* #region Fonts */
3441
- /* #endregion */
3442
3131
  /* #region Borders */
3443
3132
  /* #endregion */
3444
3133
  /* #region Box-shadow */
@@ -3455,20 +3144,16 @@ button[disabled]:hover {
3455
3144
  /* #endregion */
3456
3145
  /* #region Inline components */
3457
3146
  /* #endregion */
3458
- /* stylelint-disable-line scss/dollar-variable-pattern */
3459
- /* stylelint-disable-line scss/dollar-variable-pattern */
3460
- /* stylelint-disable-line scss/dollar-variable-pattern */
3461
- /* stylelint-disable-line scss/dollar-variable-pattern */
3462
3147
  /* stylelint-disable scss/dollar-variable-default */
3463
3148
  /* stylelint-enable scss/dollar-variable-default */
3464
3149
  .adyen-kyc-dropin {
3465
- color: #00112c;
3466
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
3467
- font-size: 15px;
3150
+ color: var(--adyen-sdk-color-label-primary, #00112c);
3151
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
3152
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
3153
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
3154
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
3468
3155
  -webkit-font-smoothing: antialiased;
3469
3156
  -moz-osx-font-smoothing: grayscale;
3470
- font-weight: 400;
3471
- line-height: 1.4;
3472
3157
  background: #fff;
3473
3158
  display: flex;
3474
3159
  flex-direction: column;
@@ -3514,12 +3199,10 @@ button[disabled]:hover {
3514
3199
  }
3515
3200
 
3516
3201
  .adyen-kyc-dropin__main {
3517
- border-radius: 6px;
3202
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
3518
3203
  width: 100%;
3519
3204
  }/* #region Colors */
3520
3205
  /* #endregion */
3521
- /* #region Fonts */
3522
- /* #endregion */
3523
3206
  /* #region Borders */
3524
3207
  /* #endregion */
3525
3208
  /* #region Box-shadow */
@@ -3536,10 +3219,6 @@ button[disabled]:hover {
3536
3219
  /* #endregion */
3537
3220
  /* #region Inline components */
3538
3221
  /* #endregion */
3539
- /* stylelint-disable-line scss/dollar-variable-pattern */
3540
- /* stylelint-disable-line scss/dollar-variable-pattern */
3541
- /* stylelint-disable-line scss/dollar-variable-pattern */
3542
- /* stylelint-disable-line scss/dollar-variable-pattern */
3543
3222
  .adyen-kyc-loading-input__form .adyen-kyc-form-navigation {
3544
3223
  width: 100%;
3545
3224
  }
@@ -3554,7 +3233,7 @@ button[disabled]:hover {
3554
3233
  font-size: 0;
3555
3234
  }
3556
3235
  .adyen-layout-xs-only .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-form-navigation__home-button {
3557
- font-size: 21px;
3236
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
3558
3237
  padding-left: var(--adyen-sdk-spacer-000, 0px);
3559
3238
  }
3560
3239
  .adyen-layout-md .adyen-kyc-form-navigation {
@@ -3567,9 +3246,9 @@ button[disabled]:hover {
3567
3246
  display: none;
3568
3247
  }
3569
3248
  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
3570
- color: #8390a3;
3571
- font-size: 13px;
3572
- font-weight: 600;
3249
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
3250
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
3251
+ font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
3573
3252
  text-transform: uppercase;
3574
3253
  }
3575
3254
  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__items {
@@ -3578,9 +3257,9 @@ button[disabled]:hover {
3578
3257
  }
3579
3258
 
3580
3259
  .adyen-kyc-form-navigation__step-count {
3581
- color: #69778c;
3582
- font-size: 13px;
3583
- font-weight: 600;
3260
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
3261
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
3262
+ font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
3584
3263
  }
3585
3264
 
3586
3265
  .adyen-kyc-form-navigation__home-button-item {
@@ -3591,8 +3270,6 @@ button[disabled]:hover {
3591
3270
  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
3592
3271
  }/* #region Colors */
3593
3272
  /* #endregion */
3594
- /* #region Fonts */
3595
- /* #endregion */
3596
3273
  /* #region Borders */
3597
3274
  /* #endregion */
3598
3275
  /* #region Box-shadow */
@@ -3611,19 +3288,19 @@ button[disabled]:hover {
3611
3288
  /* #endregion */
3612
3289
  .adyen-kyc-form-navigation__item {
3613
3290
  align-items: center;
3614
- border-left: 2px solid #f3f6f9;
3291
+ border-left: var(--adyen-sdk-border-width-m, 2px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3615
3292
  box-sizing: border-box;
3616
- color: #00112c;
3293
+ color: var(--adyen-sdk-color-label-primary, #00112c);
3617
3294
  cursor: default;
3618
3295
  display: flex;
3619
3296
  flex-direction: row;
3620
- font-size: 15px;
3621
- line-height: 21px;
3297
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
3298
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
3622
3299
  padding: var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-040, 8px);
3623
3300
  }
3624
3301
  .adyen-kyc-form-navigation__item--active {
3625
- border-left: 2px solid #06f;
3626
- color: #06f;
3302
+ border-left: var(--adyen-sdk-border-width-m, 2px) solid;
3303
+ color: var(--adyen-sdk-color-label-highlight, #0070f5);
3627
3304
  }
3628
3305
  .adyen-kyc-form-navigation__item--isnav {
3629
3306
  cursor: pointer;
@@ -3637,13 +3314,13 @@ button[disabled]:hover {
3637
3314
  display: inline-flex;
3638
3315
  }
3639
3316
  .adyen-kyc-form-navigation__item-icon--success {
3640
- color: #0abf53;
3317
+ color: var(--adyen-sdk-color-label-success, #07893c);
3641
3318
  }
3642
3319
  .adyen-kyc-form-navigation__item-icon--success .adyen-kyc-icon {
3643
- font-size: 21px;
3320
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
3644
3321
  }
3645
3322
  .adyen-kyc-form-navigation__item-icon--error {
3646
- color: #720000;
3323
+ color: var(--adyen-sdk-color-label-critical, #e22d2d);
3647
3324
  }.adyen-kyc-company-basics {
3648
3325
  display: flex;
3649
3326
  flex-direction: column;
@@ -3653,8 +3330,6 @@ button[disabled]:hover {
3653
3330
  flex-direction: column;
3654
3331
  }/* #region Colors */
3655
3332
  /* #endregion */
3656
- /* #region Fonts */
3657
- /* #endregion */
3658
3333
  /* #region Borders */
3659
3334
  /* #endregion */
3660
3335
  /* #region Box-shadow */
@@ -3671,23 +3346,19 @@ button[disabled]:hover {
3671
3346
  /* #endregion */
3672
3347
  /* #region Inline components */
3673
3348
  /* #endregion */
3674
- /* stylelint-disable-line scss/dollar-variable-pattern */
3675
- /* stylelint-disable-line scss/dollar-variable-pattern */
3676
- /* stylelint-disable-line scss/dollar-variable-pattern */
3677
- /* stylelint-disable-line scss/dollar-variable-pattern */
3678
3349
  .adyen-kyc-company-lookup {
3679
- color: #00112c;
3680
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
3681
- font-size: 15px;
3350
+ color: var(--adyen-sdk-color-label-primary, #00112c);
3351
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
3352
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
3353
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
3354
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
3682
3355
  -webkit-font-smoothing: antialiased;
3683
3356
  -moz-osx-font-smoothing: grayscale;
3684
- font-weight: 400;
3685
- line-height: 1.4;
3686
3357
  display: flex;
3687
3358
  flex-direction: column;
3688
3359
  gap: var(--adyen-sdk-spacer-060, 12px);
3689
- background-color: #f3f6f9;
3690
- border-radius: 8px;
3360
+ background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
3361
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
3691
3362
  padding: var(--adyen-sdk-spacer-070, 16px);
3692
3363
  }
3693
3364
  .adyen-kyc-company-lookup *,
@@ -3701,8 +3372,8 @@ button[disabled]:hover {
3701
3372
  .adyen-kyc-company-lookup__skeleton-loader {
3702
3373
  position: relative;
3703
3374
  overflow: hidden;
3704
- background-color: #e3e6e8;
3705
- border-radius: 8px;
3375
+ background-color: var(--adyen-sdk-color-background-quaternary, #c0c5cc);
3376
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
3706
3377
  width: 100%;
3707
3378
  height: 73px;
3708
3379
  }
@@ -3713,7 +3384,7 @@ button[disabled]:hover {
3713
3384
  left: -100%;
3714
3385
  width: 200%;
3715
3386
  height: 100%;
3716
- background: linear-gradient(90deg, #e3e6e8, #d1d5da, #e3e6e8);
3387
+ background: linear-gradient(90deg, var(--adyen-sdk-color-background-secondary, #f7f7f8), var(--adyen-sdk-color-background-tertiary, #eeeff1), var(--adyen-sdk-color-background-secondary, #f7f7f8));
3717
3388
  animation: moveGradient 1.5s linear infinite;
3718
3389
  }
3719
3390
 
@@ -3735,20 +3406,20 @@ button[disabled]:hover {
3735
3406
  justify-content: space-between;
3736
3407
  }
3737
3408
  .adyen-company-lookup-results-header__description {
3738
- font-size: 14px;
3409
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
3739
3410
  display: flex;
3740
3411
  align-items: flex-start;
3741
3412
  gap: var(--adyen-sdk-spacer-040, 8px);
3742
3413
  }
3743
3414
  .adyen-company-lookup-results-header button {
3744
- color: #06f;
3415
+ color: var(--adyen-sdk-color-label-highlight, #0070f5);
3745
3416
  border: unset;
3746
3417
  background-color: unset;
3747
3418
  padding: unset;
3748
3419
  }
3749
3420
  .adyen-company-lookup-results-header button:hover {
3750
3421
  cursor: pointer;
3751
- color: #0047b2;
3422
+ color: var(--adyen-sdk-color-label-highlight, #0070f5);
3752
3423
  text-decoration: underline;
3753
3424
  }
3754
3425
 
@@ -3764,9 +3435,10 @@ button[disabled]:hover {
3764
3435
  .adyen-company-lookup-results-list__result-option {
3765
3436
  display: flex;
3766
3437
  justify-content: space-between;
3767
- background-color: #fff;
3438
+ background-color: var(--adyen-sdk-color-background-primary, #ffffff);
3768
3439
  box-shadow: 0 1px 1px rgba(0, 17, 44, 0.12), 0 1px 3px rgba(0, 17, 44, 0.14);
3769
- border: 1px solid #fff;
3440
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3441
+ border-bottom: none;
3770
3442
  padding: var(--adyen-sdk-spacer-070, 16px);
3771
3443
  margin: unset;
3772
3444
  }
@@ -3785,14 +3457,12 @@ button[disabled]:hover {
3785
3457
  margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
3786
3458
  }
3787
3459
  .adyen-company-lookup-results-list__result-option--selected {
3788
- border-radius: 8px 8px 0 0;
3460
+ border-radius: var(--adyen-sdk-border-radius-m, 8px) var(--adyen-sdk-border-radius-m, 8px) 0 0;
3789
3461
  }
3790
3462
  .adyen-company-lookup-results-list__result-option--selected, .adyen-company-lookup-results-list__result-option:hover {
3791
3463
  box-shadow: 0 1px 1px rgba(0, 17, 44, 0.12), 0 3px 6px rgba(0, 17, 44, 0.14);
3792
3464
  }/* #region Colors */
3793
3465
  /* #endregion */
3794
- /* #region Fonts */
3795
- /* #endregion */
3796
3466
  /* #region Borders */
3797
3467
  /* #endregion */
3798
3468
  /* #region Box-shadow */
@@ -3809,18 +3479,14 @@ button[disabled]:hover {
3809
3479
  /* #endregion */
3810
3480
  /* #region Inline components */
3811
3481
  /* #endregion */
3812
- /* stylelint-disable-line scss/dollar-variable-pattern */
3813
- /* stylelint-disable-line scss/dollar-variable-pattern */
3814
- /* stylelint-disable-line scss/dollar-variable-pattern */
3815
- /* stylelint-disable-line scss/dollar-variable-pattern */
3816
3482
  .adyen-company-lookup-result {
3817
- color: #00112c;
3818
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
3819
- font-size: 15px;
3483
+ color: var(--adyen-sdk-color-label-primary, #00112c);
3484
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
3485
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
3486
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
3487
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
3820
3488
  -webkit-font-smoothing: antialiased;
3821
3489
  -moz-osx-font-smoothing: grayscale;
3822
- font-weight: 400;
3823
- line-height: 1.4;
3824
3490
  }
3825
3491
  .adyen-company-lookup-result *,
3826
3492
  .adyen-company-lookup-result *::before,
@@ -3830,7 +3496,8 @@ button[disabled]:hover {
3830
3496
  .adyen-company-lookup-result__alert {
3831
3497
  display: flex;
3832
3498
  padding: var(--adyen-sdk-spacer-070, 16px);
3833
- border-radius: 0 0 8px 8px;
3499
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3500
+ border-radius: 0 0 var(--adyen-sdk-border-radius-m, 8px) var(--adyen-sdk-border-radius-m, 8px);
3834
3501
  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
3835
3502
  box-shadow: 0 1px 1px rgba(0, 17, 44, 0.12), 0 3px 6px rgba(0, 17, 44, 0.14);
3836
3503
  }
@@ -3856,17 +3523,17 @@ button[disabled]:hover {
3856
3523
  display: flex;
3857
3524
  }
3858
3525
  .adyen-company-lookup-result__icon--error {
3859
- color: #e50000;
3860
- font-size: 18px;
3526
+ color: var(--adyen-sdk-color-label-critical, #e22d2d);
3527
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
3861
3528
  }
3862
3529
  .adyen-company-lookup-result__icon--verified {
3863
3530
  background-color: #07863a;
3864
- color: #fff;
3865
- font-size: 10px;
3531
+ color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
3532
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
3866
3533
  }
3867
3534
  .adyen-company-lookup-result__icon--warning {
3868
- color: #b36900;
3869
- font-size: 18px;
3535
+ color: var(--adyen-sdk-color-label-warning, #b06300);
3536
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
3870
3537
  }
3871
3538
  .adyen-company-lookup-result__text {
3872
3539
  display: flex;
@@ -3875,7 +3542,7 @@ button[disabled]:hover {
3875
3542
  gap: var(--adyen-sdk-spacer-040, 8px);
3876
3543
  }
3877
3544
  .adyen-company-lookup-result__text--bold {
3878
- font-weight: 600;
3545
+ font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
3879
3546
  }.adyen-kyc-company-other-details {
3880
3547
  display: flex;
3881
3548
  flex-direction: column;
@@ -3920,8 +3587,6 @@ button[disabled]:hover {
3920
3587
  margin-left: auto;
3921
3588
  }/* #region Colors */
3922
3589
  /* #endregion */
3923
- /* #region Fonts */
3924
- /* #endregion */
3925
3590
  /* #region Borders */
3926
3591
  /* #endregion */
3927
3592
  /* #region Box-shadow */
@@ -3938,18 +3603,14 @@ button[disabled]:hover {
3938
3603
  /* #endregion */
3939
3604
  /* #region Inline components */
3940
3605
  /* #endregion */
3941
- /* stylelint-disable-line scss/dollar-variable-pattern */
3942
- /* stylelint-disable-line scss/dollar-variable-pattern */
3943
- /* stylelint-disable-line scss/dollar-variable-pattern */
3944
- /* stylelint-disable-line scss/dollar-variable-pattern */
3945
3606
  .adyen-kyc-decision-makers {
3946
- color: #00112c;
3947
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
3948
- font-size: 15px;
3607
+ color: var(--adyen-sdk-color-label-primary, #00112c);
3608
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
3609
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
3610
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
3611
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
3949
3612
  -webkit-font-smoothing: antialiased;
3950
3613
  -moz-osx-font-smoothing: grayscale;
3951
- font-weight: 400;
3952
- line-height: 1.4;
3953
3614
  }
3954
3615
  .adyen-kyc-decision-makers *,
3955
3616
  .adyen-kyc-decision-makers *::before,
@@ -3978,19 +3639,19 @@ button[disabled]:hover {
3978
3639
  width: fit-content;
3979
3640
  }
3980
3641
  .adyen-kyc-decision-makers__add {
3981
- color: #06f;
3642
+ color: var(--adyen-sdk-color-label-highlight, #0070f5);
3982
3643
  width: 100%;
3983
3644
  }
3984
3645
  .adyen-kyc-decision-makers__add .adyen-kyc-icon {
3985
- font-size: 12px;
3646
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
3986
3647
  }
3987
3648
  .adyen-kyc-decision-makers__warning {
3988
3649
  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
3989
- border-radius: 4px;
3650
+ border-radius: var(--adyen-sdk-border-radius-s, 4px);
3990
3651
  }
3991
3652
  .adyen-kyc-decision-makers__add--more.adyen-kyc-button.adyen-kyc-button--secondary {
3992
3653
  background-color: transparent;
3993
- border: 1px solid #dce0e5;
3654
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3994
3655
  border-top: 0;
3995
3656
  border-top-left-radius: 0;
3996
3657
  border-top-right-radius: 0;
@@ -4010,8 +3671,6 @@ button[disabled]:hover {
4010
3671
  margin-bottom: var(--adyen-sdk-spacer-020, 4px);
4011
3672
  }/* #region Colors */
4012
3673
  /* #endregion */
4013
- /* #region Fonts */
4014
- /* #endregion */
4015
3674
  /* #region Borders */
4016
3675
  /* #endregion */
4017
3676
  /* #region Box-shadow */
@@ -4028,13 +3687,9 @@ button[disabled]:hover {
4028
3687
  /* #endregion */
4029
3688
  /* #region Inline components */
4030
3689
  /* #endregion */
4031
- /* stylelint-disable-line scss/dollar-variable-pattern */
4032
- /* stylelint-disable-line scss/dollar-variable-pattern */
4033
- /* stylelint-disable-line scss/dollar-variable-pattern */
4034
- /* stylelint-disable-line scss/dollar-variable-pattern */
4035
3690
  .adyen-kyc-card-group > .adyen-kyc-card + .adyen-kyc-card {
4036
3691
  margin-top: -1px;
4037
- border-top: 1px solid #dce0e5;
3692
+ border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
4038
3693
  }
4039
3694
  .adyen-kyc-card-group > .adyen-kyc-card:not(:only-of-type):first-of-type {
4040
3695
  border-bottom-left-radius: 0;
@@ -4048,8 +3703,6 @@ button[disabled]:hover {
4048
3703
  border-top-right-radius: 0;
4049
3704
  }/* #region Colors */
4050
3705
  /* #endregion */
4051
- /* #region Fonts */
4052
- /* #endregion */
4053
3706
  /* #region Borders */
4054
3707
  /* #endregion */
4055
3708
  /* #region Box-shadow */
@@ -4066,18 +3719,14 @@ button[disabled]:hover {
4066
3719
  /* #endregion */
4067
3720
  /* #region Inline components */
4068
3721
  /* #endregion */
4069
- /* stylelint-disable-line scss/dollar-variable-pattern */
4070
- /* stylelint-disable-line scss/dollar-variable-pattern */
4071
- /* stylelint-disable-line scss/dollar-variable-pattern */
4072
- /* stylelint-disable-line scss/dollar-variable-pattern */
4073
3722
  .adyen-kyc-entity-association {
4074
- color: #00112c;
4075
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4076
- font-size: 15px;
3723
+ color: var(--adyen-sdk-color-label-primary, #00112c);
3724
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
3725
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
3726
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
3727
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4077
3728
  -webkit-font-smoothing: antialiased;
4078
3729
  -moz-osx-font-smoothing: grayscale;
4079
- font-weight: 400;
4080
- line-height: 1.4;
4081
3730
  display: flex;
4082
3731
  flex-direction: column;
4083
3732
  margin: var(--adyen-sdk-spacer-000, 0px);
@@ -4094,7 +3743,8 @@ button[disabled]:hover {
4094
3743
  }
4095
3744
  .adyen-kyc-entity-association__title {
4096
3745
  flex: 1;
4097
- font-weight: 600;
3746
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
3747
+ font-weight: var(--adyen-sdk-text-title-font-weight, 600);
4098
3748
  margin: var(--adyen-sdk-spacer-000, 0px);
4099
3749
  overflow: hidden;
4100
3750
  text-overflow: ellipsis;
@@ -4114,8 +3764,8 @@ button[disabled]:hover {
4114
3764
  }
4115
3765
  .adyen-kyc-entity-association__more-actions-toggle {
4116
3766
  border-radius: 50%;
4117
- color: #69778c;
4118
- font-size: 5.4px;
3767
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
3768
+ font-size: calc(var(--adyen-sdk-text-caption-font-size, 12px) / 2);
4119
3769
  height: 32px;
4120
3770
  margin: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-040, 8px);
4121
3771
  min-width: auto;
@@ -4142,8 +3792,6 @@ button[disabled]:hover {
4142
3792
  padding: var(--adyen-sdk-spacer-040, 8px);
4143
3793
  }/* #region Colors */
4144
3794
  /* #endregion */
4145
- /* #region Fonts */
4146
- /* #endregion */
4147
3795
  /* #region Borders */
4148
3796
  /* #endregion */
4149
3797
  /* #region Box-shadow */
@@ -4160,24 +3808,21 @@ button[disabled]:hover {
4160
3808
  /* #endregion */
4161
3809
  /* #region Inline components */
4162
3810
  /* #endregion */
4163
- /* stylelint-disable-line scss/dollar-variable-pattern */
4164
- /* stylelint-disable-line scss/dollar-variable-pattern */
4165
- /* stylelint-disable-line scss/dollar-variable-pattern */
4166
- /* stylelint-disable-line scss/dollar-variable-pattern */
4167
3811
  .adyen-kyc-status {
4168
- color: #00112c;
4169
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4170
- font-size: 15px;
3812
+ color: var(--adyen-sdk-color-label-primary, #00112c);
3813
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
3814
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
3815
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
3816
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4171
3817
  -webkit-font-smoothing: antialiased;
4172
3818
  -moz-osx-font-smoothing: grayscale;
4173
- font-weight: 400;
4174
- line-height: 1.4;
4175
3819
  border: 0;
4176
3820
  border-radius: var(--adyen-sdk-border-radius-l, 12px);
4177
3821
  display: flex;
4178
- font-size: 14px;
3822
+ align-items: center;
3823
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4179
3824
  height: 24px;
4180
- line-height: 16px;
3825
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4181
3826
  padding: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-040, 8px);
4182
3827
  }
4183
3828
  .adyen-kyc-status *,
@@ -4202,18 +3847,18 @@ button[disabled]:hover {
4202
3847
  display: flex;
4203
3848
  height: 14px;
4204
3849
  justify-content: center;
4205
- margin-right: var(--adyen-sdk-spacer-020, 4px);
3850
+ margin-right: var(--adyen-sdk-spacer-030, 6px);
4206
3851
  width: 14px;
4207
3852
  }
4208
3853
  .adyen-kyc-status__icon .adyen-kyc-icon {
4209
3854
  align-items: center;
4210
3855
  color: var(--adyen-sdk-color-label-on-color, #ffffff);
4211
3856
  display: flex;
4212
- font-size: 7px;
3857
+ font-size: calc(var(--adyen-sdk-text-body-font-size, 14px) / 2);
4213
3858
  }
4214
3859
  .adyen-kyc-status__icon--error .adyen-kyc-icon {
4215
3860
  color: var(--adyen-sdk-color-label-critical, #e22d2d);
4216
- font-size: 14px;
3861
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4217
3862
  }
4218
3863
  .adyen-kyc-status__icon--finished {
4219
3864
  background-color: var(--adyen-sdk-color-background-success-strong, #07893c);
@@ -4232,8 +3877,6 @@ button[disabled]:hover {
4232
3877
  display: none;
4233
3878
  }/* #region Colors */
4234
3879
  /* #endregion */
4235
- /* #region Fonts */
4236
- /* #endregion */
4237
3880
  /* #region Borders */
4238
3881
  /* #endregion */
4239
3882
  /* #region Box-shadow */
@@ -4250,21 +3893,17 @@ button[disabled]:hover {
4250
3893
  /* #endregion */
4251
3894
  /* #region Inline components */
4252
3895
  /* #endregion */
4253
- /* stylelint-disable-line scss/dollar-variable-pattern */
4254
- /* stylelint-disable-line scss/dollar-variable-pattern */
4255
- /* stylelint-disable-line scss/dollar-variable-pattern */
4256
- /* stylelint-disable-line scss/dollar-variable-pattern */
4257
3896
  .adyen-kyc-card {
4258
- color: #00112c;
4259
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4260
- font-size: 15px;
3897
+ color: var(--adyen-sdk-color-label-primary, #00112c);
3898
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
3899
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
3900
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
3901
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4261
3902
  -webkit-font-smoothing: antialiased;
4262
3903
  -moz-osx-font-smoothing: grayscale;
4263
- font-weight: 400;
4264
- line-height: 1.4;
4265
3904
  background-color: #fff;
4266
- border: #dce0e5 1px solid;
4267
- border-radius: 4px;
3905
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3906
+ border-radius: var(--adyen-sdk-border-radius-l, 12px);
4268
3907
  display: block;
4269
3908
  outline: none;
4270
3909
  }
@@ -4275,7 +3914,7 @@ button[disabled]:hover {
4275
3914
  }
4276
3915
 
4277
3916
  .adyen-kyc-card.adyen-kyc-card--stateful {
4278
- border-color: #dce0e5;
3917
+ border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
4279
3918
  cursor: pointer;
4280
3919
  transition-duration: 0.2s;
4281
3920
  transition-property: border-color, box-shadow;
@@ -4284,7 +3923,7 @@ button[disabled]:hover {
4284
3923
  z-index: 0;
4285
3924
  }
4286
3925
  .adyen-kyc-card.adyen-kyc-card--stateful:hover {
4287
- border-color: #69778c;
3926
+ border-color: var(--adyen-sdk-color-outline-primary-hover, #c9cdd3);
4288
3927
  z-index: 1;
4289
3928
  }
4290
3929
  .adyen-kyc-card.adyen-kyc-card--stateful:focus, .adyen-kyc-card.adyen-kyc-card--stateful:active {
@@ -4293,14 +3932,14 @@ button[disabled]:hover {
4293
3932
  }
4294
3933
 
4295
3934
  .adyen-kyc-card.adyen-kyc-card--active {
4296
- border-color: #dce0e5;
3935
+ border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
4297
3936
  cursor: pointer;
4298
3937
  transition-duration: 0.2s;
4299
3938
  transition-property: border-color, box-shadow;
4300
3939
  transition-timing-function: ease;
4301
3940
  }
4302
3941
  .adyen-kyc-card.adyen-kyc-card--active, .adyen-kyc-card.adyen-kyc-card--active:active, .adyen-kyc-card.adyen-kyc-card--active:hover {
4303
- border-color: #06f;
3942
+ border-color: var(--adyen-sdk-color-outline-primary-active, #00112c);
4304
3943
  }
4305
3944
  .adyen-kyc-card.adyen-kyc-card--active:focus, .adyen-kyc-card.adyen-kyc-card--active:active {
4306
3945
  box-shadow: 0 0 0 2px #cce0ff;
@@ -4308,12 +3947,9 @@ button[disabled]:hover {
4308
3947
 
4309
3948
  .adyen-kyc-card.adyen-kyc-card--disabled {
4310
3949
  background-color: #f3f6f9;
4311
- color: #20304c;
3950
+ color: var(--adyen-sdk-color-label-disabled, #8d95a3);
4312
3951
  cursor: not-allowed;
4313
3952
  }
4314
- .adyen-kyc-card.adyen-kyc-card--disabled, .adyen-kyc-card.adyen-kyc-card--disabled:active, .adyen-kyc-card.adyen-kyc-card--disabled:hover {
4315
- border-color: #dce0e5;
4316
- }
4317
3953
 
4318
3954
  .adyen-kyc-card__header {
4319
3955
  padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
@@ -4334,11 +3970,9 @@ button[disabled]:hover {
4334
3970
  }
4335
3971
 
4336
3972
  .adyen-kyc-card__warning {
4337
- border-radius: 0 0 4px 4px;
3973
+ border-radius: 0 0 var(--adyen-sdk-border-radius-s, 4px) var(--adyen-sdk-border-radius-s, 4px);
4338
3974
  }/* #region Colors */
4339
3975
  /* #endregion */
4340
- /* #region Fonts */
4341
- /* #endregion */
4342
3976
  /* #region Borders */
4343
3977
  /* #endregion */
4344
3978
  /* #region Box-shadow */
@@ -4357,8 +3991,8 @@ button[disabled]:hover {
4357
3991
  /* #endregion */
4358
3992
  .adyen-actions-menu {
4359
3993
  background: #fff;
4360
- border: 1px solid #dce0e5;
4361
- border-radius: 12px;
3994
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3995
+ border-radius: var(--adyen-sdk-border-radius-l, 12px);
4362
3996
  box-shadow: 0 8px 8px rgba(0, 17, 44, 0.04), 0 2px 4px rgba(0, 17, 44, 0.08);
4363
3997
  display: flex;
4364
3998
  flex-direction: column;
@@ -4369,16 +4003,14 @@ button[disabled]:hover {
4369
4003
  z-index: 100;
4370
4004
  }
4371
4005
  .adyen-actions-menu__option {
4372
- color: #394962;
4373
- font-size: 15px;
4374
- font-weight: 100;
4006
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
4007
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4008
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
4375
4009
  justify-content: flex-end;
4376
4010
  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-040, 8px);
4377
4011
  width: 100%;
4378
4012
  }/* #region Colors */
4379
4013
  /* #endregion */
4380
- /* #region Fonts */
4381
- /* #endregion */
4382
4014
  /* #region Borders */
4383
4015
  /* #endregion */
4384
4016
  /* #region Box-shadow */
@@ -4395,18 +4027,14 @@ button[disabled]:hover {
4395
4027
  /* #endregion */
4396
4028
  /* #region Inline components */
4397
4029
  /* #endregion */
4398
- /* stylelint-disable-line scss/dollar-variable-pattern */
4399
- /* stylelint-disable-line scss/dollar-variable-pattern */
4400
- /* stylelint-disable-line scss/dollar-variable-pattern */
4401
- /* stylelint-disable-line scss/dollar-variable-pattern */
4402
4030
  .adyen-kyc-entity-status {
4403
- color: #00112c;
4404
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4405
- font-size: 15px;
4031
+ color: var(--adyen-sdk-color-label-primary, #00112c);
4032
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
4033
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4034
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
4035
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4406
4036
  -webkit-font-smoothing: antialiased;
4407
4037
  -moz-osx-font-smoothing: grayscale;
4408
- font-weight: 400;
4409
- line-height: 1.4;
4410
4038
  }
4411
4039
  .adyen-kyc-entity-status *,
4412
4040
  .adyen-kyc-entity-status *::before,
@@ -4424,7 +4052,7 @@ button[disabled]:hover {
4424
4052
  width: fit-content;
4425
4053
  }
4426
4054
  .adyen-kyc-entity-status__icon {
4427
- line-height: 1;
4055
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4428
4056
  display: flex;
4429
4057
  margin-right: var(--adyen-sdk-spacer-040, 8px);
4430
4058
  width: 18px;
@@ -4435,26 +4063,26 @@ button[disabled]:hover {
4435
4063
  }
4436
4064
  .adyen-kyc-entity-status__icon--obligatory {
4437
4065
  background-color: #dce0e5;
4438
- color: #fff;
4066
+ color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
4439
4067
  }
4440
4068
  .adyen-kyc-entity-status__icon--obligatory-success {
4441
4069
  background-color: #0abf53;
4442
- color: #fff;
4070
+ color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
4443
4071
  }
4444
4072
  .adyen-kyc-entity-status__icon--conditional {
4445
4073
  background-color: #fff;
4446
- border: #d1d5da 1px solid;
4447
- color: #a5afbd;
4074
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
4075
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
4448
4076
  }
4449
4077
  .adyen-kyc-entity-status__icon--conditional-success {
4450
- border: #0abf53 1px solid;
4451
- color: #0abf53;
4078
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-success, #07893c);
4079
+ color: var(--adyen-sdk-color-label-success, #07893c);
4452
4080
  }
4453
4081
  .adyen-kyc-entity-status__legend {
4454
4082
  display: flex;
4455
4083
  padding-bottom: var(--adyen-sdk-spacer-090, 24px);
4456
4084
  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
4457
- border-bottom: #d1d5da 1px solid;
4085
+ border-bottom: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
4458
4086
  }
4459
4087
  .adyen-kyc-entity-status__legend--rule {
4460
4088
  display: flex;
@@ -4463,41 +4091,21 @@ button[disabled]:hover {
4463
4091
  }
4464
4092
  .adyen-kyc-entity-status--text {
4465
4093
  margin-top: var(--adyen-sdk-spacer-020, 4px);
4466
- }/* #region Colors */
4467
- /* #endregion */
4468
- /* #region Fonts */
4469
- /* #endregion */
4470
- /* #region Borders */
4471
- /* #endregion */
4472
- /* #region Box-shadow */
4473
- /* #endregion */
4474
- /* #region Shadows */
4475
- /* #endregion */
4476
- /* #region Z-index */
4477
- /* #endregion */
4478
- /* #region Transition */
4479
- /* #endregion */
4480
- /* #region Timing functions */
4481
- /* #endregion */
4482
- /* #region Focus ring */
4483
- /* #endregion */
4484
- /* #region Inline components */
4485
- /* #endregion */
4486
- @keyframes adyen-kyc-shimmer {
4094
+ }@keyframes adyen-kyc-shimmer {
4487
4095
  0% {
4488
- background-color: #f3f6f9;
4096
+ background-color: hsl(0, 0%, 83%);
4489
4097
  }
4490
4098
  50% {
4491
- background-color: #dce0e5;
4099
+ background-color: hsl(0, 0%, 90%);
4492
4100
  }
4493
4101
  100% {
4494
- background-color: #f3f6f9;
4102
+ background-color: hsl(0, 0%, 83%);
4495
4103
  }
4496
4104
  }
4497
4105
  .adyen-kyc-shimmer {
4498
4106
  animation: adyen-kyc-shimmer 2s linear infinite;
4499
- background-color: #dce0e5;
4500
- border-radius: 4px;
4107
+ background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
4108
+ border-radius: var(--adyen-sdk-border-radius-s, 4px);
4501
4109
  position: relative;
4502
4110
  }
4503
4111
  .adyen-kyc-shimmer + .adyen-kyc-shimmer {
@@ -4515,8 +4123,6 @@ button[disabled]:hover {
4515
4123
  width: 40%;
4516
4124
  }/* #region Colors */
4517
4125
  /* #endregion */
4518
- /* #region Fonts */
4519
- /* #endregion */
4520
4126
  /* #region Borders */
4521
4127
  /* #endregion */
4522
4128
  /* #region Box-shadow */
@@ -4536,7 +4142,7 @@ button[disabled]:hover {
4536
4142
  .adyen-kyc-introduction {
4537
4143
  display: flex;
4538
4144
  flex-direction: column;
4539
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4145
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
4540
4146
  gap: var(--adyen-sdk-spacer-020, 4px);
4541
4147
  max-width: 660px;
4542
4148
  margin: var(--adyen-sdk-spacer-000, 0px) auto;
@@ -4546,24 +4152,24 @@ button[disabled]:hover {
4546
4152
  text-align: right;
4547
4153
  }
4548
4154
  .adyen-kyc-introduction__number {
4549
- color: #dce0e5;
4550
- font-size: 210px;
4551
- font-weight: 600;
4552
- height: 210px;
4553
- line-height: 210px;
4155
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
4156
+ font-size: calc(var(--adyen-sdk-text-title-font-size, 16px) * 10);
4157
+ font-weight: var(--adyen-sdk-text-title-font-weight, 600);
4158
+ height: calc(var(--adyen-sdk-text-title-font-size, 16px) * 10);
4159
+ line-height: calc(var(--adyen-sdk-text-title-font-size, 16px) * 10);
4554
4160
  margin-bottom: var(--adyen-sdk-spacer-080, 20px);
4555
4161
  position: relative;
4556
4162
  top: var(--adyen-sdk-spacer-080, 20px);
4557
4163
  }
4558
4164
  .adyen-kyc-introduction__title {
4559
- font-size: 21px;
4560
- font-weight: 600;
4561
- line-height: 1.4;
4165
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
4166
+ font-weight: var(--adyen-sdk-text-title-font-weight, 600);
4167
+ line-height: var(--adyen-sdk-text-title-line-height, 26px);
4562
4168
  }
4563
4169
  .adyen-kyc-introduction__description {
4564
- font-size: 15px;
4565
- font-weight: 100;
4566
- line-height: 1.4;
4170
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4171
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
4172
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4567
4173
  }
4568
4174
  .adyen-kyc-introduction__description p {
4569
4175
  margin: var(--adyen-sdk-spacer-000, 0px);
@@ -4572,7 +4178,7 @@ button[disabled]:hover {
4572
4178
  margin-bottom: var(--adyen-sdk-spacer-080, 20px);
4573
4179
  }
4574
4180
  .adyen-kyc-introduction__description p:has(+ ul) {
4575
- font-weight: 600;
4181
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
4576
4182
  }
4577
4183
  .adyen-kyc-introduction__description p + ul {
4578
4184
  margin: var(--adyen-sdk-spacer-000, 0px);
@@ -4587,8 +4193,6 @@ button[disabled]:hover {
4587
4193
  flex-grow: 1;
4588
4194
  }/* #region Colors */
4589
4195
  /* #endregion */
4590
- /* #region Fonts */
4591
- /* #endregion */
4592
4196
  /* #region Borders */
4593
4197
  /* #endregion */
4594
4198
  /* #region Box-shadow */
@@ -4605,10 +4209,6 @@ button[disabled]:hover {
4605
4209
  /* #endregion */
4606
4210
  /* #region Inline components */
4607
4211
  /* #endregion */
4608
- /* stylelint-disable-line scss/dollar-variable-pattern */
4609
- /* stylelint-disable-line scss/dollar-variable-pattern */
4610
- /* stylelint-disable-line scss/dollar-variable-pattern */
4611
- /* stylelint-disable-line scss/dollar-variable-pattern */
4612
4212
  .adyen-kyc-progress {
4613
4213
  width: 100%;
4614
4214
  }
@@ -4665,8 +4265,6 @@ button[disabled]:hover {
4665
4265
  width: 92px;
4666
4266
  }/* #region Colors */
4667
4267
  /* #endregion */
4668
- /* #region Fonts */
4669
- /* #endregion */
4670
4268
  /* #region Borders */
4671
4269
  /* #endregion */
4672
4270
  /* #region Box-shadow */
@@ -4683,10 +4281,6 @@ button[disabled]:hover {
4683
4281
  /* #endregion */
4684
4282
  /* #region Inline components */
4685
4283
  /* #endregion */
4686
- /* stylelint-disable-line scss/dollar-variable-pattern */
4687
- /* stylelint-disable-line scss/dollar-variable-pattern */
4688
- /* stylelint-disable-line scss/dollar-variable-pattern */
4689
- /* stylelint-disable-line scss/dollar-variable-pattern */
4690
4284
  .adyen-task-list__container {
4691
4285
  margin-left: auto;
4692
4286
  margin-right: auto;
@@ -4701,9 +4295,9 @@ button[disabled]:hover {
4701
4295
 
4702
4296
  .adyen-kyc-card.adyen-kyc-add-payout {
4703
4297
  align-items: center;
4704
- color: #69778c;
4298
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
4705
4299
  display: flex;
4706
- font-size: 15px;
4300
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4707
4301
  justify-content: center;
4708
4302
  }
4709
4303
  .adyen-kyc-card.adyen-kyc-add-payout .adyen-kyc-card__body {
@@ -4723,18 +4317,18 @@ button[disabled]:hover {
4723
4317
  }
4724
4318
 
4725
4319
  .adyen-task-list-singpass-banner__title {
4726
- font-size: 14px;
4727
- font-weight: 600;
4728
- line-height: 20px;
4320
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4321
+ font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
4322
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4729
4323
  }
4730
4324
  .adyen-task-list-singpass-banner__title + * {
4731
4325
  margin-top: var(--adyen-sdk-spacer-020, 4px);
4732
4326
  }
4733
4327
 
4734
4328
  .adyen-task-list-singpass-banner__subtitle {
4735
- font-size: 14px;
4736
- font-weight: 400;
4737
- line-height: 24px;
4329
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4330
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
4331
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4738
4332
  }
4739
4333
  .adyen-task-list-singpass-banner__subtitle + * {
4740
4334
  margin-top: var(--adyen-sdk-spacer-020, 4px);
@@ -4743,10 +4337,10 @@ button[disabled]:hover {
4743
4337
  .adyen-kyc-button.adyen-task-list-singpass-banner__button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary) {
4744
4338
  width: 100%;
4745
4339
  background-color: #fff;
4746
- color: #000;
4747
- font-size: 14px;
4748
- font-weight: 400;
4749
- line-height: var(--adyen-sdk-spacer-080, 20px);
4340
+ color: var(--adyen-sdk-color-label-primary, #00112c);
4341
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4342
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
4343
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4750
4344
  }
4751
4345
  .adyen-kyc-button.adyen-task-list-singpass-banner__button:not(.adyen-kyc-button--secondary):not(.adyen-kyc-button--tertiary):hover {
4752
4346
  background-color: #fff;
@@ -4761,19 +4355,22 @@ button[disabled]:hover {
4761
4355
  padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px);
4762
4356
  }
4763
4357
 
4358
+ .adyen-task-list__description {
4359
+ display: flex;
4360
+ align-items: center;
4361
+ }
4362
+
4764
4363
  .adyen-kyc-dropin-container {
4765
4364
  box-sizing: border-box;
4766
4365
  background-color: #fff;
4767
4366
  position: relative;
4768
4367
  padding: var(--adyen-sdk-spacer-100, 32px);
4769
- border-radius: 8px;
4368
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
4770
4369
  }
4771
4370
  .adyen-layout-xs-only .adyen-kyc-dropin-container {
4772
4371
  padding: var(--adyen-sdk-spacer-040, 8px);
4773
4372
  }/* #region Colors */
4774
4373
  /* #endregion */
4775
- /* #region Fonts */
4776
- /* #endregion */
4777
4374
  /* #region Borders */
4778
4375
  /* #endregion */
4779
4376
  /* #region Box-shadow */
@@ -4790,10 +4387,6 @@ button[disabled]:hover {
4790
4387
  /* #endregion */
4791
4388
  /* #region Inline components */
4792
4389
  /* #endregion */
4793
- /* stylelint-disable-line scss/dollar-variable-pattern */
4794
- /* stylelint-disable-line scss/dollar-variable-pattern */
4795
- /* stylelint-disable-line scss/dollar-variable-pattern */
4796
- /* stylelint-disable-line scss/dollar-variable-pattern */
4797
4390
  .adyen-task-item {
4798
4391
  gap: var(--adyen-sdk-spacer-100, 32px);
4799
4392
  }
@@ -4818,24 +4411,24 @@ button[disabled]:hover {
4818
4411
  flex-direction: column;
4819
4412
  }
4820
4413
  .adyen-task-item__info {
4821
- font-size: 13px;
4822
- line-height: 1;
4414
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
4415
+ line-height: var(--adyen-sdk-text-caption-line-height, 18px);
4823
4416
  }
4824
4417
  .adyen-task-item__title {
4825
- color: #00112c;
4826
- font-size: 15px;
4418
+ color: var(--adyen-sdk-color-label-primary, #00112c);
4419
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4827
4420
  }
4828
4421
  .adyen-task-item__tagline {
4829
- color: #8390a3;
4830
- font-size: 12px;
4422
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
4423
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
4831
4424
  }
4832
4425
  .adyen-task-item__icon-wrapper {
4833
4426
  align-items: center;
4834
4427
  background-color: #20304c;
4835
- border-radius: 6px;
4836
- color: #fff;
4428
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
4429
+ color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
4837
4430
  display: flex;
4838
- font-size: 18px;
4431
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
4839
4432
  height: 32px;
4840
4433
  justify-content: center;
4841
4434
  width: 32px;
@@ -4848,13 +4441,13 @@ button[disabled]:hover {
4848
4441
  padding: var(--adyen-sdk-spacer-040, 8px);
4849
4442
  }
4850
4443
  .adyen-task-item-extra-actions {
4851
- color: #00112c;
4852
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4853
- font-size: 15px;
4444
+ color: var(--adyen-sdk-color-label-primary, #00112c);
4445
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
4446
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4447
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
4448
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4854
4449
  -webkit-font-smoothing: antialiased;
4855
4450
  -moz-osx-font-smoothing: grayscale;
4856
- font-weight: 400;
4857
- line-height: 1.4;
4858
4451
  display: flex;
4859
4452
  flex-direction: column;
4860
4453
  margin: var(--adyen-sdk-spacer-000, 0px);
@@ -4868,7 +4461,7 @@ button[disabled]:hover {
4868
4461
  }
4869
4462
  .adyen-task-item-extra-actions__more-actions-toggle {
4870
4463
  border-radius: 50%;
4871
- color: #69778c;
4464
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
4872
4465
  font-size: 5.4px;
4873
4466
  min-width: auto;
4874
4467
  height: 32px;
@@ -4897,13 +4490,11 @@ button[disabled]:hover {
4897
4490
  .adyen-kyc-task-status-details-required,
4898
4491
  .adyen-kyc-task-status-sign,
4899
4492
  .adyen-kyc-task-status-submit {
4900
- font-size: 14px;
4493
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4901
4494
  margin-right: var(--adyen-sdk-spacer-040, 8px);
4902
4495
  padding-top: 1px;
4903
4496
  }/* #region Colors */
4904
4497
  /* #endregion */
4905
- /* #region Fonts */
4906
- /* #endregion */
4907
4498
  /* #region Borders */
4908
4499
  /* #endregion */
4909
4500
  /* #region Box-shadow */
@@ -4920,18 +4511,14 @@ button[disabled]:hover {
4920
4511
  /* #endregion */
4921
4512
  /* #region Inline components */
4922
4513
  /* #endregion */
4923
- /* stylelint-disable-line scss/dollar-variable-pattern */
4924
- /* stylelint-disable-line scss/dollar-variable-pattern */
4925
- /* stylelint-disable-line scss/dollar-variable-pattern */
4926
- /* stylelint-disable-line scss/dollar-variable-pattern */
4927
4514
  .adyen-task-list-group {
4928
- color: #00112c;
4929
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4930
- font-size: 15px;
4515
+ color: var(--adyen-sdk-color-label-primary, #00112c);
4516
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
4517
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4518
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
4519
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4931
4520
  -webkit-font-smoothing: antialiased;
4932
4521
  -moz-osx-font-smoothing: grayscale;
4933
- font-weight: 400;
4934
- line-height: 1.4;
4935
4522
  align-items: flex-start;
4936
4523
  background: #fff;
4937
4524
  }
@@ -4947,7 +4534,7 @@ button[disabled]:hover {
4947
4534
  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-070, 16px);
4948
4535
  }
4949
4536
  .adyen-task-list-group__header .adyen-kyc-heading {
4950
- font-weight: 500;
4537
+ font-weight: var(--adyen-sdk-text-title-font-weight, 600);
4951
4538
  }
4952
4539
  .adyen-task-list-group > .adyen-kyc-card__body {
4953
4540
  padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px);
@@ -4956,8 +4543,6 @@ button[disabled]:hover {
4956
4543
  margin-top: var(--adyen-sdk-spacer-070, 16px);
4957
4544
  }/* #region Colors */
4958
4545
  /* #endregion */
4959
- /* #region Fonts */
4960
- /* #endregion */
4961
4546
  /* #region Borders */
4962
4547
  /* #endregion */
4963
4548
  /* #region Box-shadow */
@@ -4974,18 +4559,14 @@ button[disabled]:hover {
4974
4559
  /* #endregion */
4975
4560
  /* #region Inline components */
4976
4561
  /* #endregion */
4977
- /* stylelint-disable-line scss/dollar-variable-pattern */
4978
- /* stylelint-disable-line scss/dollar-variable-pattern */
4979
- /* stylelint-disable-line scss/dollar-variable-pattern */
4980
- /* stylelint-disable-line scss/dollar-variable-pattern */
4981
4562
  .adyen-kyc-trust-members {
4982
- color: #00112c;
4983
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4984
- font-size: 15px;
4563
+ color: var(--adyen-sdk-color-label-primary, #00112c);
4564
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
4565
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4566
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
4567
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4985
4568
  -webkit-font-smoothing: antialiased;
4986
4569
  -moz-osx-font-smoothing: grayscale;
4987
- font-weight: 400;
4988
- line-height: 1.4;
4989
4570
  }
4990
4571
  .adyen-kyc-trust-members *,
4991
4572
  .adyen-kyc-trust-members *::before,
@@ -5003,15 +4584,15 @@ button[disabled]:hover {
5003
4584
  width: fit-content;
5004
4585
  }
5005
4586
  .adyen-kyc-trust-members__add {
5006
- color: #06f;
4587
+ color: var(--adyen-sdk-color-label-highlight, #0070f5);
5007
4588
  width: 100%;
5008
4589
  }
5009
4590
  .adyen-kyc-trust-members__add .adyen-kyc-icon {
5010
- font-size: 12px;
4591
+ font-size: var(--adyen-sdk-text-caption-font-size, 12px);
5011
4592
  }
5012
4593
  .adyen-kyc-trust-members__add--more.adyen-kyc-button.adyen-kyc-button--secondary {
5013
4594
  background-color: transparent;
5014
- border: 1px solid #dce0e5;
4595
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
5015
4596
  border-top: 0;
5016
4597
  border-top-left-radius: 0;
5017
4598
  border-top-right-radius: 0;
@@ -5024,8 +4605,6 @@ button[disabled]:hover {
5024
4605
  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
5025
4606
  }/* #region Colors */
5026
4607
  /* #endregion */
5027
- /* #region Fonts */
5028
- /* #endregion */
5029
4608
  /* #region Borders */
5030
4609
  /* #endregion */
5031
4610
  /* #region Box-shadow */
@@ -5043,12 +4622,10 @@ button[disabled]:hover {
5043
4622
  /* #region Inline components */
5044
4623
  /* #endregion */
5045
4624
  .adyen-contract-viewer .adyen-document-viewer {
5046
- --adv-text-font-family: fakt, -apple-system, blinkmacsystemfont, Segoe UI, roboto, oxygen, ubuntu, cantarell, Open Sans, Helvetica Neue, sans-serif;
4625
+ --adv-text-font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
5047
4626
  --adv-background-color: #fff;
5048
4627
  }/* #region Colors */
5049
4628
  /* #endregion */
5050
- /* #region Fonts */
5051
- /* #endregion */
5052
4629
  /* #region Borders */
5053
4630
  /* #endregion */
5054
4631
  /* #region Box-shadow */
@@ -5072,10 +4649,27 @@ button[disabled]:hover {
5072
4649
  }
5073
4650
  .adyen-kyc-signer-card__name {
5074
4651
  flex-grow: 1;
4652
+ }.adyen-kyc__high-exposure-company .adyen-kyc-typography--title-l,
4653
+ .adyen-kyc__high-exposure-company .adyen-kyc-typography--body {
4654
+ margin-bottom: var(--adyen-sdk-spacer-070, 16px);
4655
+ }
4656
+ .adyen-kyc__high-exposure-company .adyen-kyc-typography--title {
4657
+ margin-bottom: var(--adyen-sdk-spacer-090, 24px);
4658
+ margin-top: var(--adyen-sdk-spacer-110, 40px);
4659
+ }
4660
+
4661
+ .adyen-kyc-field--highExposureBusinessInformation .adyen-kyc-radio-group {
4662
+ display: grid;
4663
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
4664
+ column-gap: var(--adyen-sdk-spacer-100, 32px);
4665
+ }
4666
+
4667
+ .adyen-kyc-link.adyen-kyc__high-exposure-link {
4668
+ text-decoration: underline;
4669
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4670
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
5075
4671
  }/* #region Colors */
5076
4672
  /* #endregion */
5077
- /* #region Fonts */
5078
- /* #endregion */
5079
4673
  /* #region Borders */
5080
4674
  /* #endregion */
5081
4675
  /* #region Box-shadow */
@@ -5092,18 +4686,14 @@ button[disabled]:hover {
5092
4686
  /* #endregion */
5093
4687
  /* #region Inline components */
5094
4688
  /* #endregion */
5095
- /* stylelint-disable-line scss/dollar-variable-pattern */
5096
- /* stylelint-disable-line scss/dollar-variable-pattern */
5097
- /* stylelint-disable-line scss/dollar-variable-pattern */
5098
- /* stylelint-disable-line scss/dollar-variable-pattern */
5099
4689
  .adyen-view-verification-status {
5100
- color: #00112c;
5101
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
5102
- font-size: 15px;
4690
+ color: var(--adyen-sdk-color-label-primary, #00112c);
4691
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
4692
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4693
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
4694
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
5103
4695
  -webkit-font-smoothing: antialiased;
5104
4696
  -moz-osx-font-smoothing: grayscale;
5105
- font-weight: 400;
5106
- line-height: 1.4;
5107
4697
  display: block;
5108
4698
  overflow: hidden;
5109
4699
  position: relative;
@@ -5114,17 +4704,23 @@ button[disabled]:hover {
5114
4704
  box-sizing: border-box;
5115
4705
  }
5116
4706
  .adyen-view-verification-status__description {
5117
- color: #394962;
5118
- font-size: 15px;
5119
- line-height: 1.4;
4707
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
4708
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4709
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
5120
4710
  margin: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-060, 12px) var(--adyen-sdk-spacer-000, 0px);
5121
4711
  }
5122
4712
  .adyen-view-verification-status__button {
5123
- font-size: 15px;
5124
- line-height: 1.4;
5125
- }/* #region Colors */
5126
- /* #endregion */
5127
- /* #region Fonts */
4713
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
4714
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
4715
+ }.adyen-kyc-u-color-grey-40 {
4716
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
4717
+ }
4718
+
4719
+ .adyen-kyc-u-color-grey-60 {
4720
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
4721
+ }
4722
+
4723
+ /* #region Colors */
5128
4724
  /* #endregion */
5129
4725
  /* #region Borders */
5130
4726
  /* #endregion */
@@ -5142,22 +4738,10 @@ button[disabled]:hover {
5142
4738
  /* #endregion */
5143
4739
  /* #region Inline components */
5144
4740
  /* #endregion */
5145
- .adyen-kyc-u-color-grey-40 {
5146
- color: #8390a3;
5147
- }
5148
-
5149
- .adyen-kyc-u-color-grey-60 {
5150
- color: #394962;
5151
- }
5152
-
5153
4741
  .adyen-kyc-u-font-weight-semi-bold {
5154
4742
  font-weight: 600 !important;
5155
4743
  }
5156
4744
 
5157
- /* stylelint-disable-line scss/dollar-variable-pattern */
5158
- /* stylelint-disable-line scss/dollar-variable-pattern */
5159
- /* stylelint-disable-line scss/dollar-variable-pattern */
5160
- /* stylelint-disable-line scss/dollar-variable-pattern */
5161
4745
  .adyen-kyc-u-display-none {
5162
4746
  display: none;
5163
4747
  }
@@ -6238,8 +5822,6 @@ button[disabled]:hover {
6238
5822
  box-sizing: border-box !important;
6239
5823
  }/* #region Colors */
6240
5824
  /* #endregion */
6241
- /* #region Fonts */
6242
- /* #endregion */
6243
5825
  /* #region Borders */
6244
5826
  /* #endregion */
6245
5827
  /* #region Box-shadow */
@@ -6256,25 +5838,24 @@ button[disabled]:hover {
6256
5838
  /* #endregion */
6257
5839
  /* #region Inline components */
6258
5840
  /* #endregion */
6259
- /* stylelint-disable-line scss/dollar-variable-pattern */
6260
- /* stylelint-disable-line scss/dollar-variable-pattern */
6261
- /* stylelint-disable-line scss/dollar-variable-pattern */
6262
- /* stylelint-disable-line scss/dollar-variable-pattern */
6263
5841
  .adyen-kyc-toast {
6264
- color: #00112c;
6265
- font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
6266
- font-size: 15px;
5842
+ color: var(--adyen-sdk-color-label-primary, #00112c);
5843
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
5844
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
5845
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
5846
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
6267
5847
  -webkit-font-smoothing: antialiased;
6268
5848
  -moz-osx-font-smoothing: grayscale;
6269
- font-weight: 400;
6270
- line-height: 1.4;
6271
- background: #00112c;
6272
- border-radius: 6px;
6273
- color: #fff;
5849
+ background-color: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
5850
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-highlight-strong, #0070f5);
5851
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
5852
+ color: var(--adyen-sdk-color-label-primary, #00112c);
6274
5853
  display: flex;
6275
- font-size: 15px;
5854
+ align-items: right;
5855
+ gap: var(--adyen-sdk-spacer-060, 12px);
5856
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
6276
5857
  height: auto;
6277
- line-height: 1.4;
5858
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
6278
5859
  opacity: 0;
6279
5860
  overflow: hidden;
6280
5861
  padding: var(--adyen-sdk-spacer-050, 10px);
@@ -6291,28 +5872,46 @@ button[disabled]:hover {
6291
5872
  .adyen-kyc-toast *::after {
6292
5873
  box-sizing: border-box;
6293
5874
  }
6294
- .adyen-kyc-toast--collapsed {
6295
- background-color: #8390a3;
6296
- }
6297
5875
  .adyen-kyc-toast--visible {
6298
5876
  opacity: 1;
6299
5877
  transform: translateY(0);
6300
5878
  visibility: visible;
6301
5879
  }
6302
5880
 
5881
+ .adyen-kyc-loading {
5882
+ border: var(--adyen-sdk-border-width-s, 1px) solid;
5883
+ }
5884
+
5885
+ .adyen-kyc-toast__success {
5886
+ background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
5887
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-success-strong, #07893c);
5888
+ }
5889
+
5890
+ .adyen-kyc-toast__error {
5891
+ background-color: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
5892
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-critical-strong, #e22d2d);
5893
+ }
5894
+
6303
5895
  .adyen-kyc-toast__message {
6304
5896
  flex: 1;
6305
5897
  }
6306
5898
 
5899
+ .adyen-kyc-toast__actions {
5900
+ display: flex;
5901
+ flex-direction: column;
5902
+ justify-content: space-evenly;
5903
+ align-items: end;
5904
+ }
5905
+
6307
5906
  .adyen-kyc-toast__title {
6308
5907
  display: block;
6309
- font-weight: 600;
5908
+ font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
6310
5909
  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px);
6311
- padding-left: var(--adyen-sdk-spacer-050, 10px);
6312
5910
  }
6313
5911
 
6314
- .adyen-kyc-toast__subtitle {
6315
- color: #a5afbd;
5912
+ .adyen-kyc-toast__subtitle,
5913
+ .adyen-kyc-toast__action {
5914
+ color: var(--adyen-sdk-color-label-primary, #00112c);
6316
5915
  display: block;
6317
5916
  margin: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
6318
5917
  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-050, 10px) var(--adyen-sdk-spacer-020, 4px);
@@ -6321,48 +5920,21 @@ button[disabled]:hover {
6321
5920
  .adyen-kyc-toast__close {
6322
5921
  background: none;
6323
5922
  border: none;
6324
- color: #8390a3;
5923
+ color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
6325
5924
  cursor: pointer;
6326
5925
  display: inline-flex;
6327
- font-size: 15px;
5926
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
6328
5927
  height: 16px;
6329
5928
  margin: var(--adyen-sdk-spacer-030, 6px);
6330
5929
  padding: var(--adyen-sdk-spacer-000, 0px);
6331
5930
  }
6332
5931
 
6333
- .adyen-kyc-toast__status {
6334
- border-radius: 50%;
6335
- color: #00112c;
6336
- font-size: 15px;
6337
- height: 18px;
6338
- width: 18px;
6339
- margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-050, 10px);
6340
- vertical-align: top;
6341
- }
6342
- .adyen-kyc-toast__status--success {
6343
- background-color: #60d58f;
6344
- }
6345
- .adyen-kyc-toast__status--error {
6346
- background-color: #ee5959;
6347
- }
6348
-
6349
- .adyen-kyc-toast__status-icon {
6350
- margin: var(--adyen-sdk-spacer-010, 2px);
6351
- }
6352
-
6353
5932
  .adyen-kyc-toast__action {
6354
- color: #a5afbd;
6355
- display: block;
6356
- margin: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
6357
- padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-050, 10px) var(--adyen-sdk-spacer-020, 4px);
6358
- font-size: 15px;
6359
- font-weight: 600;
6360
- line-height: 1.4;
5933
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
5934
+ font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
5935
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
6361
5936
  text-decoration: underline;
6362
5937
  }
6363
- .adyen-kyc-toast__action:visited {
6364
- color: #a5afbd;
6365
- }
6366
5938
 
6367
5939
  .adyen-kyc-toast__loader {
6368
5940
  display: inline-block;