@scania/tegel-lite 0.0.1-beta.1 → 0.0.1-beta.3

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 (15) hide show
  1. package/dist/components.css +9452 -0
  2. package/dist/global.css +17 -22
  3. package/dist/tl-button.css +19 -0
  4. package/dist/tl-dropdown.css +4 -0
  5. package/dist/tl-folder-tabs.css +139 -0
  6. package/dist/tl-header.css +105 -0
  7. package/dist/tl-inline-tabs.css +158 -0
  8. package/dist/tl-navigation-tabs.css +168 -0
  9. package/dist/tl-slider.css +1019 -1494
  10. package/dist/tl-text-field.css +3 -11
  11. package/dist/tl-tooltip.css +4 -4
  12. package/dist/traton-variables.css +2 -2
  13. package/package.json +6 -3
  14. package/dist/tl-radiobutton.css +0 -165
  15. package/dist/tl-textarea-mixins.css +0 -0
package/dist/tl-slider.css CHANGED
@@ -23,1960 +23,1485 @@
23
23
  --slider-border-radius: 4px;
24
24
  }
25
25
 
26
- .tl-text-field {
27
- --text-field-background: var(--color-background-layer-01);
28
- --text-field-text: var(--color-foreground-text-strong);
29
- --text-field-placeholder: var(--color-foreground-text-subtle);
30
- --text-field-affix: var(--color-foreground-text-defined);
31
- --text-field-label: var(--color-foreground-text-strong);
32
- --text-field-label-inside: var(--color-foreground-text-strong);
33
- --text-field-label-inside-left: 16px;
34
- --text-field-affix-width-icon: 35px;
35
- --text-field-affix-width-text: 8px;
36
- --text-field-border-bottom-readonly: var(--color-foreground-border-strong);
37
- --text-field-helper: var(--color-foreground-text-defined);
38
- --text-field-error: var(--color-system-danger-default);
39
- --text-field-affix-error: var(--color-foreground-text-defined);
40
- --text-field-background-disabled: var(--color-background-layer-01);
41
- --text-field-text-disabled: var(--color-foreground-text-disabled);
42
- --text-field-placeholder-disabled: var(--color-foreground-text-disabled);
43
- --text-field-label-disabled: var(--color-foreground-text-disabled);
44
- --text-field-affix-disabled: var(--color-foreground-text-disabled);
45
- --text-field-textcounter: var(--color-foreground-text-defined);
46
- }
47
- .tl-text-field--primary {
48
- --text-field-background: var(--color-background-layer-01);
49
- --text-field-background-disabled: var(--color-background-layer-01);
50
- }
51
- .tl-text-field--secondary {
52
- --text-field-background: var(--color-background-layer-02);
53
- --text-field-background-disabled: var(--color-background-layer-02);
54
- }
55
-
56
- .tl-text-field,
57
- .scania .tl-text-field {
58
- --text-field-border-radius: 4px 4px 0 0;
59
- --text-field-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
60
- --text-field-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
61
- --text-field-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
62
- --text-field-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
63
- --text-field-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
64
- --text-field-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
65
- --text-field-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
66
- --text-field-bar-focus: var(--color-foreground-border-accent-focus);
67
- --text-field-bar-error: var(--color-system-danger-default);
68
- --text-field-focus-outline: none;
69
- --text-field-focus-outline-error: none;
70
- --text-field-focus-outline-offset: 0;
71
- }
72
-
73
- .traton .tl-text-field {
74
- --text-field-border-radius: 4px 4px 4px 4px;
75
- --text-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
76
- --text-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
77
- --text-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
78
- --text-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
79
- --text-field-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
80
- --text-field-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
81
- --text-field-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
82
- --text-field-focus-outline: 2px solid var(--color-foreground-border-accent-focus);
83
- --text-field-focus-outline-error: 2px solid var(--color-system-danger-default);
84
- --text-field-focus-outline-offset: 0;
85
- --text-field-bar-focus: transparent;
86
- --text-field-bar-error: transparent;
87
- }
88
-
89
26
  /**
90
27
  * Do not edit directly, this file was auto-generated.
91
28
  */
92
- .tl-icon {
93
- display: inline-block;
94
- width: 20px;
95
- height: 20px;
96
- mask-repeat: no-repeat;
97
- mask-position: center;
98
- mask-size: contain;
99
- flex-shrink: 0;
100
- color: inherit;
101
- mask-image: none;
102
- }
103
- .tl-icon--24v_battery {
104
- mask-image: var(--icon-24v_battery-svg);
105
- background-color: currentcolor;
106
- }
107
- .tl-icon--24v_battery_inactive {
108
- mask-image: var(--icon-24v_battery_inactive-svg);
109
- background-color: currentcolor;
110
- }
111
- .tl-icon--acceleration {
112
- mask-image: var(--icon-acceleration-svg);
113
- background-color: currentcolor;
114
- }
115
- .tl-icon--acceleration_inactive {
116
- mask-image: var(--icon-acceleration_inactive-svg);
117
- background-color: currentcolor;
118
- }
119
- .tl-icon--adblue {
120
- mask-image: var(--icon-adblue-svg);
121
- background-color: currentcolor;
122
- }
123
- .tl-icon--adblue_inactive {
124
- mask-image: var(--icon-adblue_inactive-svg);
125
- background-color: currentcolor;
126
- }
127
- .tl-icon--arrow_diagonal {
128
- mask-image: var(--icon-arrow_diagonal-svg);
129
- background-color: currentcolor;
130
- }
131
- .tl-icon--arrow_down {
132
- mask-image: var(--icon-arrow_down-svg);
133
- background-color: currentcolor;
134
- }
135
- .tl-icon--arrow_left {
136
- mask-image: var(--icon-arrow_left-svg);
137
- background-color: currentcolor;
138
- }
139
- .tl-icon--arrow_right {
140
- mask-image: var(--icon-arrow_right-svg);
141
- background-color: currentcolor;
142
- }
143
- .tl-icon--arrow_up {
144
- mask-image: var(--icon-arrow_up-svg);
145
- background-color: currentcolor;
146
- }
147
- .tl-icon--audio {
148
- mask-image: var(--icon-audio-svg);
149
- background-color: currentcolor;
150
- }
151
- .tl-icon--audio_inactive {
152
- mask-image: var(--icon-audio_inactive-svg);
153
- background-color: currentcolor;
154
- }
155
- .tl-icon--award {
156
- mask-image: var(--icon-award-svg);
157
- background-color: currentcolor;
158
- }
159
- .tl-icon--back {
160
- mask-image: var(--icon-back-svg);
161
- background-color: currentcolor;
162
- }
163
- .tl-icon--backward {
164
- mask-image: var(--icon-backward-svg);
165
- background-color: currentcolor;
166
- }
167
- .tl-icon--backward_inactive {
168
- mask-image: var(--icon-backward_inactive-svg);
169
- background-color: currentcolor;
170
- }
171
- .tl-icon--bento {
172
- mask-image: var(--icon-bento-svg);
173
- background-color: currentcolor;
174
- }
175
- .tl-icon--bug {
176
- mask-image: var(--icon-bug-svg);
177
- background-color: currentcolor;
178
- }
179
- .tl-icon--bug_inactive {
180
- mask-image: var(--icon-bug_inactive-svg);
181
- background-color: currentcolor;
182
- }
183
- .tl-icon--burger {
184
- mask-image: var(--icon-burger-svg);
185
- background-color: currentcolor;
186
- }
187
- .tl-icon--bus {
188
- mask-image: var(--icon-bus-svg);
189
- background-color: currentcolor;
190
- }
191
- .tl-icon--bus_inactive {
192
- mask-image: var(--icon-bus_inactive-svg);
193
- background-color: currentcolor;
194
- }
195
- .tl-icon--cab_door {
196
- mask-image: var(--icon-cab_door-svg);
197
- background-color: currentcolor;
198
- }
199
- .tl-icon--calendar {
200
- mask-image: var(--icon-calendar-svg);
201
- background-color: currentcolor;
202
- }
203
- .tl-icon--calendar_inactive {
204
- mask-image: var(--icon-calendar_inactive-svg);
205
- background-color: currentcolor;
206
- }
207
- .tl-icon--camera {
208
- mask-image: var(--icon-camera-svg);
209
- background-color: currentcolor;
210
- }
211
- .tl-icon--camera_inactive {
212
- mask-image: var(--icon-camera_inactive-svg);
213
- background-color: currentcolor;
214
- }
215
- .tl-icon--card {
216
- mask-image: var(--icon-card-svg);
217
- background-color: currentcolor;
218
- }
219
- .tl-icon--cart {
220
- mask-image: var(--icon-cart-svg);
221
- background-color: currentcolor;
222
- }
223
- .tl-icon--charging_complete {
224
- mask-image: var(--icon-charging_complete-svg);
225
- background-color: currentcolor;
226
- }
227
- .tl-icon--charging_failed {
228
- mask-image: var(--icon-charging_failed-svg);
229
- background-color: currentcolor;
230
- }
231
- .tl-icon--charging_speed {
232
- mask-image: var(--icon-charging_speed-svg);
233
- background-color: currentcolor;
234
- }
235
- .tl-icon--charging_speed_inactive {
236
- mask-image: var(--icon-charging_speed_inactive-svg);
237
- background-color: currentcolor;
238
- }
239
- .tl-icon--charging_stopped {
240
- mask-image: var(--icon-charging_stopped-svg);
241
- background-color: currentcolor;
242
- }
243
- .tl-icon--chevron_down {
244
- mask-image: var(--icon-chevron_down-svg);
245
- background-color: currentcolor;
246
- }
247
- .tl-icon--chevron_left {
248
- mask-image: var(--icon-chevron_left-svg);
249
- background-color: currentcolor;
29
+ .tl-button,
30
+ tds-button,
31
+ .tds-mode-light tds-button {
32
+ --component-button-primary-text: var(--color-brand-neutral-white);
250
33
  }
251
- .tl-icon--chevron_right {
252
- mask-image: var(--icon-chevron_right-svg);
253
- background-color: currentcolor;
254
- }
255
- .tl-icon--chevron_up {
256
- mask-image: var(--icon-chevron_up-svg);
257
- background-color: currentcolor;
258
- }
259
- .tl-icon--clock {
260
- mask-image: var(--icon-clock-svg);
261
- background-color: currentcolor;
262
- }
263
- .tl-icon--clock_inactive {
264
- mask-image: var(--icon-clock_inactive-svg);
265
- background-color: currentcolor;
266
- }
267
- .tl-icon--configurator {
268
- mask-image: var(--icon-configurator-svg);
269
- background-color: currentcolor;
270
- }
271
- .tl-icon--contact {
272
- mask-image: var(--icon-contact-svg);
273
- background-color: currentcolor;
274
- }
275
- .tl-icon--contact_inactive {
276
- mask-image: var(--icon-contact_inactive-svg);
277
- background-color: currentcolor;
278
- }
279
- .tl-icon--cookie {
280
- mask-image: var(--icon-cookie-svg);
281
- background-color: currentcolor;
282
- }
283
- .tl-icon--cookie_inactive {
284
- mask-image: var(--icon-cookie_inactive-svg);
285
- background-color: currentcolor;
286
- }
287
- .tl-icon--coolant_level {
288
- mask-image: var(--icon-coolant_level-svg);
289
- background-color: currentcolor;
290
- }
291
- .tl-icon--coolant_level_inactive {
292
- mask-image: var(--icon-coolant_level_inactive-svg);
293
- background-color: currentcolor;
294
- }
295
- .tl-icon--copy {
296
- mask-image: var(--icon-copy-svg);
297
- background-color: currentcolor;
298
- }
299
- .tl-icon--cross {
300
- mask-image: var(--icon-cross-svg);
301
- background-color: currentcolor;
302
- }
303
- .tl-icon--cup {
304
- mask-image: var(--icon-cup-svg);
305
- background-color: currentcolor;
306
- }
307
- .tl-icon--cup_inactive {
308
- mask-image: var(--icon-cup_inactive-svg);
309
- background-color: currentcolor;
310
- }
311
- .tl-icon--dashboard {
312
- mask-image: var(--icon-dashboard-svg);
313
- background-color: currentcolor;
314
- }
315
- .tl-icon--department {
316
- mask-image: var(--icon-department-svg);
317
- background-color: currentcolor;
318
- }
319
- .tl-icon--department_inactive {
320
- mask-image: var(--icon-department_inactive-svg);
321
- background-color: currentcolor;
322
- }
323
- .tl-icon--departure_scheduling {
324
- mask-image: var(--icon-departure_scheduling-svg);
325
- background-color: currentcolor;
326
- }
327
- .tl-icon--departure_scheduling_inactive {
328
- mask-image: var(--icon-departure_scheduling_inactive-svg);
329
- background-color: currentcolor;
330
- }
331
- .tl-icon--diamond {
332
- mask-image: var(--icon-diamond-svg);
333
- background-color: currentcolor;
334
- }
335
- .tl-icon--diamond_inactive {
336
- mask-image: var(--icon-diamond_inactive-svg);
337
- background-color: currentcolor;
338
- }
339
- .tl-icon--document {
340
- mask-image: var(--icon-document-svg);
341
- background-color: currentcolor;
342
- }
343
- .tl-icon--document_check {
344
- mask-image: var(--icon-document_check-svg);
345
- background-color: currentcolor;
346
- }
347
- .tl-icon--document_doc {
348
- mask-image: var(--icon-document_doc-svg);
349
- background-color: currentcolor;
350
- }
351
- .tl-icon--document_eye {
352
- mask-image: var(--icon-document_eye-svg);
353
- background-color: currentcolor;
354
- }
355
- .tl-icon--document_pdf {
356
- mask-image: var(--icon-document_pdf-svg);
357
- background-color: currentcolor;
358
- }
359
- .tl-icon--document_plus {
360
- mask-image: var(--icon-document_plus-svg);
361
- background-color: currentcolor;
362
- }
363
- .tl-icon--document_plus_inactive {
364
- mask-image: var(--icon-document_plus_inactive-svg);
365
- background-color: currentcolor;
366
- }
367
- .tl-icon--document_ppt {
368
- mask-image: var(--icon-document_ppt-svg);
369
- background-color: currentcolor;
370
- }
371
- .tl-icon--document_tool {
372
- mask-image: var(--icon-document_tool-svg);
373
- background-color: currentcolor;
374
- }
375
- .tl-icon--document_wrong {
376
- mask-image: var(--icon-document_wrong-svg);
377
- background-color: currentcolor;
378
- }
379
- .tl-icon--document_xls {
380
- mask-image: var(--icon-document_xls-svg);
381
- background-color: currentcolor;
382
- }
383
- .tl-icon--dollar {
384
- mask-image: var(--icon-dollar-svg);
385
- background-color: currentcolor;
386
- }
387
- .tl-icon--doner {
388
- mask-image: var(--icon-doner-svg);
389
- background-color: currentcolor;
390
- }
391
- .tl-icon--double_kebab {
392
- mask-image: var(--icon-double_kebab-svg);
393
- background-color: currentcolor;
394
- }
395
- .tl-icon--download {
396
- mask-image: var(--icon-download-svg);
397
- background-color: currentcolor;
398
- }
399
- .tl-icon--driving_licence {
400
- mask-image: var(--icon-driving_licence-svg);
401
- background-color: currentcolor;
402
- }
403
- .tl-icon--driving_licence_inactive {
404
- mask-image: var(--icon-driving_licence_inactive-svg);
405
- background-color: currentcolor;
406
- }
407
- .tl-icon--drop {
408
- mask-image: var(--icon-drop-svg);
409
- background-color: currentcolor;
410
- }
411
- .tl-icon--drop_inactive {
412
- mask-image: var(--icon-drop_inactive-svg);
413
- background-color: currentcolor;
414
- }
415
- .tl-icon--edit {
416
- mask-image: var(--icon-edit-svg);
417
- background-color: currentcolor;
418
- }
419
- .tl-icon--edit_inactive {
420
- mask-image: var(--icon-edit_inactive-svg);
421
- background-color: currentcolor;
422
- }
423
- .tl-icon--email {
424
- mask-image: var(--icon-email-svg);
425
- background-color: currentcolor;
34
+
35
+ .scania.tds-mode-dark tds-button,
36
+ .scania.tds-mode-dark .tl-button {
37
+ --component-button-primary-text: var(--color-brand-neutral-white);
426
38
  }
427
- .tl-icon--engine {
428
- mask-image: var(--icon-engine-svg);
429
- background-color: currentcolor;
39
+
40
+ .tds-mode-dark tds-button,
41
+ .tds-mode-dark .tl-button {
42
+ --component-button-primary-text: var(--color-brand-neutral-black);
430
43
  }
431
- .tl-icon--engine_inactive {
432
- mask-image: var(--icon-engine_inactive-svg);
433
- background-color: currentcolor;
44
+
45
+ .tl-button {
46
+ --button-transparent: transparent;
47
+ --button-white: var(--color-brand-neutral-white);
48
+ --button-black: var(--color-brand-neutral-black);
49
+ --button-radius: var(--dimension-radius-for-surface-clickable);
50
+ --button-sm-only-icon-padding: 11px;
51
+ --button-md-only-icon-padding: 13px;
52
+ --button-lg-only-icon-padding: 17px;
53
+ --button-primary-background: var(--color-background-accent-primary-default);
54
+ --button-primary-background-hover: var(--color-background-accent-primary-hover);
55
+ --button-primary-background-active: var(--color-background-accent-primary-pressed);
56
+ --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
57
+ --button-primary-color: var(--component-button-primary-text);
58
+ --button-primary-color-disabled: var(--color-foreground-text-disabled);
59
+ --button-primary-border-color: var(--button-transparent);
60
+ --button-primary-border-color-disabled: var(--button-transparent);
61
+ --button-primary-background-focus: var(--color-background-accent-primary-focus);
62
+ --button-primary-color-focus: var(--component-button-primary-text);
63
+ --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
64
+ --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
65
+ --button-secondary-background: var(--button-transparent);
66
+ --button-secondary-color: var(--color-foreground-text-strong);
67
+ --button-secondary-border-color: var(--color-foreground-border-soft);
68
+ --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
69
+ --button-secondary-border-color-active: var(--color-foreground-border-strong);
70
+ --button-secondary-background-disabled: var(--button-transparent);
71
+ --button-secondary-color-disabled: var(--color-foreground-text-disabled);
72
+ --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
73
+ --button-secondary-background-focus: var(--button-transparent);
74
+ --button-secondary-color-focus: var(--color-foreground-text-strong);
75
+ --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
76
+ --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
77
+ --button-ghost-background: var(--button-transparent);
78
+ --button-ghost-color: var(--color-foreground-text-strong);
79
+ --button-ghost-border-color: var(--button-transparent);
80
+ --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
81
+ --button-ghost-border-color-active: var(--color-foreground-border-strong);
82
+ --button-ghost-color-disabled: var(--color-foreground-text-disabled);
83
+ --button-ghost-border-color-disabled: var(--button-transparent);
84
+ --button-ghost-background-focus: var(--button-transparent);
85
+ --button-ghost-color-focus: var(--color-foreground-text-strong);
86
+ --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
87
+ --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
88
+ --button-danger-background: var(--color-background-accent-danger-default);
89
+ --button-danger-color: var(--button-white);
90
+ --button-danger-border-color: var(--button-transparent);
91
+ --button-danger-background-hover: var(--color-background-accent-danger-hover);
92
+ --button-danger-background-active: var(--color-background-accent-danger-pressed);
93
+ --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
94
+ --button-danger-color-disabled: var(--color-foreground-text-disabled);
95
+ --button-danger-border-color-disabled: var(--button-transparent);
96
+ --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
97
+ --button-danger-background-focus: var(--color-background-accent-danger-focus);
98
+ --button-danger-color-focus: var(--button-white);
99
+ --button-danger-border-color-focus: var(--button-transparent);
100
+ --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
434
101
  }
435
- .tl-icon--environment {
436
- mask-image: var(--icon-environment-svg);
437
- background-color: currentcolor;
102
+ .tl-button .tl-button--primary {
103
+ --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
104
+ --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
438
105
  }
439
- .tl-icon--environment_inactive {
440
- mask-image: var(--icon-environment_inactive-svg);
441
- background-color: currentcolor;
106
+ .tl-button .tl-button--secondary {
107
+ --button-primary-background-disabled: var(--button-white);
108
+ --button-danger-background-disabled: var(--button-white);
442
109
  }
443
- .tl-icon--error {
444
- mask-image: var(--icon-error-svg);
445
- background-color: currentcolor;
110
+
111
+ .scania .tl-button {
112
+ --button-outline-width: 2px;
446
113
  }
447
- .tl-icon--exit {
448
- mask-image: var(--icon-exit-svg);
449
- background-color: currentcolor;
114
+
115
+ .traton .tl-button {
116
+ --button-outline-width: 4px;
450
117
  }
451
- .tl-icon--expand {
452
- mask-image: var(--icon-expand-svg);
453
- background-color: currentcolor;
118
+
119
+ /* Base button styles */
120
+ .tl-button {
121
+ box-sizing: border-box;
454
122
  }
455
- .tl-icon--expand_inactive {
456
- mask-image: var(--icon-expand_inactive-svg);
457
- background-color: currentcolor;
123
+ .tl-button * {
124
+ box-sizing: border-box;
458
125
  }
459
- .tl-icon--export {
460
- mask-image: var(--icon-export-svg);
461
- background-color: currentcolor;
126
+ .tl-button {
127
+ font-family: var(--detail-02-font-family);
128
+ font-size: var(--detail-02-font-size);
129
+ line-height: var(--detail-02-line-height);
130
+ font-weight: var(--detail-02-font-weight);
131
+ letter-spacing: var(--detail-02-letter-spacing);
132
+ text-transform: var(--detail-02-text-transform);
133
+ display: inline-flex;
134
+ align-items: center;
135
+ justify-content: center;
136
+ font-weight: 500;
137
+ border-radius: var(--button-radius);
138
+ border: 1px solid var(--button-secondary-border-color);
139
+ box-shadow: none;
140
+ position: relative;
141
+ text-decoration: none;
142
+ cursor: pointer;
462
143
  }
463
- .tl-icon--export_inactive {
464
- mask-image: var(--icon-export_inactive-svg);
465
- background-color: currentcolor;
144
+ .tl-button:focus-visible {
145
+ outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
146
+ outline-offset: calc(var(--button-outline-width) * -1);
466
147
  }
467
- .tl-icon--eye {
468
- mask-image: var(--icon-eye-svg);
469
- background-color: currentcolor;
148
+ .tl-button {
149
+ /* Variants */
470
150
  }
471
- .tl-icon--eye_inactive {
472
- mask-image: var(--icon-eye_inactive-svg);
473
- background-color: currentcolor;
151
+ .tl-button--primary {
152
+ background-color: var(--button-primary-background);
153
+ color: var(--button-primary-color);
154
+ border-color: var(--button-primary-border-color);
474
155
  }
475
- .tl-icon--face_dissatisfied {
476
- mask-image: var(--icon-face_dissatisfied-svg);
477
- background-color: currentcolor;
156
+ .tl-button--primary:hover:not(:disabled) {
157
+ background-color: var(--button-primary-background-hover);
478
158
  }
479
- .tl-icon--face_neutral {
480
- mask-image: var(--icon-face_neutral-svg);
481
- background-color: currentcolor;
159
+ .tl-button--primary:disabled {
160
+ background-color: var(--button-primary-background-disabled);
161
+ color: var(--button-primary-color-disabled);
162
+ border-color: var(--button-primary-border-color-disabled);
163
+ cursor: not-allowed;
164
+ opacity: 0.6;
482
165
  }
483
- .tl-icon--face_satisfied {
484
- mask-image: var(--icon-face_satisfied-svg);
485
- background-color: currentcolor;
166
+ .tl-button--primary:focus-visible:not(:disabled) {
167
+ background: var(--button-primary-background-focus);
168
+ border-color: var(--button-primary-border-color-focus);
169
+ color: var(--button-primary-color-focus);
170
+ outline-color: var(--button-primary-outline-color-focus);
486
171
  }
487
- .tl-icon--factory {
488
- mask-image: var(--icon-factory-svg);
489
- background-color: currentcolor;
172
+ .tl-button--primary:active:not(:disabled):focus-visible {
173
+ outline: none;
174
+ outline-offset: none;
490
175
  }
491
- .tl-icon--factory_inactive {
492
- mask-image: var(--icon-factory_inactive-svg);
493
- background-color: currentcolor;
176
+ .tl-button--primary:active:not(:disabled) {
177
+ background-color: var(--button-primary-background-active);
178
+ border-color: var(--button-primary-background-active);
494
179
  }
495
- .tl-icon--ferry {
496
- mask-image: var(--icon-ferry-svg);
497
- background-color: currentcolor;
180
+ .tl-button--secondary {
181
+ background-color: var(--button-secondary-background);
182
+ color: var(--button-secondary-color);
183
+ border-color: var(--button-secondary-border-color);
498
184
  }
499
- .tl-icon--ferry_inactive {
500
- mask-image: var(--icon-ferry_inactive-svg);
501
- background-color: currentcolor;
185
+ .tl-button--secondary:hover:not(:disabled) {
186
+ border-color: var(--button-secondary-border-color-hover);
502
187
  }
503
- .tl-icon--filters {
504
- mask-image: var(--icon-filters-svg);
505
- background-color: currentcolor;
188
+ .tl-button--secondary:disabled {
189
+ background-color: var(--button-secondary-background-disabled);
190
+ color: var(--button-secondary-color-disabled);
191
+ border-color: var(--button-secondary-border-color-disabled);
192
+ cursor: not-allowed;
193
+ opacity: 0.6;
506
194
  }
507
- .tl-icon--filters_inactive {
508
- mask-image: var(--icon-filters_inactive-svg);
509
- background-color: currentcolor;
195
+ .tl-button--secondary:focus-visible:not(:disabled) {
196
+ background: var(--button-secondary-background-focus);
197
+ border-color: var(--button-secondary-border-color-focus);
198
+ color: var(--button-secondary-color-focus);
199
+ outline-color: var(--button-secondary-outline-color-focus);
510
200
  }
511
- .tl-icon--flash {
512
- mask-image: var(--icon-flash-svg);
513
- background-color: currentcolor;
201
+ .tl-button--secondary:active:not(:disabled):focus-visible {
202
+ outline: none;
514
203
  }
515
- .tl-icon--flash_inactive {
516
- mask-image: var(--icon-flash_inactive-svg);
517
- background-color: currentcolor;
204
+ .tl-button--secondary:active:not(:disabled) {
205
+ border-color: var(--button-secondary-border-color-active);
518
206
  }
519
- .tl-icon--folder {
520
- mask-image: var(--icon-folder-svg);
521
- background-color: currentcolor;
207
+ .tl-button--ghost {
208
+ background-color: var(--button-ghost-background);
209
+ color: var(--button-ghost-color);
210
+ border-color: var(--button-ghost-border-color);
522
211
  }
523
- .tl-icon--forward {
524
- mask-image: var(--icon-forward-svg);
525
- background-color: currentcolor;
212
+ .tl-button--ghost:hover:not(:disabled) {
213
+ border-color: var(--button-ghost-border-color-hover);
526
214
  }
527
- .tl-icon--forward_inactive {
528
- mask-image: var(--icon-forward_inactive-svg);
529
- background-color: currentcolor;
215
+ .tl-button--ghost:disabled {
216
+ color: var(--button-ghost-color-disabled);
217
+ cursor: not-allowed;
218
+ opacity: 0.6;
530
219
  }
531
- .tl-icon--fuel {
532
- mask-image: var(--icon-fuel-svg);
533
- background-color: currentcolor;
220
+ .tl-button--ghost:focus-visible:not(:disabled) {
221
+ background: var(--button-ghost-background-focus);
222
+ border-color: var(--button-ghost-border-color-focus);
223
+ color: var(--button-ghost-color-focus);
224
+ outline-color: var(--button-ghost-outline-color-focus);
534
225
  }
535
- .tl-icon--fuel_gauge {
536
- mask-image: var(--icon-fuel_gauge-svg);
537
- background-color: currentcolor;
226
+ .tl-button--ghost:active:not(:disabled):focus-visible {
227
+ outline: none;
538
228
  }
539
- .tl-icon--fuel_gauge_inactive {
540
- mask-image: var(--icon-fuel_gauge_inactive-svg);
541
- background-color: currentcolor;
229
+ .tl-button--ghost:active:not(:disabled) {
230
+ border-color: var(--button-ghost-border-color-active);
542
231
  }
543
- .tl-icon--fuel_inactive {
544
- mask-image: var(--icon-fuel_inactive-svg);
545
- background-color: currentcolor;
232
+ .tl-button--danger {
233
+ background-color: var(--button-danger-background);
234
+ color: var(--button-danger-color);
235
+ border-color: var(--button-danger-border-color);
546
236
  }
547
- .tl-icon--gift {
548
- mask-image: var(--icon-gift-svg);
549
- background-color: currentcolor;
237
+ .tl-button--danger:hover:not(:disabled) {
238
+ background-color: var(--button-danger-background-hover);
550
239
  }
551
- .tl-icon--gift inactive {
552
- mask-image: var(--icon-gift inactive-svg);
553
- background-color: currentcolor;
240
+ .tl-button--danger:disabled {
241
+ background-color: var(--button-danger-background-disabled);
242
+ color: var(--button-danger-color-disabled);
243
+ border-color: var(--button-danger-border-color-disabled);
244
+ cursor: not-allowed;
245
+ opacity: 0.6;
554
246
  }
555
- .tl-icon--global {
556
- mask-image: var(--icon-global-svg);
557
- background-color: currentcolor;
247
+ .tl-button--danger:focus-visible:not(:disabled) {
248
+ background: var(--button-danger-background-focus);
249
+ border-color: var(--button-danger-border-color-focus);
250
+ color: var(--button-danger-color-focus);
251
+ outline-color: var(--button-danger-outline-color-focus);
558
252
  }
559
- .tl-icon--guided_tour {
560
- mask-image: var(--icon-guided_tour-svg);
561
- background-color: currentcolor;
253
+ .tl-button--danger:active:not(:disabled):focus-visible {
254
+ outline: none;
562
255
  }
563
- .tl-icon--guided_tour_inactive {
564
- mask-image: var(--icon-guided_tour_inactive-svg);
565
- background-color: currentcolor;
256
+ .tl-button--danger:active:not(:disabled) {
257
+ background-color: var(--button-danger-background-active);
258
+ border-color: var(--button-danger-border-color-active);
566
259
  }
567
- .tl-icon--hatch_open {
568
- mask-image: var(--icon-hatch_open-svg);
569
- background-color: currentcolor;
260
+ .tl-button {
261
+ /* Sizes */
570
262
  }
571
- .tl-icon--hatch_open_1 {
572
- mask-image: var(--icon-hatch_open_1-svg);
573
- background-color: currentcolor;
263
+ .tl-button--xs {
264
+ padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
265
+ height: 24px;
574
266
  }
575
- .tl-icon--hatch_open_2 {
576
- mask-image: var(--icon-hatch_open_2-svg);
577
- background-color: currentcolor;
267
+ .tl-button--sm {
268
+ padding: var(--tds-spacing-element-12);
269
+ height: 40px;
578
270
  }
579
- .tl-icon--hatch_open_inactive {
580
- mask-image: var(--icon-hatch_open_inactive-svg);
581
- background-color: currentcolor;
271
+ .tl-button--md {
272
+ padding: var(--tds-spacing-element-16);
273
+ height: 48px;
582
274
  }
583
- .tl-icon--heart {
584
- mask-image: var(--icon-heart-svg);
585
- background-color: currentcolor;
275
+ .tl-button--lg {
276
+ padding: var(--tds-spacing-element-20);
277
+ height: 56px;
586
278
  }
587
- .tl-icon--heart_inactive {
588
- mask-image: var(--icon-heart_inactive-svg);
589
- background-color: currentcolor;
279
+ .tl-button {
280
+ /* Icon specific styles */
590
281
  }
591
- .tl-icon--heating_inactive_screen {
592
- mask-image: var(--icon-heating_inactive_screen-svg);
593
- background-color: currentcolor;
282
+ .tl-button--icon.tl-button--sm {
283
+ padding: 10px var(--tds-spacing-element-12);
594
284
  }
595
- .tl-icon--history {
596
- mask-image: var(--icon-history-svg);
597
- background-color: currentcolor;
285
+ .tl-button--icon.tl-button--sm .tl-icon {
286
+ margin-left: var(--tds-spacing-element-12);
598
287
  }
599
- .tl-icon--history_inactive {
600
- mask-image: var(--icon-history_inactive-svg);
601
- background-color: currentcolor;
288
+ .tl-button--icon.tl-button--md {
289
+ padding: 14px var(--tds-spacing-element-16);
602
290
  }
603
- .tl-icon--home {
604
- mask-image: var(--icon-home-svg);
605
- background-color: currentcolor;
291
+ .tl-button--icon.tl-button--md .tl-icon {
292
+ margin-left: var(--tds-spacing-element-16);
606
293
  }
607
- .tl-icon--home_inactive {
608
- mask-image: var(--icon-home_inactive-svg);
609
- background-color: currentcolor;
294
+ .tl-button--icon.tl-button--lg {
295
+ padding: 18px var(--tds-spacing-element-20);
610
296
  }
611
- .tl-icon--idea {
612
- mask-image: var(--icon-idea-svg);
613
- background-color: currentcolor;
297
+ .tl-button--icon.tl-button--lg .tl-icon {
298
+ margin-left: var(--tds-spacing-element-20);
614
299
  }
615
- .tl-icon--idea_inactive {
616
- mask-image: var(--icon-idea_inactive-svg);
617
- background-color: currentcolor;
300
+ .tl-button {
301
+ /* Only icon specific styles */
618
302
  }
619
- .tl-icon--image {
620
- mask-image: var(--icon-image-svg);
621
- background-color: currentcolor;
303
+ .tl-button--only-icon.tl-button--sm {
304
+ padding: var(--button-sm-only-icon-padding);
622
305
  }
623
- .tl-icon--image_add {
624
- mask-image: var(--icon-image_add-svg);
625
- background-color: currentcolor;
306
+ .tl-button--only-icon.tl-button--sm .tl-icon {
307
+ margin-left: 0;
626
308
  }
627
- .tl-icon--image_inactive {
628
- mask-image: var(--icon-image_inactive-svg);
629
- background-color: currentcolor;
309
+ .tl-button--only-icon.tl-button--md {
310
+ padding: var(--button-md-only-icon-padding);
630
311
  }
631
- .tl-icon--image_set {
632
- mask-image: var(--icon-image_set-svg);
633
- background-color: currentcolor;
312
+ .tl-button--only-icon.tl-button--md .tl-icon {
313
+ margin-left: 0;
634
314
  }
635
- .tl-icon--info {
636
- mask-image: var(--icon-info-svg);
637
- background-color: currentcolor;
315
+ .tl-button--only-icon.tl-button--lg {
316
+ padding: var(--button-lg-only-icon-padding);
638
317
  }
639
- .tl-icon--insights {
640
- mask-image: var(--icon-insights-svg);
641
- background-color: currentcolor;
318
+ .tl-button--only-icon.tl-button--lg .tl-icon {
319
+ margin-left: 0;
642
320
  }
643
- .tl-icon--kebab {
644
- mask-image: var(--icon-kebab-svg);
645
- background-color: currentcolor;
321
+ .tl-button {
322
+ /* Full width */
646
323
  }
647
- .tl-icon--key {
648
- mask-image: var(--icon-key-svg);
649
- background-color: currentcolor;
324
+ .tl-button--full-width {
325
+ width: 100%;
650
326
  }
651
- .tl-icon--key_inactive {
652
- mask-image: var(--icon-key_inactive-svg);
327
+
328
+ /**
329
+ * Do not edit directly, this file was auto-generated.
330
+ */
331
+ .tl-icon {
332
+ display: inline-block;
333
+ width: 20px;
334
+ height: 20px;
335
+ mask-repeat: no-repeat;
336
+ mask-position: center;
337
+ mask-size: contain;
338
+ flex-shrink: 0;
339
+ color: inherit;
340
+ mask-image: none;
341
+ }
342
+ .tl-icon--24v_battery {
343
+ mask-image: var(--icon-24v_battery-svg);
653
344
  background-color: currentcolor;
654
345
  }
655
- .tl-icon--language {
656
- mask-image: var(--icon-language-svg);
346
+ .tl-icon--24v_battery_inactive {
347
+ mask-image: var(--icon-24v_battery_inactive-svg);
657
348
  background-color: currentcolor;
658
349
  }
659
- .tl-icon--layer {
660
- mask-image: var(--icon-layer-svg);
350
+ .tl-icon--acceleration {
351
+ mask-image: var(--icon-acceleration-svg);
661
352
  background-color: currentcolor;
662
353
  }
663
- .tl-icon--layer_inactive {
664
- mask-image: var(--icon-layer_inactive-svg);
354
+ .tl-icon--acceleration_inactive {
355
+ mask-image: var(--icon-acceleration_inactive-svg);
665
356
  background-color: currentcolor;
666
357
  }
667
- .tl-icon--link {
668
- mask-image: var(--icon-link-svg);
358
+ .tl-icon--adblue {
359
+ mask-image: var(--icon-adblue-svg);
669
360
  background-color: currentcolor;
670
361
  }
671
- .tl-icon--link_broken {
672
- mask-image: var(--icon-link_broken-svg);
362
+ .tl-icon--adblue_inactive {
363
+ mask-image: var(--icon-adblue_inactive-svg);
673
364
  background-color: currentcolor;
674
365
  }
675
- .tl-icon--list {
676
- mask-image: var(--icon-list-svg);
366
+ .tl-icon--arrow_diagonal {
367
+ mask-image: var(--icon-arrow_diagonal-svg);
677
368
  background-color: currentcolor;
678
369
  }
679
- .tl-icon--list_inactive {
680
- mask-image: var(--icon-list_inactive-svg);
370
+ .tl-icon--arrow_down {
371
+ mask-image: var(--icon-arrow_down-svg);
681
372
  background-color: currentcolor;
682
373
  }
683
- .tl-icon--lock {
684
- mask-image: var(--icon-lock-svg);
374
+ .tl-icon--arrow_left {
375
+ mask-image: var(--icon-arrow_left-svg);
685
376
  background-color: currentcolor;
686
377
  }
687
- .tl-icon--lock_inactive {
688
- mask-image: var(--icon-lock_inactive-svg);
378
+ .tl-icon--arrow_right {
379
+ mask-image: var(--icon-arrow_right-svg);
689
380
  background-color: currentcolor;
690
381
  }
691
- .tl-icon--map_cursor {
692
- mask-image: var(--icon-map_cursor-svg);
382
+ .tl-icon--arrow_up {
383
+ mask-image: var(--icon-arrow_up-svg);
693
384
  background-color: currentcolor;
694
385
  }
695
- .tl-icon--map_cursor_inactive {
696
- mask-image: var(--icon-map_cursor_inactive-svg);
386
+ .tl-icon--audio {
387
+ mask-image: var(--icon-audio-svg);
697
388
  background-color: currentcolor;
698
389
  }
699
- .tl-icon--maximize_fullscreen {
700
- mask-image: var(--icon-maximize_fullscreen-svg);
390
+ .tl-icon--audio_inactive {
391
+ mask-image: var(--icon-audio_inactive-svg);
701
392
  background-color: currentcolor;
702
393
  }
703
- .tl-icon--meatballs {
704
- mask-image: var(--icon-meatballs-svg);
394
+ .tl-icon--award {
395
+ mask-image: var(--icon-award-svg);
705
396
  background-color: currentcolor;
706
397
  }
707
- .tl-icon--merge {
708
- mask-image: var(--icon-merge-svg);
398
+ .tl-icon--back {
399
+ mask-image: var(--icon-back-svg);
709
400
  background-color: currentcolor;
710
401
  }
711
- .tl-icon--merge_inactive {
712
- mask-image: var(--icon-merge_inactive-svg);
402
+ .tl-icon--backward {
403
+ mask-image: var(--icon-backward-svg);
713
404
  background-color: currentcolor;
714
405
  }
715
- .tl-icon--message {
716
- mask-image: var(--icon-message-svg);
406
+ .tl-icon--backward_inactive {
407
+ mask-image: var(--icon-backward_inactive-svg);
717
408
  background-color: currentcolor;
718
409
  }
719
- .tl-icon--message_inactive {
720
- mask-image: var(--icon-message_inactive-svg);
410
+ .tl-icon--bento {
411
+ mask-image: var(--icon-bento-svg);
721
412
  background-color: currentcolor;
722
413
  }
723
- .tl-icon--mileage {
724
- mask-image: var(--icon-mileage-svg);
414
+ .tl-icon--bug {
415
+ mask-image: var(--icon-bug-svg);
725
416
  background-color: currentcolor;
726
417
  }
727
- .tl-icon--mileage_inactive {
728
- mask-image: var(--icon-mileage_inactive-svg);
418
+ .tl-icon--bug_inactive {
419
+ mask-image: var(--icon-bug_inactive-svg);
729
420
  background-color: currentcolor;
730
421
  }
731
- .tl-icon--minimize_fullscreen {
732
- mask-image: var(--icon-minimize_fullscreen-svg);
422
+ .tl-icon--burger {
423
+ mask-image: var(--icon-burger-svg);
733
424
  background-color: currentcolor;
734
425
  }
735
- .tl-icon--minus {
736
- mask-image: var(--icon-minus-svg);
426
+ .tl-icon--bus {
427
+ mask-image: var(--icon-bus-svg);
737
428
  background-color: currentcolor;
738
429
  }
739
- .tl-icon--navigate {
740
- mask-image: var(--icon-navigate-svg);
430
+ .tl-icon--bus_inactive {
431
+ mask-image: var(--icon-bus_inactive-svg);
741
432
  background-color: currentcolor;
742
433
  }
743
- .tl-icon--navigate_inactive {
744
- mask-image: var(--icon-navigate_inactive-svg);
434
+ .tl-icon--cab_door {
435
+ mask-image: var(--icon-cab_door-svg);
745
436
  background-color: currentcolor;
746
437
  }
747
- .tl-icon--notification {
748
- mask-image: var(--icon-notification-svg);
438
+ .tl-icon--calendar {
439
+ mask-image: var(--icon-calendar-svg);
749
440
  background-color: currentcolor;
750
441
  }
751
- .tl-icon--notification_inactive {
752
- mask-image: var(--icon-notification_inactive-svg);
442
+ .tl-icon--calendar_inactive {
443
+ mask-image: var(--icon-calendar_inactive-svg);
753
444
  background-color: currentcolor;
754
445
  }
755
- .tl-icon--oil_level {
756
- mask-image: var(--icon-oil_level-svg);
446
+ .tl-icon--camera {
447
+ mask-image: var(--icon-camera-svg);
757
448
  background-color: currentcolor;
758
449
  }
759
- .tl-icon--oil_level_inactive {
760
- mask-image: var(--icon-oil_level_inactive-svg);
450
+ .tl-icon--camera_inactive {
451
+ mask-image: var(--icon-camera_inactive-svg);
761
452
  background-color: currentcolor;
762
453
  }
763
- .tl-icon--pause {
764
- mask-image: var(--icon-pause-svg);
454
+ .tl-icon--card {
455
+ mask-image: var(--icon-card-svg);
765
456
  background-color: currentcolor;
766
457
  }
767
- .tl-icon--pause_inactive {
768
- mask-image: var(--icon-pause_inactive-svg);
458
+ .tl-icon--cart {
459
+ mask-image: var(--icon-cart-svg);
769
460
  background-color: currentcolor;
770
461
  }
771
- .tl-icon--phone {
772
- mask-image: var(--icon-phone-svg);
462
+ .tl-icon--charging_complete {
463
+ mask-image: var(--icon-charging_complete-svg);
773
464
  background-color: currentcolor;
774
465
  }
775
- .tl-icon--phone_inactive {
776
- mask-image: var(--icon-phone_inactive-svg);
466
+ .tl-icon--charging_failed {
467
+ mask-image: var(--icon-charging_failed-svg);
777
468
  background-color: currentcolor;
778
469
  }
779
- .tl-icon--pie_chart {
780
- mask-image: var(--icon-pie_chart-svg);
470
+ .tl-icon--charging_speed {
471
+ mask-image: var(--icon-charging_speed-svg);
781
472
  background-color: currentcolor;
782
473
  }
783
- .tl-icon--pin {
784
- mask-image: var(--icon-pin-svg);
474
+ .tl-icon--charging_speed_inactive {
475
+ mask-image: var(--icon-charging_speed_inactive-svg);
785
476
  background-color: currentcolor;
786
477
  }
787
- .tl-icon--pin_inactive {
788
- mask-image: var(--icon-pin_inactive-svg);
478
+ .tl-icon--charging_stopped {
479
+ mask-image: var(--icon-charging_stopped-svg);
789
480
  background-color: currentcolor;
790
481
  }
791
- .tl-icon--placeholder {
792
- mask-image: var(--icon-placeholder-svg);
482
+ .tl-icon--chevron_down {
483
+ mask-image: var(--icon-chevron_down-svg);
793
484
  background-color: currentcolor;
794
485
  }
795
- .tl-icon--play {
796
- mask-image: var(--icon-play-svg);
486
+ .tl-icon--chevron_left {
487
+ mask-image: var(--icon-chevron_left-svg);
797
488
  background-color: currentcolor;
798
489
  }
799
- .tl-icon--play_inactive {
800
- mask-image: var(--icon-play_inactive-svg);
490
+ .tl-icon--chevron_right {
491
+ mask-image: var(--icon-chevron_right-svg);
801
492
  background-color: currentcolor;
802
493
  }
803
- .tl-icon--plus {
804
- mask-image: var(--icon-plus-svg);
494
+ .tl-icon--chevron_up {
495
+ mask-image: var(--icon-chevron_up-svg);
805
496
  background-color: currentcolor;
806
497
  }
807
- .tl-icon--powerplug {
808
- mask-image: var(--icon-powerplug-svg);
498
+ .tl-icon--clock {
499
+ mask-image: var(--icon-clock-svg);
809
500
  background-color: currentcolor;
810
501
  }
811
- .tl-icon--powerplug_inactive {
812
- mask-image: var(--icon-powerplug_inactive-svg);
502
+ .tl-icon--clock_inactive {
503
+ mask-image: var(--icon-clock_inactive-svg);
813
504
  background-color: currentcolor;
814
505
  }
815
- .tl-icon--print {
816
- mask-image: var(--icon-print-svg);
506
+ .tl-icon--configurator {
507
+ mask-image: var(--icon-configurator-svg);
817
508
  background-color: currentcolor;
818
509
  }
819
- .tl-icon--print_inactive {
820
- mask-image: var(--icon-print_inactive-svg);
510
+ .tl-icon--contact {
511
+ mask-image: var(--icon-contact-svg);
821
512
  background-color: currentcolor;
822
513
  }
823
- .tl-icon--privacy {
824
- mask-image: var(--icon-privacy-svg);
514
+ .tl-icon--contact_inactive {
515
+ mask-image: var(--icon-contact_inactive-svg);
825
516
  background-color: currentcolor;
826
517
  }
827
- .tl-icon--privacy_inactive {
828
- mask-image: var(--icon-privacy_inactive-svg);
518
+ .tl-icon--cookie {
519
+ mask-image: var(--icon-cookie-svg);
829
520
  background-color: currentcolor;
830
521
  }
831
- .tl-icon--profile {
832
- mask-image: var(--icon-profile-svg);
522
+ .tl-icon--cookie_inactive {
523
+ mask-image: var(--icon-cookie_inactive-svg);
833
524
  background-color: currentcolor;
834
525
  }
835
- .tl-icon--profile_inactive {
836
- mask-image: var(--icon-profile_inactive-svg);
526
+ .tl-icon--coolant_level {
527
+ mask-image: var(--icon-coolant_level-svg);
837
528
  background-color: currentcolor;
838
529
  }
839
- .tl-icon--prohibited {
840
- mask-image: var(--icon-prohibited-svg);
530
+ .tl-icon--coolant_level_inactive {
531
+ mask-image: var(--icon-coolant_level_inactive-svg);
841
532
  background-color: currentcolor;
842
533
  }
843
- .tl-icon--proportions {
844
- mask-image: var(--icon-proportions-svg);
534
+ .tl-icon--copy {
535
+ mask-image: var(--icon-copy-svg);
845
536
  background-color: currentcolor;
846
537
  }
847
- .tl-icon--proportions_inactive {
848
- mask-image: var(--icon-proportions_inactive-svg);
538
+ .tl-icon--cross {
539
+ mask-image: var(--icon-cross-svg);
849
540
  background-color: currentcolor;
850
541
  }
851
- .tl-icon--range {
852
- mask-image: var(--icon-range-svg);
542
+ .tl-icon--cup {
543
+ mask-image: var(--icon-cup-svg);
853
544
  background-color: currentcolor;
854
545
  }
855
- .tl-icon--range_inactive {
856
- mask-image: var(--icon-range_inactive-svg);
546
+ .tl-icon--cup_inactive {
547
+ mask-image: var(--icon-cup_inactive-svg);
857
548
  background-color: currentcolor;
858
549
  }
859
- .tl-icon--redirect {
860
- mask-image: var(--icon-redirect-svg);
550
+ .tl-icon--dashboard {
551
+ mask-image: var(--icon-dashboard-svg);
861
552
  background-color: currentcolor;
862
553
  }
863
- .tl-icon--refresh {
864
- mask-image: var(--icon-refresh-svg);
554
+ .tl-icon--department {
555
+ mask-image: var(--icon-department-svg);
865
556
  background-color: currentcolor;
866
557
  }
867
- .tl-icon--refresh_inactive {
868
- mask-image: var(--icon-refresh_inactive-svg);
558
+ .tl-icon--department_inactive {
559
+ mask-image: var(--icon-department_inactive-svg);
869
560
  background-color: currentcolor;
870
561
  }
871
- .tl-icon--reload {
872
- mask-image: var(--icon-reload-svg);
562
+ .tl-icon--departure_scheduling {
563
+ mask-image: var(--icon-departure_scheduling-svg);
873
564
  background-color: currentcolor;
874
565
  }
875
- .tl-icon--reload_inactive {
876
- mask-image: var(--icon-reload_inactive-svg);
566
+ .tl-icon--departure_scheduling_inactive {
567
+ mask-image: var(--icon-departure_scheduling_inactive-svg);
877
568
  background-color: currentcolor;
878
569
  }
879
- .tl-icon--repeat {
880
- mask-image: var(--icon-repeat-svg);
570
+ .tl-icon--diamond {
571
+ mask-image: var(--icon-diamond-svg);
881
572
  background-color: currentcolor;
882
573
  }
883
- .tl-icon--report {
884
- mask-image: var(--icon-report-svg);
574
+ .tl-icon--diamond_inactive {
575
+ mask-image: var(--icon-diamond_inactive-svg);
885
576
  background-color: currentcolor;
886
577
  }
887
- .tl-icon--report_inactive {
888
- mask-image: var(--icon-report_inactive-svg);
578
+ .tl-icon--document {
579
+ mask-image: var(--icon-document-svg);
889
580
  background-color: currentcolor;
890
581
  }
891
- .tl-icon--route {
892
- mask-image: var(--icon-route-svg);
582
+ .tl-icon--document_check {
583
+ mask-image: var(--icon-document_check-svg);
893
584
  background-color: currentcolor;
894
585
  }
895
- .tl-icon--route_inactive {
896
- mask-image: var(--icon-route_inactive-svg);
586
+ .tl-icon--document_doc {
587
+ mask-image: var(--icon-document_doc-svg);
897
588
  background-color: currentcolor;
898
589
  }
899
- .tl-icon--save {
900
- mask-image: var(--icon-save-svg);
590
+ .tl-icon--document_eye {
591
+ mask-image: var(--icon-document_eye-svg);
901
592
  background-color: currentcolor;
902
593
  }
903
- .tl-icon--save_inactive {
904
- mask-image: var(--icon-save_inactive-svg);
594
+ .tl-icon--document_pdf {
595
+ mask-image: var(--icon-document_pdf-svg);
905
596
  background-color: currentcolor;
906
597
  }
907
- .tl-icon--search {
908
- mask-image: var(--icon-search-svg);
598
+ .tl-icon--document_plus {
599
+ mask-image: var(--icon-document_plus-svg);
909
600
  background-color: currentcolor;
910
601
  }
911
- .tl-icon--send {
912
- mask-image: var(--icon-send-svg);
602
+ .tl-icon--document_plus_inactive {
603
+ mask-image: var(--icon-document_plus_inactive-svg);
913
604
  background-color: currentcolor;
914
605
  }
915
- .tl-icon--send_inactive {
916
- mask-image: var(--icon-send_inactive-svg);
606
+ .tl-icon--document_ppt {
607
+ mask-image: var(--icon-document_ppt-svg);
917
608
  background-color: currentcolor;
918
609
  }
919
- .tl-icon--settings {
920
- mask-image: var(--icon-settings-svg);
610
+ .tl-icon--document_tool {
611
+ mask-image: var(--icon-document_tool-svg);
921
612
  background-color: currentcolor;
922
613
  }
923
- .tl-icon--share {
924
- mask-image: var(--icon-share-svg);
614
+ .tl-icon--document_wrong {
615
+ mask-image: var(--icon-document_wrong-svg);
925
616
  background-color: currentcolor;
926
617
  }
927
- .tl-icon--shuffle {
928
- mask-image: var(--icon-shuffle-svg);
618
+ .tl-icon--document_xls {
619
+ mask-image: var(--icon-document_xls-svg);
929
620
  background-color: currentcolor;
930
621
  }
931
- .tl-icon--skip_backwards {
932
- mask-image: var(--icon-skip_backwards-svg);
622
+ .tl-icon--dollar {
623
+ mask-image: var(--icon-dollar-svg);
933
624
  background-color: currentcolor;
934
625
  }
935
- .tl-icon--skip_forward {
936
- mask-image: var(--icon-skip_forward-svg);
626
+ .tl-icon--doner {
627
+ mask-image: var(--icon-doner-svg);
937
628
  background-color: currentcolor;
938
629
  }
939
- .tl-icon--smartphone {
940
- mask-image: var(--icon-smartphone-svg);
630
+ .tl-icon--double_kebab {
631
+ mask-image: var(--icon-double_kebab-svg);
941
632
  background-color: currentcolor;
942
633
  }
943
- .tl-icon--smartphone_inactive {
944
- mask-image: var(--icon-smartphone_inactive-svg);
634
+ .tl-icon--download {
635
+ mask-image: var(--icon-download-svg);
945
636
  background-color: currentcolor;
946
637
  }
947
- .tl-icon--sorting {
948
- mask-image: var(--icon-sorting-svg);
638
+ .tl-icon--driving_licence {
639
+ mask-image: var(--icon-driving_licence-svg);
949
640
  background-color: currentcolor;
950
641
  }
951
- .tl-icon--speedometer {
952
- mask-image: var(--icon-speedometer-svg);
642
+ .tl-icon--driving_licence_inactive {
643
+ mask-image: var(--icon-driving_licence_inactive-svg);
953
644
  background-color: currentcolor;
954
645
  }
955
- .tl-icon--speedometer_inactive {
956
- mask-image: var(--icon-speedometer_inactive-svg);
646
+ .tl-icon--drop {
647
+ mask-image: var(--icon-drop-svg);
957
648
  background-color: currentcolor;
958
649
  }
959
- .tl-icon--star {
960
- mask-image: var(--icon-star-svg);
650
+ .tl-icon--drop_inactive {
651
+ mask-image: var(--icon-drop_inactive-svg);
961
652
  background-color: currentcolor;
962
653
  }
963
- .tl-icon--support {
964
- mask-image: var(--icon-support-svg);
654
+ .tl-icon--edit {
655
+ mask-image: var(--icon-edit-svg);
965
656
  background-color: currentcolor;
966
657
  }
967
- .tl-icon--target {
968
- mask-image: var(--icon-target-svg);
658
+ .tl-icon--edit_inactive {
659
+ mask-image: var(--icon-edit_inactive-svg);
969
660
  background-color: currentcolor;
970
661
  }
971
- .tl-icon--target_inactive {
972
- mask-image: var(--icon-target_inactive-svg);
662
+ .tl-icon--email {
663
+ mask-image: var(--icon-email-svg);
973
664
  background-color: currentcolor;
974
665
  }
975
- .tl-icon--temperature {
976
- mask-image: var(--icon-temperature-svg);
666
+ .tl-icon--engine {
667
+ mask-image: var(--icon-engine-svg);
977
668
  background-color: currentcolor;
978
669
  }
979
- .tl-icon--temperature_inactive {
980
- mask-image: var(--icon-temperature_inactive-svg);
670
+ .tl-icon--engine_inactive {
671
+ mask-image: var(--icon-engine_inactive-svg);
981
672
  background-color: currentcolor;
982
673
  }
983
- .tl-icon--text {
984
- mask-image: var(--icon-text-svg);
674
+ .tl-icon--environment {
675
+ mask-image: var(--icon-environment-svg);
985
676
  background-color: currentcolor;
986
677
  }
987
- .tl-icon--text_inactive {
988
- mask-image: var(--icon-text_inactive-svg);
678
+ .tl-icon--environment_inactive {
679
+ mask-image: var(--icon-environment_inactive-svg);
989
680
  background-color: currentcolor;
990
681
  }
991
- .tl-icon--thumbs_down {
992
- mask-image: var(--icon-thumbs_down-svg);
682
+ .tl-icon--error {
683
+ mask-image: var(--icon-error-svg);
993
684
  background-color: currentcolor;
994
685
  }
995
- .tl-icon--thumbs_up {
996
- mask-image: var(--icon-thumbs_up-svg);
686
+ .tl-icon--exit {
687
+ mask-image: var(--icon-exit-svg);
997
688
  background-color: currentcolor;
998
689
  }
999
- .tl-icon--tick {
1000
- mask-image: var(--icon-tick-svg);
690
+ .tl-icon--expand {
691
+ mask-image: var(--icon-expand-svg);
1001
692
  background-color: currentcolor;
1002
693
  }
1003
- .tl-icon--timer {
1004
- mask-image: var(--icon-timer-svg);
694
+ .tl-icon--expand_inactive {
695
+ mask-image: var(--icon-expand_inactive-svg);
1005
696
  background-color: currentcolor;
1006
697
  }
1007
- .tl-icon--tool {
1008
- mask-image: var(--icon-tool-svg);
698
+ .tl-icon--export {
699
+ mask-image: var(--icon-export-svg);
1009
700
  background-color: currentcolor;
1010
701
  }
1011
- .tl-icon--tool_inactive {
1012
- mask-image: var(--icon-tool_inactive-svg);
702
+ .tl-icon--export_inactive {
703
+ mask-image: var(--icon-export_inactive-svg);
1013
704
  background-color: currentcolor;
1014
705
  }
1015
- .tl-icon--trailer {
1016
- mask-image: var(--icon-trailer-svg);
706
+ .tl-icon--eye {
707
+ mask-image: var(--icon-eye-svg);
1017
708
  background-color: currentcolor;
1018
709
  }
1019
- .tl-icon--trailer_inactive {
1020
- mask-image: var(--icon-trailer_inactive-svg);
710
+ .tl-icon--eye_inactive {
711
+ mask-image: var(--icon-eye_inactive-svg);
1021
712
  background-color: currentcolor;
1022
713
  }
1023
- .tl-icon--trash {
1024
- mask-image: var(--icon-trash-svg);
714
+ .tl-icon--face_dissatisfied {
715
+ mask-image: var(--icon-face_dissatisfied-svg);
1025
716
  background-color: currentcolor;
1026
717
  }
1027
- .tl-icon--trash_inactive {
1028
- mask-image: var(--icon-trash_inactive-svg);
718
+ .tl-icon--face_neutral {
719
+ mask-image: var(--icon-face_neutral-svg);
1029
720
  background-color: currentcolor;
1030
721
  }
1031
- .tl-icon--truck {
1032
- mask-image: var(--icon-truck-svg);
722
+ .tl-icon--face_satisfied {
723
+ mask-image: var(--icon-face_satisfied-svg);
1033
724
  background-color: currentcolor;
1034
725
  }
1035
- .tl-icon--truck_inactive {
1036
- mask-image: var(--icon-truck_inactive-svg);
726
+ .tl-icon--factory {
727
+ mask-image: var(--icon-factory-svg);
1037
728
  background-color: currentcolor;
1038
729
  }
1039
- .tl-icon--undo {
1040
- mask-image: var(--icon-undo-svg);
730
+ .tl-icon--factory_inactive {
731
+ mask-image: var(--icon-factory_inactive-svg);
1041
732
  background-color: currentcolor;
1042
733
  }
1043
- .tl-icon--undo_inactive {
1044
- mask-image: var(--icon-undo_inactive-svg);
734
+ .tl-icon--ferry {
735
+ mask-image: var(--icon-ferry-svg);
1045
736
  background-color: currentcolor;
1046
737
  }
1047
- .tl-icon--unlock {
1048
- mask-image: var(--icon-unlock-svg);
738
+ .tl-icon--ferry_inactive {
739
+ mask-image: var(--icon-ferry_inactive-svg);
1049
740
  background-color: currentcolor;
1050
741
  }
1051
- .tl-icon--upload {
1052
- mask-image: var(--icon-upload-svg);
742
+ .tl-icon--filters {
743
+ mask-image: var(--icon-filters-svg);
1053
744
  background-color: currentcolor;
1054
745
  }
1055
- .tl-icon--video {
1056
- mask-image: var(--icon-video-svg);
746
+ .tl-icon--filters_inactive {
747
+ mask-image: var(--icon-filters_inactive-svg);
1057
748
  background-color: currentcolor;
1058
749
  }
1059
- .tl-icon--video_inactive {
1060
- mask-image: var(--icon-video_inactive-svg);
750
+ .tl-icon--flash {
751
+ mask-image: var(--icon-flash-svg);
1061
752
  background-color: currentcolor;
1062
753
  }
1063
- .tl-icon--wallet {
1064
- mask-image: var(--icon-wallet-svg);
754
+ .tl-icon--flash_inactive {
755
+ mask-image: var(--icon-flash_inactive-svg);
1065
756
  background-color: currentcolor;
1066
757
  }
1067
- .tl-icon--warning {
1068
- mask-image: var(--icon-warning-svg);
758
+ .tl-icon--folder {
759
+ mask-image: var(--icon-folder-svg);
1069
760
  background-color: currentcolor;
1070
761
  }
1071
- .tl-icon--weight {
1072
- mask-image: var(--icon-weight-svg);
762
+ .tl-icon--forward {
763
+ mask-image: var(--icon-forward-svg);
1073
764
  background-color: currentcolor;
1074
765
  }
1075
- .tl-icon--weight_inactive {
1076
- mask-image: var(--icon-weight_inactive-svg);
766
+ .tl-icon--forward_inactive {
767
+ mask-image: var(--icon-forward_inactive-svg);
1077
768
  background-color: currentcolor;
1078
769
  }
1079
- .tl-icon--wifi {
1080
- mask-image: var(--icon-wifi-svg);
770
+ .tl-icon--fuel {
771
+ mask-image: var(--icon-fuel-svg);
1081
772
  background-color: currentcolor;
1082
773
  }
1083
- .tl-icon--wifi_inactive {
1084
- mask-image: var(--icon-wifi_inactive-svg);
774
+ .tl-icon--fuel_gauge {
775
+ mask-image: var(--icon-fuel_gauge-svg);
1085
776
  background-color: currentcolor;
1086
777
  }
1087
- .tl-icon--windscreen_heating {
1088
- mask-image: var(--icon-windscreen_heating-svg);
778
+ .tl-icon--fuel_gauge_inactive {
779
+ mask-image: var(--icon-fuel_gauge_inactive-svg);
1089
780
  background-color: currentcolor;
1090
781
  }
1091
- .tl-icon--windscreen_heating_inactive {
1092
- mask-image: var(--icon-windscreen_heating_inactive-svg);
782
+ .tl-icon--fuel_inactive {
783
+ mask-image: var(--icon-fuel_inactive-svg);
1093
784
  background-color: currentcolor;
1094
785
  }
1095
- .tl-icon--12 {
1096
- width: 12px;
1097
- height: 12px;
1098
- }
1099
- .tl-icon--14 {
1100
- width: 14px;
1101
- height: 14px;
786
+ .tl-icon--gift {
787
+ mask-image: var(--icon-gift-svg);
788
+ background-color: currentcolor;
1102
789
  }
1103
- .tl-icon--16 {
1104
- width: 16px;
1105
- height: 16px;
790
+ .tl-icon--gift inactive {
791
+ mask-image: var(--icon-gift inactive-svg);
792
+ background-color: currentcolor;
1106
793
  }
1107
- .tl-icon--18 {
1108
- width: 18px;
1109
- height: 18px;
794
+ .tl-icon--global {
795
+ mask-image: var(--icon-global-svg);
796
+ background-color: currentcolor;
1110
797
  }
1111
- .tl-icon--20 {
1112
- width: 20px;
1113
- height: 20px;
798
+ .tl-icon--guided_tour {
799
+ mask-image: var(--icon-guided_tour-svg);
800
+ background-color: currentcolor;
1114
801
  }
1115
- .tl-icon--22 {
1116
- width: 22px;
1117
- height: 22px;
802
+ .tl-icon--guided_tour_inactive {
803
+ mask-image: var(--icon-guided_tour_inactive-svg);
804
+ background-color: currentcolor;
1118
805
  }
1119
- .tl-icon--24 {
1120
- width: 24px;
1121
- height: 24px;
806
+ .tl-icon--hatch_open {
807
+ mask-image: var(--icon-hatch_open-svg);
808
+ background-color: currentcolor;
1122
809
  }
1123
- .tl-icon--26 {
1124
- width: 26px;
1125
- height: 26px;
810
+ .tl-icon--hatch_open_1 {
811
+ mask-image: var(--icon-hatch_open_1-svg);
812
+ background-color: currentcolor;
1126
813
  }
1127
- .tl-icon--28 {
1128
- width: 28px;
1129
- height: 28px;
814
+ .tl-icon--hatch_open_2 {
815
+ mask-image: var(--icon-hatch_open_2-svg);
816
+ background-color: currentcolor;
1130
817
  }
1131
- .tl-icon--30 {
1132
- width: 30px;
1133
- height: 30px;
818
+ .tl-icon--hatch_open_inactive {
819
+ mask-image: var(--icon-hatch_open_inactive-svg);
820
+ background-color: currentcolor;
1134
821
  }
1135
- .tl-icon--32 {
1136
- width: 32px;
1137
- height: 32px;
822
+ .tl-icon--heart {
823
+ mask-image: var(--icon-heart-svg);
824
+ background-color: currentcolor;
1138
825
  }
1139
- .tl-icon--34 {
1140
- width: 34px;
1141
- height: 34px;
826
+ .tl-icon--heart_inactive {
827
+ mask-image: var(--icon-heart_inactive-svg);
828
+ background-color: currentcolor;
1142
829
  }
1143
- .tl-icon--36 {
1144
- width: 36px;
1145
- height: 36px;
830
+ .tl-icon--heating_inactive_screen {
831
+ mask-image: var(--icon-heating_inactive_screen-svg);
832
+ background-color: currentcolor;
1146
833
  }
1147
- .tl-icon--38 {
1148
- width: 38px;
1149
- height: 38px;
834
+ .tl-icon--history {
835
+ mask-image: var(--icon-history-svg);
836
+ background-color: currentcolor;
1150
837
  }
1151
- .tl-icon--40 {
1152
- width: 40px;
1153
- height: 40px;
838
+ .tl-icon--history_inactive {
839
+ mask-image: var(--icon-history_inactive-svg);
840
+ background-color: currentcolor;
1154
841
  }
1155
- .tl-icon--42 {
1156
- width: 42px;
1157
- height: 42px;
842
+ .tl-icon--home {
843
+ mask-image: var(--icon-home-svg);
844
+ background-color: currentcolor;
1158
845
  }
1159
- .tl-icon--44 {
1160
- width: 44px;
1161
- height: 44px;
846
+ .tl-icon--home_inactive {
847
+ mask-image: var(--icon-home_inactive-svg);
848
+ background-color: currentcolor;
1162
849
  }
1163
- .tl-icon--46 {
1164
- width: 46px;
1165
- height: 46px;
850
+ .tl-icon--idea {
851
+ mask-image: var(--icon-idea-svg);
852
+ background-color: currentcolor;
1166
853
  }
1167
- .tl-icon--48 {
1168
- width: 48px;
1169
- height: 48px;
854
+ .tl-icon--idea_inactive {
855
+ mask-image: var(--icon-idea_inactive-svg);
856
+ background-color: currentcolor;
1170
857
  }
1171
- .tl-icon--50 {
1172
- width: 50px;
1173
- height: 50px;
858
+ .tl-icon--image {
859
+ mask-image: var(--icon-image-svg);
860
+ background-color: currentcolor;
1174
861
  }
1175
- .tl-icon--52 {
1176
- width: 52px;
1177
- height: 52px;
862
+ .tl-icon--image_add {
863
+ mask-image: var(--icon-image_add-svg);
864
+ background-color: currentcolor;
1178
865
  }
1179
- .tl-icon--54 {
1180
- width: 54px;
1181
- height: 54px;
866
+ .tl-icon--image_inactive {
867
+ mask-image: var(--icon-image_inactive-svg);
868
+ background-color: currentcolor;
1182
869
  }
1183
- .tl-icon--56 {
1184
- width: 56px;
1185
- height: 56px;
870
+ .tl-icon--image_set {
871
+ mask-image: var(--icon-image_set-svg);
872
+ background-color: currentcolor;
1186
873
  }
1187
- .tl-icon--58 {
1188
- width: 58px;
1189
- height: 58px;
874
+ .tl-icon--info {
875
+ mask-image: var(--icon-info-svg);
876
+ background-color: currentcolor;
1190
877
  }
1191
- .tl-icon--60 {
1192
- width: 60px;
1193
- height: 60px;
878
+ .tl-icon--insights {
879
+ mask-image: var(--icon-insights-svg);
880
+ background-color: currentcolor;
1194
881
  }
1195
- .tl-icon--62 {
1196
- width: 62px;
1197
- height: 62px;
882
+ .tl-icon--kebab {
883
+ mask-image: var(--icon-kebab-svg);
884
+ background-color: currentcolor;
1198
885
  }
1199
- .tl-icon--64 {
1200
- width: 64px;
1201
- height: 64px;
886
+ .tl-icon--key {
887
+ mask-image: var(--icon-key-svg);
888
+ background-color: currentcolor;
1202
889
  }
1203
- .tl-icon--66 {
1204
- width: 66px;
1205
- height: 66px;
890
+ .tl-icon--key_inactive {
891
+ mask-image: var(--icon-key_inactive-svg);
892
+ background-color: currentcolor;
1206
893
  }
1207
- .tl-icon--68 {
1208
- width: 68px;
1209
- height: 68px;
894
+ .tl-icon--language {
895
+ mask-image: var(--icon-language-svg);
896
+ background-color: currentcolor;
1210
897
  }
1211
- .tl-icon--70 {
1212
- width: 70px;
1213
- height: 70px;
898
+ .tl-icon--layer {
899
+ mask-image: var(--icon-layer-svg);
900
+ background-color: currentcolor;
1214
901
  }
1215
- .tl-icon--72 {
1216
- width: 72px;
1217
- height: 72px;
902
+ .tl-icon--layer_inactive {
903
+ mask-image: var(--icon-layer_inactive-svg);
904
+ background-color: currentcolor;
1218
905
  }
1219
- .tl-icon--74 {
1220
- width: 74px;
1221
- height: 74px;
906
+ .tl-icon--link {
907
+ mask-image: var(--icon-link-svg);
908
+ background-color: currentcolor;
1222
909
  }
1223
- .tl-icon--76 {
1224
- width: 76px;
1225
- height: 76px;
910
+ .tl-icon--link_broken {
911
+ mask-image: var(--icon-link_broken-svg);
912
+ background-color: currentcolor;
1226
913
  }
1227
- .tl-icon--78 {
1228
- width: 78px;
1229
- height: 78px;
914
+ .tl-icon--list {
915
+ mask-image: var(--icon-list-svg);
916
+ background-color: currentcolor;
1230
917
  }
1231
- .tl-icon--80 {
1232
- width: 80px;
1233
- height: 80px;
918
+ .tl-icon--list_inactive {
919
+ mask-image: var(--icon-list_inactive-svg);
920
+ background-color: currentcolor;
1234
921
  }
1235
- .tl-icon--82 {
1236
- width: 82px;
1237
- height: 82px;
922
+ .tl-icon--lock {
923
+ mask-image: var(--icon-lock-svg);
924
+ background-color: currentcolor;
1238
925
  }
1239
- .tl-icon--84 {
1240
- width: 84px;
1241
- height: 84px;
926
+ .tl-icon--lock_inactive {
927
+ mask-image: var(--icon-lock_inactive-svg);
928
+ background-color: currentcolor;
1242
929
  }
1243
- .tl-icon--86 {
1244
- width: 86px;
1245
- height: 86px;
930
+ .tl-icon--map_cursor {
931
+ mask-image: var(--icon-map_cursor-svg);
932
+ background-color: currentcolor;
1246
933
  }
1247
- .tl-icon--88 {
1248
- width: 88px;
1249
- height: 88px;
934
+ .tl-icon--map_cursor_inactive {
935
+ mask-image: var(--icon-map_cursor_inactive-svg);
936
+ background-color: currentcolor;
1250
937
  }
1251
- .tl-icon--90 {
1252
- width: 90px;
1253
- height: 90px;
938
+ .tl-icon--maximize_fullscreen {
939
+ mask-image: var(--icon-maximize_fullscreen-svg);
940
+ background-color: currentcolor;
1254
941
  }
1255
- .tl-icon--92 {
1256
- width: 92px;
1257
- height: 92px;
942
+ .tl-icon--meatballs {
943
+ mask-image: var(--icon-meatballs-svg);
944
+ background-color: currentcolor;
1258
945
  }
1259
- .tl-icon--94 {
1260
- width: 94px;
1261
- height: 94px;
946
+ .tl-icon--merge {
947
+ mask-image: var(--icon-merge-svg);
948
+ background-color: currentcolor;
1262
949
  }
1263
- .tl-icon--96 {
1264
- width: 96px;
1265
- height: 96px;
950
+ .tl-icon--merge_inactive {
951
+ mask-image: var(--icon-merge_inactive-svg);
952
+ background-color: currentcolor;
1266
953
  }
1267
-
1268
- .tl-text-field {
1269
- display: block;
1270
- position: relative;
1271
- width: 100%;
1272
- min-width: 208px;
1273
- height: 56px;
1274
- padding-bottom: 1px;
1275
- border-radius: var(--text-field-border-radius);
1276
- box-sizing: border-box;
954
+ .tl-icon--message {
955
+ mask-image: var(--icon-message-svg);
956
+ background-color: currentcolor;
1277
957
  }
1278
- .tl-text-field--no-min-width {
1279
- min-width: auto;
958
+ .tl-icon--message_inactive {
959
+ mask-image: var(--icon-message_inactive-svg);
960
+ background-color: currentcolor;
1280
961
  }
1281
- .tl-text-field--lg {
1282
- height: 56px;
962
+ .tl-icon--mileage {
963
+ mask-image: var(--icon-mileage-svg);
964
+ background-color: currentcolor;
1283
965
  }
1284
- .tl-text-field--md {
1285
- height: 48px;
966
+ .tl-icon--mileage_inactive {
967
+ mask-image: var(--icon-mileage_inactive-svg);
968
+ background-color: currentcolor;
1286
969
  }
1287
- .tl-text-field--sm {
1288
- height: 40px;
970
+ .tl-icon--minimize_fullscreen {
971
+ mask-image: var(--icon-minimize_fullscreen-svg);
972
+ background-color: currentcolor;
1289
973
  }
1290
- .tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
1291
- content: "";
1292
- position: absolute;
1293
- top: 50%;
1294
- right: 16px;
1295
- width: 20px;
1296
- height: 20px;
1297
- background-color: var(--text-field-text);
1298
- mask-image: var(--icon-edit_inactive-svg);
1299
- mask-size: contain;
1300
- mask-repeat: no-repeat;
1301
- mask-position: center;
1302
- transform: translateY(-50%);
1303
- z-index: 1;
974
+ .tl-icon--minus {
975
+ mask-image: var(--icon-minus-svg);
976
+ background-color: currentcolor;
1304
977
  }
1305
- .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside).tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
1306
- top: calc(50% + 24px);
978
+ .tl-icon--navigate {
979
+ mask-image: var(--icon-navigate-svg);
980
+ background-color: currentcolor;
1307
981
  }
1308
- .tl-text-field--disabled {
1309
- pointer-events: none;
982
+ .tl-icon--navigate_inactive {
983
+ mask-image: var(--icon-navigate_inactive-svg);
984
+ background-color: currentcolor;
1310
985
  }
1311
- .tl-text-field .tl-icon {
1312
- background-color: var(--text-field-affix);
986
+ .tl-icon--notification {
987
+ mask-image: var(--icon-notification-svg);
988
+ background-color: currentcolor;
1313
989
  }
1314
- .tl-text-field--disabled .tl-text-field .tl-icon {
1315
- background-color: var(--text-field-affix-disabled);
990
+ .tl-icon--notification_inactive {
991
+ mask-image: var(--icon-notification_inactive-svg);
992
+ background-color: currentcolor;
1316
993
  }
1317
-
1318
- .tl-text-field__input {
1319
- all: unset;
1320
- border-radius: var(--text-field-border-radius);
1321
- background-color: var(--text-field-background);
1322
- color: var(--text-field-text);
1323
- width: 100%;
1324
- box-sizing: border-box;
1325
- margin: 0;
1326
- border: none;
1327
- outline: none;
994
+ .tl-icon--oil_level {
995
+ mask-image: var(--icon-oil_level-svg);
996
+ background-color: currentcolor;
1328
997
  }
1329
- .tl-text-field__input::placeholder {
1330
- color: var(--text-field-placeholder);
998
+ .tl-icon--oil_level_inactive {
999
+ mask-image: var(--icon-oil_level_inactive-svg);
1000
+ background-color: currentcolor;
1331
1001
  }
1332
- .tl-text-field__input:disabled {
1333
- background-color: var(--text-field-background-disabled);
1334
- color: var(--text-field-text-disabled);
1335
- user-select: none;
1336
- pointer-events: none;
1002
+ .tl-icon--pause {
1003
+ mask-image: var(--icon-pause-svg);
1004
+ background-color: currentcolor;
1337
1005
  }
1338
- .tl-text-field__input:disabled::placeholder {
1339
- color: var(--text-field-placeholder-disabled);
1006
+ .tl-icon--pause_inactive {
1007
+ mask-image: var(--icon-pause_inactive-svg);
1008
+ background-color: currentcolor;
1340
1009
  }
1341
- .tl-text-field__input {
1342
- font-family: var(--detail-02-font-family);
1343
- font-size: var(--detail-02-font-size);
1344
- line-height: var(--detail-02-line-height);
1345
- font-weight: var(--detail-02-font-weight);
1346
- letter-spacing: var(--detail-02-letter-spacing);
1347
- text-transform: var(--detail-02-text-transform);
1348
- text-align: left;
1349
- color: var(--text-field-text);
1350
- flex: 1;
1351
- order: 2;
1352
- box-shadow: inset var(--text-field-box-shadow);
1353
- transition: box-shadow 0.2s;
1010
+ .tl-icon--phone {
1011
+ mask-image: var(--icon-phone-svg);
1012
+ background-color: currentcolor;
1354
1013
  }
1355
- .tl-text-field__input:focus {
1356
- box-shadow: inset var(--text-field-box-shadow-focus);
1014
+ .tl-icon--phone_inactive {
1015
+ mask-image: var(--icon-phone_inactive-svg);
1016
+ background-color: currentcolor;
1357
1017
  }
1358
- .tl-text-field:hover .tl-text-field__input:not(:focus) {
1359
- box-shadow: inset var(--text-field-box-shadow-hover);
1018
+ .tl-icon--pie_chart {
1019
+ mask-image: var(--icon-pie_chart-svg);
1020
+ background-color: currentcolor;
1360
1021
  }
1361
- .tl-text-field--error .tl-text-field__input {
1362
- box-shadow: inset var(--text-field-box-shadow-error);
1022
+ .tl-icon--pin {
1023
+ mask-image: var(--icon-pin-svg);
1024
+ background-color: currentcolor;
1363
1025
  }
1364
- .tl-text-field--error .tl-text-field__input:focus {
1365
- box-shadow: inset var(--text-field-box-shadow-error-focus);
1026
+ .tl-icon--pin_inactive {
1027
+ mask-image: var(--icon-pin_inactive-svg);
1028
+ background-color: currentcolor;
1366
1029
  }
1367
- .tl-text-field--error:hover .tl-text-field__input:not(:focus) {
1368
- box-shadow: inset var(--text-field-box-shadow-error-hover);
1030
+ .tl-icon--placeholder {
1031
+ mask-image: var(--icon-placeholder-svg);
1032
+ background-color: currentcolor;
1369
1033
  }
1370
- .tl-text-field--success:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__input:not(:focus) {
1371
- box-shadow: inset var(--text-field-box-shadow-success);
1034
+ .tl-icon--play {
1035
+ mask-image: var(--icon-play-svg);
1036
+ background-color: currentcolor;
1372
1037
  }
1373
- .tl-text-field--readonly .tl-text-field__input {
1374
- box-shadow: inset var(--text-field-box-shadow);
1038
+ .tl-icon--play_inactive {
1039
+ mask-image: var(--icon-play_inactive-svg);
1040
+ background-color: currentcolor;
1375
1041
  }
1376
- .tl-text-field--readonly .tl-text-field__input:focus {
1377
- box-shadow: inset var(--text-field-box-shadow-focus);
1042
+ .tl-icon--plus {
1043
+ mask-image: var(--icon-plus-svg);
1044
+ background-color: currentcolor;
1378
1045
  }
1379
- .tl-text-field--readonly:hover .tl-text-field__input:not(:focus) {
1380
- box-shadow: inset var(--text-field-box-shadow-hover);
1046
+ .tl-icon--powerplug {
1047
+ mask-image: var(--icon-powerplug-svg);
1048
+ background-color: currentcolor;
1381
1049
  }
1382
- .tl-text-field--disabled .tl-text-field__input {
1383
- box-shadow: none;
1384
- background-color: var(--text-field-background-disabled);
1385
- color: var(--text-field-text-disabled);
1050
+ .tl-icon--powerplug_inactive {
1051
+ mask-image: var(--icon-powerplug_inactive-svg);
1052
+ background-color: currentcolor;
1386
1053
  }
1387
- .tl-text-field--readonly .tl-text-field__input {
1388
- user-select: auto;
1389
- caret-color: transparent;
1390
- cursor: default;
1391
- pointer-events: none;
1054
+ .tl-icon--print {
1055
+ mask-image: var(--icon-print-svg);
1056
+ background-color: currentcolor;
1392
1057
  }
1393
- .tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input {
1394
- padding-right: 54px;
1058
+ .tl-icon--print_inactive {
1059
+ mask-image: var(--icon-print_inactive-svg);
1060
+ background-color: currentcolor;
1395
1061
  }
1396
- .tl-text-field--lg .tl-text-field__input {
1397
- padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
1062
+ .tl-icon--privacy {
1063
+ mask-image: var(--icon-privacy-svg);
1064
+ background-color: currentcolor;
1398
1065
  }
1399
- .tl-text-field--md .tl-text-field__input {
1400
- padding: var(--tds-spacing-element-16);
1066
+ .tl-icon--privacy_inactive {
1067
+ mask-image: var(--icon-privacy_inactive-svg);
1068
+ background-color: currentcolor;
1401
1069
  }
1402
- .tl-text-field--sm .tl-text-field__input {
1403
- padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
1070
+ .tl-icon--profile {
1071
+ mask-image: var(--icon-profile-svg);
1072
+ background-color: currentcolor;
1404
1073
  }
1405
- .tl-text-field--label-inside.tl-text-field--lg .tl-text-field__input {
1406
- padding-top: var(--tds-spacing-element-24);
1407
- padding-bottom: 15px;
1074
+ .tl-icon--profile_inactive {
1075
+ mask-image: var(--icon-profile_inactive-svg);
1076
+ background-color: currentcolor;
1408
1077
  }
1409
- .tl-text-field--label-inside.tl-text-field--md .tl-text-field__input {
1410
- padding-top: var(--tds-spacing-element-20);
1411
- padding-bottom: 11px;
1078
+ .tl-icon--prohibited {
1079
+ mask-image: var(--icon-prohibited-svg);
1080
+ background-color: currentcolor;
1412
1081
  }
1413
- .tl-text-field--label-inside.tl-text-field--sm .tl-text-field__input:not(:focus):placeholder-shown {
1414
- padding-top: var(--tds-spacing-element-16);
1415
- padding-bottom: 7px;
1082
+ .tl-icon--proportions {
1083
+ mask-image: var(--icon-proportions-svg);
1084
+ background-color: currentcolor;
1416
1085
  }
1417
- .tl-text-field:has(.tl-text-field__prefix--icon) .tl-text-field__input {
1418
- padding-left: 44px;
1086
+ .tl-icon--proportions_inactive {
1087
+ mask-image: var(--icon-proportions_inactive-svg);
1088
+ background-color: currentcolor;
1419
1089
  }
1420
- .tl-text-field:has(.tl-text-field__prefix--text) .tl-text-field__input {
1421
- padding-left: calc(16px + var(--text-field-affix-width-text) + 8px);
1090
+ .tl-icon--range {
1091
+ mask-image: var(--icon-range-svg);
1092
+ background-color: currentcolor;
1422
1093
  }
1423
- .tl-text-field:has(.tl-text-field__suffix--icon) .tl-text-field__input {
1424
- padding-right: 44px;
1094
+ .tl-icon--range_inactive {
1095
+ mask-image: var(--icon-range_inactive-svg);
1096
+ background-color: currentcolor;
1425
1097
  }
1426
- .tl-text-field:has(.tl-text-field__suffix--text) .tl-text-field__input {
1427
- padding-right: calc(16px + var(--text-field-affix-width-text) + 8px);
1098
+ .tl-icon--redirect {
1099
+ mask-image: var(--icon-redirect-svg);
1100
+ background-color: currentcolor;
1428
1101
  }
1429
- .tl-text-field--label-inside .tl-text-field__input::placeholder {
1430
- color: transparent !important;
1102
+ .tl-icon--refresh {
1103
+ mask-image: var(--icon-refresh-svg);
1104
+ background-color: currentcolor;
1431
1105
  }
1432
- .tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__input:disabled::placeholder {
1433
- color: var(--text-field-placeholder-disabled) !important;
1106
+ .tl-icon--refresh_inactive {
1107
+ mask-image: var(--icon-refresh_inactive-svg);
1108
+ background-color: currentcolor;
1434
1109
  }
1435
-
1436
- .tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__label {
1437
- font-family: var(--detail-05-font-family);
1438
- font-size: var(--detail-05-font-size);
1439
- line-height: var(--detail-05-line-height);
1440
- font-weight: var(--detail-05-font-weight);
1441
- letter-spacing: var(--detail-05-letter-spacing);
1442
- text-transform: var(--detail-05-text-transform);
1443
- display: block;
1444
- margin-bottom: 8px;
1445
- color: var(--text-field-label);
1110
+ .tl-icon--reload {
1111
+ mask-image: var(--icon-reload-svg);
1112
+ background-color: currentcolor;
1446
1113
  }
1447
- .tl-text-field--label-inside .tl-text-field__label {
1448
- font-family: var(--detail-02-font-family);
1449
- font-size: var(--detail-02-font-size);
1450
- line-height: var(--detail-02-line-height);
1451
- font-weight: var(--detail-02-font-weight);
1452
- letter-spacing: var(--detail-02-letter-spacing);
1453
- text-transform: var(--detail-02-text-transform);
1454
- position: absolute;
1455
- top: 50%;
1456
- left: var(--text-field-label-inside-left, 16px);
1457
- color: var(--text-field-label-inside);
1458
- pointer-events: none;
1459
- transform: translateY(-50%);
1460
- transform-origin: top left;
1461
- transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
1462
- z-index: 1;
1114
+ .tl-icon--reload_inactive {
1115
+ mask-image: var(--icon-reload_inactive-svg);
1116
+ background-color: currentcolor;
1463
1117
  }
1464
- .tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field__label {
1465
- left: 44px;
1118
+ .tl-icon--repeat {
1119
+ mask-image: var(--icon-repeat-svg);
1120
+ background-color: currentcolor;
1466
1121
  }
1467
- .tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field__label {
1468
- left: calc(16px + var(--text-field-affix-width-text) + 8px);
1122
+ .tl-icon--report {
1123
+ mask-image: var(--icon-report-svg);
1124
+ background-color: currentcolor;
1469
1125
  }
1470
- .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
1471
- font-family: var(--detail-07-font-family);
1472
- font-size: var(--detail-07-font-size);
1473
- line-height: var(--detail-07-line-height);
1474
- font-weight: var(--detail-07-font-weight);
1475
- letter-spacing: var(--detail-07-letter-spacing);
1476
- text-transform: var(--detail-07-text-transform);
1477
- top: 8px;
1478
- transform: translateY(0);
1479
- transition: 0.1s ease all;
1126
+ .tl-icon--report_inactive {
1127
+ mask-image: var(--icon-report_inactive-svg);
1128
+ background-color: currentcolor;
1480
1129
  }
1481
- .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
1482
- left: 44px;
1130
+ .tl-icon--route {
1131
+ mask-image: var(--icon-route-svg);
1132
+ background-color: currentcolor;
1483
1133
  }
1484
- .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--text):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--text):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--text):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--text):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
1485
- left: calc(16px + var(--text-field-affix-width-text) + 8px);
1134
+ .tl-icon--route_inactive {
1135
+ mask-image: var(--icon-route_inactive-svg);
1136
+ background-color: currentcolor;
1486
1137
  }
1487
- .tl-text-field--label-inside.tl-text-field--sm:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--sm:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
1488
- opacity: 0;
1489
- visibility: hidden;
1138
+ .tl-icon--save {
1139
+ mask-image: var(--icon-save-svg);
1140
+ background-color: currentcolor;
1490
1141
  }
1491
- .tl-text-field--label-inside.tl-text-field--disabled .tl-text-field__label {
1492
- color: var(--text-field-label-disabled);
1142
+ .tl-icon--save_inactive {
1143
+ mask-image: var(--icon-save_inactive-svg);
1144
+ background-color: currentcolor;
1493
1145
  }
1494
- .tl-text-field:not(.tl-text-field--label-inside).tl-text-field--disabled .tl-text-field__label {
1495
- color: var(--text-field-label-disabled);
1146
+ .tl-icon--search {
1147
+ mask-image: var(--icon-search-svg);
1148
+ background-color: currentcolor;
1496
1149
  }
1497
-
1498
- .tl-text-field__bottom {
1499
- display: flex;
1500
- gap: 8px;
1501
- padding-top: 4px;
1150
+ .tl-icon--send {
1151
+ mask-image: var(--icon-send-svg);
1152
+ background-color: currentcolor;
1502
1153
  }
1503
-
1504
- .tl-text-field__helper {
1505
- font-family: var(--detail-05-font-family);
1506
- font-size: var(--detail-05-font-size);
1507
- line-height: var(--detail-05-line-height);
1508
- font-weight: var(--detail-05-font-weight);
1509
- letter-spacing: var(--detail-05-letter-spacing);
1510
- text-transform: var(--detail-05-text-transform);
1511
- color: var(--text-field-helper);
1512
- position: relative;
1154
+ .tl-icon--send_inactive {
1155
+ mask-image: var(--icon-send_inactive-svg);
1156
+ background-color: currentcolor;
1513
1157
  }
1514
- .tl-text-field--disabled .tl-text-field__helper {
1515
- color: var(--color-foreground-text-disabled);
1158
+ .tl-icon--settings {
1159
+ mask-image: var(--icon-settings-svg);
1160
+ background-color: currentcolor;
1516
1161
  }
1517
- .tl-text-field--error .tl-text-field__helper {
1518
- padding-left: 24px;
1162
+ .tl-icon--share {
1163
+ mask-image: var(--icon-share-svg);
1164
+ background-color: currentcolor;
1519
1165
  }
1520
- .tl-text-field--error .tl-text-field__helper::before {
1521
- content: "";
1522
- position: absolute;
1523
- left: 0;
1524
- top: 0;
1525
- width: 16px;
1526
- height: 16px;
1527
- background-color: var(--text-field-error);
1528
- mask-image: var(--icon-error-svg);
1529
- mask-size: contain;
1530
- mask-repeat: no-repeat;
1531
- mask-position: center;
1166
+ .tl-icon--shuffle {
1167
+ mask-image: var(--icon-shuffle-svg);
1168
+ background-color: currentcolor;
1532
1169
  }
1533
- .tl-text-field--error.tl-text-field--readonly .tl-text-field__helper {
1534
- padding-left: 0;
1170
+ .tl-icon--skip_backwards {
1171
+ mask-image: var(--icon-skip_backwards-svg);
1172
+ background-color: currentcolor;
1535
1173
  }
1536
- .tl-text-field--error.tl-text-field--readonly .tl-text-field__helper::before {
1537
- display: none;
1174
+ .tl-icon--skip_forward {
1175
+ mask-image: var(--icon-skip_forward-svg);
1176
+ background-color: currentcolor;
1538
1177
  }
1539
- .tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__helper {
1540
- color: var(--text-field-error);
1178
+ .tl-icon--smartphone {
1179
+ mask-image: var(--icon-smartphone-svg);
1180
+ background-color: currentcolor;
1541
1181
  }
1542
- .tl-text-field--error.tl-text-field--disabled .tl-text-field__helper::before {
1543
- background-color: var(--color-foreground-text-disabled);
1182
+ .tl-icon--smartphone_inactive {
1183
+ mask-image: var(--icon-smartphone_inactive-svg);
1184
+ background-color: currentcolor;
1544
1185
  }
1545
-
1546
- .tl-text-field__charcounter {
1547
- font-family: var(--detail-05-font-family);
1548
- font-size: var(--detail-05-font-size);
1549
- line-height: var(--detail-05-line-height);
1550
- font-weight: var(--detail-05-font-weight);
1551
- letter-spacing: var(--detail-05-letter-spacing);
1552
- text-transform: var(--detail-05-text-transform);
1553
- margin-left: auto;
1554
- color: var(--text-field-textcounter);
1186
+ .tl-icon--sorting {
1187
+ mask-image: var(--icon-sorting-svg);
1188
+ background-color: currentcolor;
1555
1189
  }
1556
- .tl-text-field--disabled .tl-text-field__charcounter {
1557
- color: var(--color-foreground-text-disabled);
1190
+ .tl-icon--speedometer {
1191
+ mask-image: var(--icon-speedometer-svg);
1192
+ background-color: currentcolor;
1558
1193
  }
1559
- .tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__charcounter {
1560
- color: var(--text-field-error);
1194
+ .tl-icon--speedometer_inactive {
1195
+ mask-image: var(--icon-speedometer_inactive-svg);
1196
+ background-color: currentcolor;
1561
1197
  }
1562
- .tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
1563
- color: var(--text-field-error);
1198
+ .tl-icon--star {
1199
+ mask-image: var(--icon-star-svg);
1200
+ background-color: currentcolor;
1564
1201
  }
1565
-
1566
- .tl-text-field__charcounter-divider {
1567
- color: var(--color-foreground-text-disabled);
1202
+ .tl-icon--support {
1203
+ mask-image: var(--icon-support-svg);
1204
+ background-color: currentcolor;
1568
1205
  }
1569
-
1570
- .tl-text-field__prefix {
1571
- font-family: var(--detail-02-font-family);
1572
- font-size: var(--detail-02-font-size);
1573
- line-height: var(--detail-02-line-height);
1574
- font-weight: var(--detail-02-font-weight);
1575
- letter-spacing: var(--detail-02-letter-spacing);
1576
- text-transform: var(--detail-02-text-transform);
1577
- color: var(--text-field-affix);
1578
- align-self: center;
1579
- display: flex;
1580
- align-items: center;
1581
- z-index: 1;
1582
- position: relative;
1206
+ .tl-icon--target {
1207
+ mask-image: var(--icon-target-svg);
1208
+ background-color: currentcolor;
1583
1209
  }
1584
- .tl-text-field__prefix--text, .tl-text-field__prefix--icon {
1585
- position: absolute;
1586
- left: 16px;
1587
- top: 50%;
1588
- transform: translateY(calc(-50% - 1px));
1589
- z-index: 1;
1210
+ .tl-icon--target_inactive {
1211
+ mask-image: var(--icon-target_inactive-svg);
1212
+ background-color: currentcolor;
1590
1213
  }
1591
- .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--icon {
1592
- transform: translateY(calc(-50% + 24px));
1214
+ .tl-icon--temperature {
1215
+ mask-image: var(--icon-temperature-svg);
1216
+ background-color: currentcolor;
1593
1217
  }
1594
- .tl-text-field--disabled .tl-text-field__prefix--text, .tl-text-field--disabled .tl-text-field__prefix--icon {
1595
- color: var(--text-field-affix-disabled);
1218
+ .tl-icon--temperature_inactive {
1219
+ mask-image: var(--icon-temperature_inactive-svg);
1220
+ background-color: currentcolor;
1596
1221
  }
1597
- .tl-text-field--disabled .tl-text-field__prefix--text > *, .tl-text-field--disabled .tl-text-field__prefix--icon > * {
1598
- color: var(--text-field-affix-disabled);
1222
+ .tl-icon--text {
1223
+ mask-image: var(--icon-text-svg);
1224
+ background-color: currentcolor;
1599
1225
  }
1600
- .tl-text-field--disabled .tl-text-field__prefix--text .tl-icon, .tl-text-field--disabled .tl-text-field__prefix--icon .tl-icon {
1601
- background-color: var(--text-field-affix-disabled);
1226
+ .tl-icon--text_inactive {
1227
+ mask-image: var(--icon-text_inactive-svg);
1228
+ background-color: currentcolor;
1602
1229
  }
1603
- .tl-text-field--disabled .tl-text-field__prefix--icon.tl-icon {
1604
- background-color: var(--text-field-affix-disabled);
1230
+ .tl-icon--thumbs_down {
1231
+ mask-image: var(--icon-thumbs_down-svg);
1232
+ background-color: currentcolor;
1605
1233
  }
1606
-
1607
- .tl-text-field__suffix {
1608
- font-family: var(--detail-02-font-family);
1609
- font-size: var(--detail-02-font-size);
1610
- line-height: var(--detail-02-line-height);
1611
- font-weight: var(--detail-02-font-weight);
1612
- letter-spacing: var(--detail-02-letter-spacing);
1613
- text-transform: var(--detail-02-text-transform);
1614
- color: var(--text-field-affix);
1615
- align-self: center;
1616
- display: flex;
1617
- align-items: center;
1618
- z-index: 1;
1619
- position: relative;
1234
+ .tl-icon--thumbs_up {
1235
+ mask-image: var(--icon-thumbs_up-svg);
1236
+ background-color: currentcolor;
1620
1237
  }
1621
- .tl-text-field__suffix--text, .tl-text-field__suffix--icon {
1622
- position: absolute;
1623
- right: 16px;
1624
- top: 50%;
1625
- transform: translateY(calc(-50% - 1px));
1626
- z-index: 1;
1238
+ .tl-icon--tick {
1239
+ mask-image: var(--icon-tick-svg);
1240
+ background-color: currentcolor;
1627
1241
  }
1628
- .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
1629
- transform: translateY(calc(-50% + 24px));
1242
+ .tl-icon--timer {
1243
+ mask-image: var(--icon-timer-svg);
1244
+ background-color: currentcolor;
1630
1245
  }
1631
- .tl-text-field--disabled .tl-text-field__suffix--text, .tl-text-field--disabled .tl-text-field__suffix--icon {
1632
- color: var(--text-field-affix-disabled);
1246
+ .tl-icon--tool {
1247
+ mask-image: var(--icon-tool-svg);
1248
+ background-color: currentcolor;
1633
1249
  }
1634
- .tl-text-field--disabled .tl-text-field__suffix--text > *, .tl-text-field--disabled .tl-text-field__suffix--icon > * {
1635
- color: var(--text-field-affix-disabled);
1250
+ .tl-icon--tool_inactive {
1251
+ mask-image: var(--icon-tool_inactive-svg);
1252
+ background-color: currentcolor;
1636
1253
  }
1637
- .tl-text-field--disabled .tl-text-field__suffix--text .tl-icon,
1638
- .tl-text-field--disabled .tl-text-field__suffix--text > .tl-icon, .tl-text-field--disabled .tl-text-field__suffix--icon .tl-icon,
1639
- .tl-text-field--disabled .tl-text-field__suffix--icon > .tl-icon {
1640
- background-color: var(--text-field-affix-disabled) !important;
1254
+ .tl-icon--trailer {
1255
+ mask-image: var(--icon-trailer-svg);
1256
+ background-color: currentcolor;
1641
1257
  }
1642
-
1643
- .tl-text-field__suffix {
1644
- font-family: var(--detail-02-font-family);
1645
- font-size: var(--detail-02-font-size);
1646
- line-height: var(--detail-02-line-height);
1647
- font-weight: var(--detail-02-font-weight);
1648
- letter-spacing: var(--detail-02-letter-spacing);
1649
- text-transform: var(--detail-02-text-transform);
1650
- color: var(--text-field-affix);
1651
- align-self: center;
1652
- display: flex;
1653
- align-items: center;
1654
- z-index: 1;
1655
- position: relative;
1656
- right: 16px;
1657
- padding-right: 0;
1658
- z-index: 1;
1258
+ .tl-icon--trailer_inactive {
1259
+ mask-image: var(--icon-trailer_inactive-svg);
1260
+ background-color: currentcolor;
1659
1261
  }
1660
- .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
1661
- transform: translateY(calc(-50% + 24px));
1262
+ .tl-icon--trash {
1263
+ mask-image: var(--icon-trash-svg);
1264
+ background-color: currentcolor;
1662
1265
  }
1663
- .tl-text-field--disabled .tl-text-field__suffix--text, .tl-text-field--disabled .tl-text-field__suffix--icon {
1664
- color: var(--text-field-affix-disabled);
1266
+ .tl-icon--trash_inactive {
1267
+ mask-image: var(--icon-trash_inactive-svg);
1268
+ background-color: currentcolor;
1665
1269
  }
1666
- .tl-text-field--disabled .tl-text-field__suffix--text > *, .tl-text-field--disabled .tl-text-field__suffix--icon > * {
1667
- color: var(--text-field-affix-disabled);
1270
+ .tl-icon--truck {
1271
+ mask-image: var(--icon-truck-svg);
1272
+ background-color: currentcolor;
1668
1273
  }
1669
- .tl-text-field--disabled .tl-text-field__suffix--text .tl-icon,
1670
- .tl-text-field--disabled .tl-text-field__suffix--text > .tl-icon, .tl-text-field--disabled .tl-text-field__suffix--icon .tl-icon,
1671
- .tl-text-field--disabled .tl-text-field__suffix--icon > .tl-icon {
1672
- background-color: var(--text-field-affix-disabled);
1274
+ .tl-icon--truck_inactive {
1275
+ mask-image: var(--icon-truck_inactive-svg);
1276
+ background-color: currentcolor;
1673
1277
  }
1674
- .tl-text-field--disabled .tl-text-field__suffix--icon.tl-icon {
1675
- background-color: var(--text-field-affix-disabled);
1278
+ .tl-icon--undo {
1279
+ mask-image: var(--icon-undo-svg);
1280
+ background-color: currentcolor;
1676
1281
  }
1677
-
1678
- .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
1679
- .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
1680
- font-family: var(--detail-07-font-family);
1681
- font-size: var(--detail-07-font-size);
1682
- line-height: var(--detail-07-line-height);
1683
- font-weight: var(--detail-07-font-weight);
1684
- letter-spacing: var(--detail-07-letter-spacing);
1685
- text-transform: var(--detail-07-text-transform);
1686
- top: 7.5px;
1687
- left: var(--text-field-label-inside-left, 16px);
1688
- transform: none;
1689
- }
1690
- .tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
1691
- .tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
1692
- left: 44px;
1693
- }
1694
- .tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
1695
- .tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
1696
- left: calc(16px + var(--text-field-affix-width-text) + 8px);
1282
+ .tl-icon--undo_inactive {
1283
+ mask-image: var(--icon-undo_inactive-svg);
1284
+ background-color: currentcolor;
1697
1285
  }
1698
-
1699
- .tl-button {
1700
- --button-transparent: transparent;
1701
- --button-white: var(--color-brand-neutral-white);
1702
- --button-black: var(--color-brand-neutral-black);
1703
- --button-radius: var(--dimension-radius-for-surface-clickable);
1704
- --button-sm-only-icon-padding: 11px;
1705
- --button-md-only-icon-padding: 13px;
1706
- --button-lg-only-icon-padding: 17px;
1707
- --button-primary-background: var(--color-background-accent-primary-default);
1708
- --button-primary-background-hover: var(--color-background-accent-primary-hover);
1709
- --button-primary-background-active: var(--color-background-accent-primary-pressed);
1710
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
1711
- --button-primary-color: var(--component-button-primary-text);
1712
- --button-primary-color-disabled: var(--color-foreground-text-disabled);
1713
- --button-primary-border-color: var(--button-transparent);
1714
- --button-primary-border-color-disabled: var(--button-transparent);
1715
- --button-primary-background-focus: var(--color-background-accent-primary-focus);
1716
- --button-primary-color-focus: var(--component-button-primary-text);
1717
- --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
1718
- --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
1719
- --button-secondary-background: var(--button-transparent);
1720
- --button-secondary-color: var(--color-foreground-text-strong);
1721
- --button-secondary-border-color: var(--color-foreground-border-soft);
1722
- --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
1723
- --button-secondary-border-color-active: var(--color-foreground-border-strong);
1724
- --button-secondary-background-disabled: var(--button-transparent);
1725
- --button-secondary-color-disabled: var(--color-foreground-text-disabled);
1726
- --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
1727
- --button-secondary-background-focus: var(--button-transparent);
1728
- --button-secondary-color-focus: var(--color-foreground-text-strong);
1729
- --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
1730
- --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
1731
- --button-ghost-background: var(--button-transparent);
1732
- --button-ghost-color: var(--color-foreground-text-strong);
1733
- --button-ghost-border-color: var(--button-transparent);
1734
- --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
1735
- --button-ghost-border-color-active: var(--color-foreground-border-strong);
1736
- --button-ghost-color-disabled: var(--color-foreground-text-disabled);
1737
- --button-ghost-border-color-disabled: var(--button-transparent);
1738
- --button-ghost-background-focus: var(--button-transparent);
1739
- --button-ghost-color-focus: var(--color-foreground-text-strong);
1740
- --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
1741
- --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
1742
- --button-danger-background: var(--color-background-accent-danger-default);
1743
- --button-danger-color: var(--button-white);
1744
- --button-danger-border-color: var(--button-transparent);
1745
- --button-danger-background-hover: var(--color-background-accent-danger-hover);
1746
- --button-danger-background-active: var(--color-background-accent-danger-pressed);
1747
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
1748
- --button-danger-color-disabled: var(--color-foreground-text-disabled);
1749
- --button-danger-border-color-disabled: var(--button-transparent);
1750
- --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
1751
- --button-danger-background-focus: var(--color-background-accent-danger-focus);
1752
- --button-danger-color-focus: var(--button-white);
1753
- --button-danger-border-color-focus: var(--button-transparent);
1754
- --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
1286
+ .tl-icon--unlock {
1287
+ mask-image: var(--icon-unlock-svg);
1288
+ background-color: currentcolor;
1755
1289
  }
1756
- .tl-button .tl-button--primary {
1757
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
1758
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
1290
+ .tl-icon--upload {
1291
+ mask-image: var(--icon-upload-svg);
1292
+ background-color: currentcolor;
1759
1293
  }
1760
- .tl-button .tl-button--secondary {
1761
- --button-primary-background-disabled: var(--button-white);
1762
- --button-danger-background-disabled: var(--button-white);
1294
+ .tl-icon--video {
1295
+ mask-image: var(--icon-video-svg);
1296
+ background-color: currentcolor;
1763
1297
  }
1764
-
1765
- .scania .tl-button {
1766
- --button-outline-width: 2px;
1298
+ .tl-icon--video_inactive {
1299
+ mask-image: var(--icon-video_inactive-svg);
1300
+ background-color: currentcolor;
1767
1301
  }
1768
-
1769
- .traton .tl-button {
1770
- --button-outline-width: 4px;
1302
+ .tl-icon--wallet {
1303
+ mask-image: var(--icon-wallet-svg);
1304
+ background-color: currentcolor;
1771
1305
  }
1772
-
1773
- /* Base button styles */
1774
- .tl-button {
1775
- box-sizing: border-box;
1306
+ .tl-icon--warning {
1307
+ mask-image: var(--icon-warning-svg);
1308
+ background-color: currentcolor;
1776
1309
  }
1777
- .tl-button * {
1778
- box-sizing: border-box;
1310
+ .tl-icon--weight {
1311
+ mask-image: var(--icon-weight-svg);
1312
+ background-color: currentcolor;
1779
1313
  }
1780
- .tl-button {
1781
- font-family: var(--detail-02-font-family);
1782
- font-size: var(--detail-02-font-size);
1783
- line-height: var(--detail-02-line-height);
1784
- font-weight: var(--detail-02-font-weight);
1785
- letter-spacing: var(--detail-02-letter-spacing);
1786
- text-transform: var(--detail-02-text-transform);
1787
- display: inline-flex;
1788
- align-items: center;
1789
- justify-content: center;
1790
- font-weight: 500;
1791
- border-radius: var(--button-radius);
1792
- border: 1px solid var(--button-secondary-border-color);
1793
- box-shadow: none;
1794
- position: relative;
1795
- text-decoration: none;
1796
- cursor: pointer;
1314
+ .tl-icon--weight_inactive {
1315
+ mask-image: var(--icon-weight_inactive-svg);
1316
+ background-color: currentcolor;
1797
1317
  }
1798
- .tl-button:focus-visible {
1799
- outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
1800
- outline-offset: calc(var(--button-outline-width) * -1);
1318
+ .tl-icon--wifi {
1319
+ mask-image: var(--icon-wifi-svg);
1320
+ background-color: currentcolor;
1801
1321
  }
1802
- .tl-button {
1803
- /* Variants */
1322
+ .tl-icon--wifi_inactive {
1323
+ mask-image: var(--icon-wifi_inactive-svg);
1324
+ background-color: currentcolor;
1804
1325
  }
1805
- .tl-button--primary {
1806
- background-color: var(--button-primary-background);
1807
- color: var(--button-primary-color);
1808
- border-color: var(--button-primary-border-color);
1326
+ .tl-icon--windscreen_heating {
1327
+ mask-image: var(--icon-windscreen_heating-svg);
1328
+ background-color: currentcolor;
1809
1329
  }
1810
- .tl-button--primary:hover:not(:disabled) {
1811
- background-color: var(--button-primary-background-hover);
1330
+ .tl-icon--windscreen_heating_inactive {
1331
+ mask-image: var(--icon-windscreen_heating_inactive-svg);
1332
+ background-color: currentcolor;
1812
1333
  }
1813
- .tl-button--primary:disabled {
1814
- background-color: var(--button-primary-background-disabled);
1815
- color: var(--button-primary-color-disabled);
1816
- border-color: var(--button-primary-border-color-disabled);
1817
- cursor: not-allowed;
1818
- opacity: 0.6;
1334
+ .tl-icon--12 {
1335
+ width: 12px;
1336
+ height: 12px;
1819
1337
  }
1820
- .tl-button--primary:focus-visible:not(:disabled) {
1821
- background: var(--button-primary-background-focus);
1822
- border-color: var(--button-primary-border-color-focus);
1823
- color: var(--button-primary-color-focus);
1824
- outline-color: var(--button-primary-outline-color-focus);
1338
+ .tl-icon--14 {
1339
+ width: 14px;
1340
+ height: 14px;
1825
1341
  }
1826
- .tl-button--primary:active:not(:disabled):focus-visible {
1827
- outline: none;
1828
- outline-offset: none;
1342
+ .tl-icon--16 {
1343
+ width: 16px;
1344
+ height: 16px;
1829
1345
  }
1830
- .tl-button--primary:active:not(:disabled) {
1831
- background-color: var(--button-primary-background-active);
1832
- border-color: var(--button-primary-background-active);
1346
+ .tl-icon--18 {
1347
+ width: 18px;
1348
+ height: 18px;
1833
1349
  }
1834
- .tl-button--secondary {
1835
- background-color: var(--button-secondary-background);
1836
- color: var(--button-secondary-color);
1837
- border-color: var(--button-secondary-border-color);
1350
+ .tl-icon--20 {
1351
+ width: 20px;
1352
+ height: 20px;
1838
1353
  }
1839
- .tl-button--secondary:hover:not(:disabled) {
1840
- border-color: var(--button-secondary-border-color-hover);
1354
+ .tl-icon--22 {
1355
+ width: 22px;
1356
+ height: 22px;
1841
1357
  }
1842
- .tl-button--secondary:disabled {
1843
- background-color: var(--button-secondary-background-disabled);
1844
- color: var(--button-secondary-color-disabled);
1845
- border-color: var(--button-secondary-border-color-disabled);
1846
- cursor: not-allowed;
1847
- opacity: 0.6;
1358
+ .tl-icon--24 {
1359
+ width: 24px;
1360
+ height: 24px;
1848
1361
  }
1849
- .tl-button--secondary:focus-visible:not(:disabled) {
1850
- background: var(--button-secondary-background-focus);
1851
- border-color: var(--button-secondary-border-color-focus);
1852
- color: var(--button-secondary-color-focus);
1853
- outline-color: var(--button-secondary-outline-color-focus);
1362
+ .tl-icon--26 {
1363
+ width: 26px;
1364
+ height: 26px;
1854
1365
  }
1855
- .tl-button--secondary:active:not(:disabled):focus-visible {
1856
- outline: none;
1366
+ .tl-icon--28 {
1367
+ width: 28px;
1368
+ height: 28px;
1857
1369
  }
1858
- .tl-button--secondary:active:not(:disabled) {
1859
- border-color: var(--button-secondary-border-color-active);
1370
+ .tl-icon--30 {
1371
+ width: 30px;
1372
+ height: 30px;
1860
1373
  }
1861
- .tl-button--ghost {
1862
- background-color: var(--button-ghost-background);
1863
- color: var(--button-ghost-color);
1864
- border-color: var(--button-ghost-border-color);
1374
+ .tl-icon--32 {
1375
+ width: 32px;
1376
+ height: 32px;
1865
1377
  }
1866
- .tl-button--ghost:hover:not(:disabled) {
1867
- border-color: var(--button-ghost-border-color-hover);
1378
+ .tl-icon--34 {
1379
+ width: 34px;
1380
+ height: 34px;
1868
1381
  }
1869
- .tl-button--ghost:disabled {
1870
- color: var(--button-ghost-color-disabled);
1871
- cursor: not-allowed;
1872
- opacity: 0.6;
1382
+ .tl-icon--36 {
1383
+ width: 36px;
1384
+ height: 36px;
1873
1385
  }
1874
- .tl-button--ghost:focus-visible:not(:disabled) {
1875
- background: var(--button-ghost-background-focus);
1876
- border-color: var(--button-ghost-border-color-focus);
1877
- color: var(--button-ghost-color-focus);
1878
- outline-color: var(--button-ghost-outline-color-focus);
1386
+ .tl-icon--38 {
1387
+ width: 38px;
1388
+ height: 38px;
1879
1389
  }
1880
- .tl-button--ghost:active:not(:disabled):focus-visible {
1881
- outline: none;
1390
+ .tl-icon--40 {
1391
+ width: 40px;
1392
+ height: 40px;
1882
1393
  }
1883
- .tl-button--ghost:active:not(:disabled) {
1884
- border-color: var(--button-ghost-border-color-active);
1394
+ .tl-icon--42 {
1395
+ width: 42px;
1396
+ height: 42px;
1885
1397
  }
1886
- .tl-button--danger {
1887
- background-color: var(--button-danger-background);
1888
- color: var(--button-danger-color);
1889
- border-color: var(--button-danger-border-color);
1398
+ .tl-icon--44 {
1399
+ width: 44px;
1400
+ height: 44px;
1890
1401
  }
1891
- .tl-button--danger:hover:not(:disabled) {
1892
- background-color: var(--button-danger-background-hover);
1402
+ .tl-icon--46 {
1403
+ width: 46px;
1404
+ height: 46px;
1893
1405
  }
1894
- .tl-button--danger:disabled {
1895
- background-color: var(--button-danger-background-disabled);
1896
- color: var(--button-danger-color-disabled);
1897
- border-color: var(--button-danger-border-color-disabled);
1898
- cursor: not-allowed;
1899
- opacity: 0.6;
1406
+ .tl-icon--48 {
1407
+ width: 48px;
1408
+ height: 48px;
1900
1409
  }
1901
- .tl-button--danger:focus-visible:not(:disabled) {
1902
- background: var(--button-danger-background-focus);
1903
- border-color: var(--button-danger-border-color-focus);
1904
- color: var(--button-danger-color-focus);
1905
- outline-color: var(--button-danger-outline-color-focus);
1410
+ .tl-icon--50 {
1411
+ width: 50px;
1412
+ height: 50px;
1906
1413
  }
1907
- .tl-button--danger:active:not(:disabled):focus-visible {
1908
- outline: none;
1414
+ .tl-icon--52 {
1415
+ width: 52px;
1416
+ height: 52px;
1909
1417
  }
1910
- .tl-button--danger:active:not(:disabled) {
1911
- background-color: var(--button-danger-background-active);
1912
- border-color: var(--button-danger-border-color-active);
1418
+ .tl-icon--54 {
1419
+ width: 54px;
1420
+ height: 54px;
1913
1421
  }
1914
- .tl-button {
1915
- /* Sizes */
1422
+ .tl-icon--56 {
1423
+ width: 56px;
1424
+ height: 56px;
1916
1425
  }
1917
- .tl-button--xs {
1918
- padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
1919
- height: 24px;
1426
+ .tl-icon--58 {
1427
+ width: 58px;
1428
+ height: 58px;
1920
1429
  }
1921
- .tl-button--sm {
1922
- padding: var(--tds-spacing-element-12);
1923
- height: 40px;
1430
+ .tl-icon--60 {
1431
+ width: 60px;
1432
+ height: 60px;
1924
1433
  }
1925
- .tl-button--md {
1926
- padding: var(--tds-spacing-element-16);
1927
- height: 48px;
1434
+ .tl-icon--62 {
1435
+ width: 62px;
1436
+ height: 62px;
1928
1437
  }
1929
- .tl-button--lg {
1930
- padding: var(--tds-spacing-element-20);
1931
- height: 56px;
1438
+ .tl-icon--64 {
1439
+ width: 64px;
1440
+ height: 64px;
1932
1441
  }
1933
- .tl-button {
1934
- /* Icon specific styles */
1442
+ .tl-icon--66 {
1443
+ width: 66px;
1444
+ height: 66px;
1935
1445
  }
1936
- .tl-button--icon.tl-button--sm {
1937
- padding: 10px var(--tds-spacing-element-12);
1446
+ .tl-icon--68 {
1447
+ width: 68px;
1448
+ height: 68px;
1938
1449
  }
1939
- .tl-button--icon.tl-button--sm .tl-icon {
1940
- margin-left: var(--tds-spacing-element-12);
1450
+ .tl-icon--70 {
1451
+ width: 70px;
1452
+ height: 70px;
1941
1453
  }
1942
- .tl-button--icon.tl-button--md {
1943
- padding: 14px var(--tds-spacing-element-16);
1454
+ .tl-icon--72 {
1455
+ width: 72px;
1456
+ height: 72px;
1944
1457
  }
1945
- .tl-button--icon.tl-button--md .tl-icon {
1946
- margin-left: var(--tds-spacing-element-16);
1458
+ .tl-icon--74 {
1459
+ width: 74px;
1460
+ height: 74px;
1947
1461
  }
1948
- .tl-button--icon.tl-button--lg {
1949
- padding: 18px var(--tds-spacing-element-20);
1462
+ .tl-icon--76 {
1463
+ width: 76px;
1464
+ height: 76px;
1950
1465
  }
1951
- .tl-button--icon.tl-button--lg .tl-icon {
1952
- margin-left: var(--tds-spacing-element-20);
1466
+ .tl-icon--78 {
1467
+ width: 78px;
1468
+ height: 78px;
1953
1469
  }
1954
- .tl-button {
1955
- /* Only icon specific styles */
1470
+ .tl-icon--80 {
1471
+ width: 80px;
1472
+ height: 80px;
1956
1473
  }
1957
- .tl-button--only-icon.tl-button--sm {
1958
- padding: var(--button-sm-only-icon-padding);
1474
+ .tl-icon--82 {
1475
+ width: 82px;
1476
+ height: 82px;
1959
1477
  }
1960
- .tl-button--only-icon.tl-button--sm .tl-icon {
1961
- margin-left: 0;
1478
+ .tl-icon--84 {
1479
+ width: 84px;
1480
+ height: 84px;
1962
1481
  }
1963
- .tl-button--only-icon.tl-button--md {
1964
- padding: var(--button-md-only-icon-padding);
1482
+ .tl-icon--86 {
1483
+ width: 86px;
1484
+ height: 86px;
1965
1485
  }
1966
- .tl-button--only-icon.tl-button--md .tl-icon {
1967
- margin-left: 0;
1486
+ .tl-icon--88 {
1487
+ width: 88px;
1488
+ height: 88px;
1968
1489
  }
1969
- .tl-button--only-icon.tl-button--lg {
1970
- padding: var(--button-lg-only-icon-padding);
1490
+ .tl-icon--90 {
1491
+ width: 90px;
1492
+ height: 90px;
1971
1493
  }
1972
- .tl-button--only-icon.tl-button--lg .tl-icon {
1973
- margin-left: 0;
1494
+ .tl-icon--92 {
1495
+ width: 92px;
1496
+ height: 92px;
1974
1497
  }
1975
- .tl-button {
1976
- /* Full width */
1498
+ .tl-icon--94 {
1499
+ width: 94px;
1500
+ height: 94px;
1977
1501
  }
1978
- .tl-button--full-width {
1979
- width: 100%;
1502
+ .tl-icon--96 {
1503
+ width: 96px;
1504
+ height: 96px;
1980
1505
  }
1981
1506
 
1982
1507
  .tl-slider {
@@ -2112,9 +1637,9 @@
2112
1637
 
2113
1638
  .tl-slider__input-wrapper {
2114
1639
  flex-shrink: 0;
2115
- width: auto;
1640
+ width: auto !important;
2116
1641
  height: auto;
2117
- min-width: auto;
1642
+ min-width: auto !important;
2118
1643
  margin-left: 0;
2119
1644
  align-self: center;
2120
1645
  }