@scania/tegel-lite 0.0.1-beta.8 → 0.0.1

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