@scania/tegel-lite 0.0.3-rules-beta.7 → 0.1.0-tl-header-test

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