@scania/tegel-lite 1.9.1 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components.css +711 -46
  2. package/dist/tl-badge.css +99 -0
  3. package/dist/tl-slider.css +2567 -0
  4. package/dist/tl-spinner.css +148 -0
  5. package/package.json +6 -3
package/dist/tl-slider.css ADDED
@@ -0,0 +1,2567 @@
1
+ /* Typography Usage mixins */
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ :root,
6
+ .tds-mode-light,
7
+ .scania .tds-mode-light,
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-slider-background-divider-default: var(--component-slider-background-track-default);
12
+ --component-slider-background-track-default: var(--scania-color-grey-350);
13
+ --component-slider-background-selected-default: var(--component-slider-background-thumb-default);
14
+ --component-slider-background-thumb-default: var(--scania-color-grey-950);
15
+ --component-slider-background-halo-hover: var(--scania-color-transparent-200);
16
+ --component-slider-background-halo-active: var(--scania-color-transparent-250);
17
+ --component-slider-icon-control-default: var(--color-icon-defined);
18
+ --component-slider-opacity-disabled: var(--scania-opacity-25);
19
+ --component-slider-text-label-default: var(--scania-color-grey-950);
20
+ --component-slider-text-value-default: var(--color-text-defined);
21
+ }
22
+
23
+ .traton .tds-mode-light,
24
+ .traton.tds-mode-light,
25
+ .traton .tl-mode-light,
26
+ .traton.tl-mode-light {
27
+ --component-slider-background-divider-default: var(--component-slider-background-track-default);
28
+ --component-slider-background-track-default: var(--traton-color-grey-500);
29
+ --component-slider-background-selected-default: var(--component-slider-background-thumb-default);
30
+ --component-slider-background-thumb-default: var(--traton-color-blue-950);
31
+ --component-slider-background-halo-hover: var(--color-icon-discrete);
32
+ --component-slider-background-halo-active: var(--color-icon-disabled);
33
+ --component-slider-icon-control-default: var(--color-icon-defined);
34
+ --component-slider-opacity-disabled: var(--traton-opacity-25);
35
+ --component-slider-text-label-default: var(--traton-color-blue-950);
36
+ --component-slider-text-value-default: var(--color-text-defined);
37
+ }
38
+
39
+ .tds-mode-dark,
40
+ .scania .tds-mode-dark,
41
+ .scania.tds-mode-dark,
42
+ .scania .tl-mode-dark,
43
+ .scania.tl-mode-dark {
44
+ --component-slider-background-divider-default: var(--component-slider-background-track-default);
45
+ --component-slider-background-track-default: var(--scania-color-grey-400);
46
+ --component-slider-background-selected-default: var(--component-slider-background-thumb-default);
47
+ --component-slider-background-thumb-default: var(--scania-color-grey-50);
48
+ --component-slider-background-halo-hover: var(--color-icon-discrete);
49
+ --component-slider-background-halo-active: var(--color-icon-disabled);
50
+ --component-slider-icon-control-default: var(--color-icon-defined);
51
+ --component-slider-opacity-disabled: var(--scania-opacity-25);
52
+ --component-slider-text-label-default: var(--scania-color-grey-50);
53
+ --component-slider-text-value-default: var(--color-text-defined);
54
+ }
55
+
56
+ .traton .tds-mode-dark,
57
+ .traton.tds-mode-dark,
58
+ .traton .tl-mode-dark,
59
+ .traton.tl-mode-dark {
60
+ --component-slider-background-divider-default: var(--component-slider-background-track-default);
61
+ --component-slider-background-track-default: var(--traton-color-blue-850);
62
+ --component-slider-background-selected-default: var(--component-slider-background-thumb-default);
63
+ --component-slider-background-thumb-default: var(--traton-color-base-white);
64
+ --component-slider-background-halo-hover: var(--color-icon-discrete);
65
+ --component-slider-background-halo-active: var(--color-icon-disabled);
66
+ --component-slider-icon-control-default: var(--color-icon-defined);
67
+ --component-slider-opacity-disabled: var(--traton-opacity-25);
68
+ --component-slider-text-label-default: var(--traton-color-base-white);
69
+ --component-slider-text-value-default: var(--color-text-defined);
70
+ }
71
+
72
+ /**
73
+ * Do not edit directly, this file was auto-generated.
74
+ */
75
+ :root,
76
+ .tds-mode-light,
77
+ .scania .tds-mode-light,
78
+ .scania.tds-mode-light,
79
+ .scania .tl-mode-light,
80
+ .scania.tl-mode-light {
81
+ --component-tooltip-background-default: var(--color-background-inverse-layer-03);
82
+ --component-tooltip-border-radius-none: var(--scania-unit-0);
83
+ --component-tooltip-border-radius-default: var(--scania-unit-4);
84
+ --component-tooltip-text-default: var(--color-text-inverse-strong);
85
+ }
86
+
87
+ .traton .tds-mode-light,
88
+ .traton.tds-mode-light,
89
+ .traton .tl-mode-light,
90
+ .traton.tl-mode-light {
91
+ --component-tooltip-background-default: var(--color-background-inverse-layer-03);
92
+ --component-tooltip-border-radius-none: var(--traton-unit-0);
93
+ --component-tooltip-border-radius-default: var(--traton-unit-4);
94
+ --component-tooltip-text-default: var(--color-text-inverse-strong);
95
+ }
96
+
97
+ .tds-mode-dark,
98
+ .scania .tds-mode-dark,
99
+ .scania.tds-mode-dark,
100
+ .scania .tl-mode-dark,
101
+ .scania.tl-mode-dark {
102
+ --component-tooltip-background-default: var(--color-background-inverse-layer-03);
103
+ --component-tooltip-border-radius-none: var(--scania-unit-0);
104
+ --component-tooltip-border-radius-default: var(--scania-unit-4);
105
+ --component-tooltip-text-default: var(--color-text-inverse-strong);
106
+ }
107
+
108
+ .traton .tds-mode-dark,
109
+ .traton.tds-mode-dark,
110
+ .traton .tl-mode-dark,
111
+ .traton.tl-mode-dark {
112
+ --component-tooltip-background-default: var(--color-background-inverse-layer-03);
113
+ --component-tooltip-border-radius-none: var(--traton-unit-0);
114
+ --component-tooltip-border-radius-default: var(--traton-unit-4);
115
+ --component-tooltip-text-default: var(--color-text-inverse-strong);
116
+ }
117
+
118
+ /**
119
+ * Do not edit directly, this file was auto-generated.
120
+ */
121
+ :root,
122
+ .tds-mode-light,
123
+ .scania .tds-mode-light,
124
+ .scania.tds-mode-light,
125
+ .scania .tl-mode-light,
126
+ .scania.tl-mode-light {
127
+ --component--input-background-primary: var(--color-background-layer-01);
128
+ --component--input-background-secondary: var(--color-background-layer-02);
129
+ --component--input-border-default: var(--color-border-soft);
130
+ --component--input-border-hover: var(--color-border-strong);
131
+ --component--input-border-success-default: var(--color-border-strong);
132
+ --component--input-border-error-default: var(--color-system-danger-default);
133
+ --component--input-border-radius-default: var(--scania-unit-4);
134
+ --component--input-border-radius-none: var(--scania-unit-0);
135
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
136
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
137
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
138
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
139
+ --component--input-border-width-default: var(--scania-unit-1);
140
+ --component--input-border-width-none: var(--scania-unit-0);
141
+ --component--input-border-width-top: var(--component--input-border-width-none);
142
+ --component--input-border-width-right: var(--component--input-border-width-none);
143
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
144
+ --component--input-border-width-left: var(--component--input-border-width-none);
145
+ --component--input-icon-prefix-default: var(--color-text-defined);
146
+ --component--input-icon-suffix-default: var(--color-text-defined);
147
+ --component--input-icon-error-default: var(--color-system-danger-default);
148
+ --component--input-icon-control-default: var(--color-icon-strong);
149
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
150
+ --component--input-opacity-disabled: var(--scania-opacity-25);
151
+ --component--input-text-counter-default: var(--color-text-defined);
152
+ --component--input-text-label-default: var(--color-text-strong);
153
+ --component--input-text-helper-default: var(--color-text-defined);
154
+ --component--input-text-placeholder-default: var(--color-text-soft);
155
+ --component--input-text-value-default: var(--color-text-strong);
156
+ --component--input-text-error-default: var(--color-system-danger-default);
157
+ }
158
+
159
+ .traton .tds-mode-light,
160
+ .traton.tds-mode-light,
161
+ .traton .tl-mode-light,
162
+ .traton.tl-mode-light {
163
+ --component--input-background-primary: var(--color-background-layer-01);
164
+ --component--input-background-secondary: var(--color-background-layer-02);
165
+ --component--input-border-default: var(--color-border-soft);
166
+ --component--input-border-hover: var(--color-border-strong);
167
+ --component--input-border-success-default: var(--color-border-strong);
168
+ --component--input-border-error-default: var(--color-system-danger-default);
169
+ --component--input-border-radius-default: var(--traton-unit-4);
170
+ --component--input-border-radius-none: var(--traton-unit-0);
171
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
172
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
173
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
174
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
175
+ --component--input-border-width-default: var(--traton-unit-1);
176
+ --component--input-border-width-none: var(--traton-unit-0);
177
+ --component--input-border-width-top: var(--component--input-border-width-default);
178
+ --component--input-border-width-right: var(--component--input-border-width-default);
179
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
180
+ --component--input-border-width-left: var(--component--input-border-width-default);
181
+ --component--input-icon-prefix-default: var(--color-text-defined);
182
+ --component--input-icon-suffix-default: var(--color-text-defined);
183
+ --component--input-icon-error-default: var(--color-system-danger-default);
184
+ --component--input-icon-control-default: var(--color-icon-subtle);
185
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
186
+ --component--input-opacity-disabled: var(--traton-opacity-25);
187
+ --component--input-text-counter-default: var(--color-text-defined);
188
+ --component--input-text-label-default: var(--color-text-strong);
189
+ --component--input-text-helper-default: var(--color-text-defined);
190
+ --component--input-text-placeholder-default: var(--color-text-subtle);
191
+ --component--input-text-value-default: var(--color-text-strong);
192
+ --component--input-text-error-default: var(--color-system-danger-default);
193
+ }
194
+
195
+ .tds-mode-dark,
196
+ .scania .tds-mode-dark,
197
+ .scania.tds-mode-dark,
198
+ .scania .tl-mode-dark,
199
+ .scania.tl-mode-dark {
200
+ --component--input-background-primary: var(--color-background-layer-01);
201
+ --component--input-background-secondary: var(--color-background-layer-02);
202
+ --component--input-border-default: var(--color-border-soft);
203
+ --component--input-border-hover: var(--color-border-strong);
204
+ --component--input-border-success-default: var(--color-border-strong);
205
+ --component--input-border-error-default: var(--color-system-danger-default);
206
+ --component--input-border-radius-default: var(--scania-unit-4);
207
+ --component--input-border-radius-none: var(--scania-unit-0);
208
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
209
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
210
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
211
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
212
+ --component--input-border-width-default: var(--scania-unit-1);
213
+ --component--input-border-width-none: var(--scania-unit-0);
214
+ --component--input-border-width-top: var(--component--input-border-width-none);
215
+ --component--input-border-width-right: var(--component--input-border-width-none);
216
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
217
+ --component--input-border-width-left: var(--component--input-border-width-none);
218
+ --component--input-icon-prefix-default: var(--color-text-defined);
219
+ --component--input-icon-suffix-default: var(--color-text-defined);
220
+ --component--input-icon-error-default: var(--color-system-danger-default);
221
+ --component--input-icon-control-default: var(--color-icon-strong);
222
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
223
+ --component--input-opacity-disabled: var(--scania-opacity-25);
224
+ --component--input-text-counter-default: var(--color-text-defined);
225
+ --component--input-text-label-default: var(--color-text-strong);
226
+ --component--input-text-helper-default: var(--color-text-defined);
227
+ --component--input-text-placeholder-default: var(--color-text-soft);
228
+ --component--input-text-value-default: var(--color-text-strong);
229
+ --component--input-text-error-default: var(--color-system-danger-default);
230
+ }
231
+
232
+ .traton .tds-mode-dark,
233
+ .traton.tds-mode-dark,
234
+ .traton .tl-mode-dark,
235
+ .traton.tl-mode-dark {
236
+ --component--input-background-primary: var(--color-background-layer-01);
237
+ --component--input-background-secondary: var(--color-background-layer-02);
238
+ --component--input-border-default: var(--color-border-soft);
239
+ --component--input-border-hover: var(--color-border-strong);
240
+ --component--input-border-success-default: var(--color-border-strong);
241
+ --component--input-border-error-default: var(--color-system-danger-default);
242
+ --component--input-border-radius-default: var(--traton-unit-4);
243
+ --component--input-border-radius-none: var(--traton-unit-0);
244
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
245
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
246
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
247
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
248
+ --component--input-border-width-default: var(--traton-unit-1);
249
+ --component--input-border-width-none: var(--traton-unit-0);
250
+ --component--input-border-width-top: var(--component--input-border-width-default);
251
+ --component--input-border-width-right: var(--component--input-border-width-default);
252
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
253
+ --component--input-border-width-left: var(--component--input-border-width-default);
254
+ --component--input-icon-prefix-default: var(--color-text-defined);
255
+ --component--input-icon-suffix-default: var(--color-text-defined);
256
+ --component--input-icon-error-default: var(--color-system-danger-default);
257
+ --component--input-icon-control-default: var(--color-icon-subtle);
258
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
259
+ --component--input-opacity-disabled: var(--traton-opacity-25);
260
+ --component--input-text-counter-default: var(--color-text-defined);
261
+ --component--input-text-label-default: var(--color-text-strong);
262
+ --component--input-text-helper-default: var(--color-text-defined);
263
+ --component--input-text-placeholder-default: var(--color-text-subtle);
264
+ --component--input-text-value-default: var(--color-text-strong);
265
+ --component--input-text-error-default: var(--color-system-danger-default);
266
+ }
267
+
268
+ .tl-slider {
269
+ --slider-label: var(--component-slider-text-label-default);
270
+ --slider-thumb: var(--component-slider-background-thumb-default);
271
+ --slider-thumb-hover: var(--component-slider-background-halo-hover);
272
+ --slider-thumb-active: var(--component-slider-background-halo-active);
273
+ --slider-track: var(--component-slider-background-track-default);
274
+ --slider-track-fill: var(--component-slider-background-selected-default);
275
+ --slider-divider: var(--component-slider-background-divider-default);
276
+ --slider-divider-values: var(--component-slider-text-value-default);
277
+ --slider-text-value: var(--component-slider-text-value-default);
278
+ --slider-input-value: var(--component--input-text-placeholder-default);
279
+ --slider-opacity-disabled: calc(var(--component-slider-opacity-disabled) / 100);
280
+ --slider-value-tooltip-background: var(--component-tooltip-background-default);
281
+ --slider-value-tooltip: var(--component-tooltip-text-default);
282
+ --slider-value-tooltip-border-radius: calc(var(--component-tooltip-border-radius-default) * 1px);
283
+ --slider-input-background: var(--component--input-background-primary);
284
+ --slider-controls-color: var(--component-slider-icon-control-default);
285
+ }
286
+
287
+ .tl-mode-variant-primary .tl-slider,
288
+ .tds-mode-variant-primary .tl-slider {
289
+ --slider-input-background: var(--component--input-background-primary);
290
+ }
291
+
292
+ .tl-mode-variant-secondary .tl-slider,
293
+ .tds-mode-variant-secondary .tl-slider {
294
+ --slider-input-background: var(--component--input-background-secondary);
295
+ }
296
+
297
+ /**
298
+ * Do not edit directly, this file was auto-generated.
299
+ */
300
+ :root,
301
+ .tds-mode-light,
302
+ .scania .tds-mode-light,
303
+ .scania.tds-mode-light,
304
+ .scania .tl-mode-light,
305
+ .scania.tl-mode-light {
306
+ --component-button-background-standard-primary-default: var(--scania-color-blue-600);
307
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
308
+ --component-button-background-standard-primary-active: var(--scania-color-blue-800);
309
+ --component-button-background-standard-secondary-default: var(--color-background-none);
310
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
311
+ --component-button-background-standard-secondary-active: var(--color-background-none);
312
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
313
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
314
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
315
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
316
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
317
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
318
+ --component-button-background-danger-secondary-default: var(--color-background-none);
319
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
320
+ --component-button-background-danger-secondary-active: var(--color-background-none);
321
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
322
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
323
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
324
+ --component-button-border-radius-default: var(--scania-unit-4);
325
+ --component-button-border-standard-primary-default: var(--color-border-none);
326
+ --component-button-border-standard-primary-hover: var(--color-border-none);
327
+ --component-button-border-standard-primary-active: var(--color-border-none);
328
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
329
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
330
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
331
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
332
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
333
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
334
+ --component-button-border-danger-primary-default: var(--color-border-none);
335
+ --component-button-border-danger-primary-hover: var(--color-border-none);
336
+ --component-button-border-danger-primary-active: var(--color-border-none);
337
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
338
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
339
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
340
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
341
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
342
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
343
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
344
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
345
+ --component-button-icon-standard-primary-hover: var(
346
+ --component-button-icon-standard-primary-default
347
+ );
348
+ --component-button-icon-standard-primary-active: var(
349
+ --component-button-icon-standard-primary-default
350
+ );
351
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-black);
352
+ --component-button-icon-standard-secondary-hover: var(
353
+ --component-button-icon-standard-secondary-default
354
+ );
355
+ --component-button-icon-standard-secondary-active: var(
356
+ --component-button-icon-standard-secondary-default
357
+ );
358
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-black);
359
+ --component-button-icon-standard-tertiary-hover: var(
360
+ --component-button-icon-standard-tertiary-default
361
+ );
362
+ --component-button-icon-standard-tertiary-active: var(
363
+ --component-button-icon-standard-tertiary-default
364
+ );
365
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
366
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
367
+ --component-button-icon-danger-primary-active: var(
368
+ --component-button-icon-danger-primary-default
369
+ );
370
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
371
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
372
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
373
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
374
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
375
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
376
+ --component-button-opacity-disabled: var(--scania-opacity-25);
377
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
378
+ --component-button-text-standard-primary-hover: var(
379
+ --component-button-text-standard-primary-default
380
+ );
381
+ --component-button-text-standard-primary-active: var(
382
+ --component-button-text-standard-primary-default
383
+ );
384
+ --component-button-text-standard-secondary-default: var(--scania-color-base-black);
385
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-black);
386
+ --component-button-text-standard-secondary-active: var(--scania-color-base-black);
387
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-black);
388
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-black);
389
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-black);
390
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
391
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
392
+ --component-button-text-danger-primary-active: var(
393
+ --component-button-text-danger-primary-default
394
+ );
395
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
396
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
397
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
398
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
399
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
400
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
401
+ }
402
+
403
+ .traton .tds-mode-light,
404
+ .traton.tds-mode-light,
405
+ .traton .tl-mode-light,
406
+ .traton.tl-mode-light {
407
+ --component-button-background-standard-primary-default: var(--traton-color-blue-800);
408
+ --component-button-background-standard-primary-hover: var(--traton-color-blue-850);
409
+ --component-button-background-standard-primary-active: var(--traton-color-blue-900);
410
+ --component-button-background-standard-secondary-default: var(--color-background-none);
411
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
412
+ --component-button-background-standard-secondary-active: var(--color-background-none);
413
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
414
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
415
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
416
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
417
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
418
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
419
+ --component-button-background-danger-secondary-default: var(--color-background-none);
420
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
421
+ --component-button-background-danger-secondary-active: var(--color-background-none);
422
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
423
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
424
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
425
+ --component-button-border-radius-default: var(--traton-unit-56);
426
+ --component-button-border-standard-primary-default: var(--color-border-none);
427
+ --component-button-border-standard-primary-hover: var(--color-border-none);
428
+ --component-button-border-standard-primary-active: var(--color-border-none);
429
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
430
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
431
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
432
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
433
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
434
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
435
+ --component-button-border-danger-primary-default: var(--color-border-none);
436
+ --component-button-border-danger-primary-hover: var(--color-border-none);
437
+ --component-button-border-danger-primary-active: var(--color-border-none);
438
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
439
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
440
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
441
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
442
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
443
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
444
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
445
+ --component-button-icon-standard-primary-default: var(--traton-color-base-white);
446
+ --component-button-icon-standard-primary-hover: var(
447
+ --component-button-text-standard-primary-default
448
+ );
449
+ --component-button-icon-standard-primary-active: var(
450
+ --component-button-text-standard-primary-default
451
+ );
452
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-black);
453
+ --component-button-icon-standard-secondary-hover: var(
454
+ --component-button-icon-standard-secondary-default
455
+ );
456
+ --component-button-icon-standard-secondary-active: var(
457
+ --component-button-icon-standard-secondary-default
458
+ );
459
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-black);
460
+ --component-button-icon-standard-tertiary-hover: var(
461
+ --component-button-icon-standard-tertiary-default
462
+ );
463
+ --component-button-icon-standard-tertiary-active: var(
464
+ --component-button-icon-standard-tertiary-default
465
+ );
466
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
467
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
468
+ --component-button-icon-danger-primary-active: var(
469
+ --component-button-icon-danger-primary-default
470
+ );
471
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
472
+ --component-button-icon-danger-secondary-hover: var(
473
+ --component-button-text-danger-secondary-default
474
+ );
475
+ --component-button-icon-danger-secondary-active: var(
476
+ --component-button-text-danger-secondary-default
477
+ );
478
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
479
+ --component-button-icon-danger-tertiary-hover: var(
480
+ --component-button-text-danger-tertiary-default
481
+ );
482
+ --component-button-icon-danger-tertiary-active: var(
483
+ --component-button-text-danger-tertiary-default
484
+ );
485
+ --component-button-opacity-disabled: var(--traton-opacity-25);
486
+ --component-button-text-standard-primary-default: var(--traton-color-base-white);
487
+ --component-button-text-standard-primary-hover: var(
488
+ --component-button-text-standard-primary-default
489
+ );
490
+ --component-button-text-standard-primary-active: var(
491
+ --component-button-text-standard-primary-default
492
+ );
493
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
494
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
495
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
496
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
497
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
498
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
499
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
500
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
501
+ --component-button-text-danger-primary-active: var(
502
+ --component-button-text-danger-primary-default
503
+ );
504
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
505
+ --component-button-text-danger-secondary-hover: var(
506
+ --component-button-text-danger-secondary-default
507
+ );
508
+ --component-button-text-danger-secondary-active: var(
509
+ --component-button-text-danger-secondary-default
510
+ );
511
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
512
+ --component-button-text-danger-tertiary-hover: var(
513
+ --component-button-text-danger-tertiary-default
514
+ );
515
+ --component-button-text-danger-tertiary-active: var(
516
+ --component-button-text-danger-tertiary-default
517
+ );
518
+ }
519
+
520
+ .tds-mode-dark,
521
+ .scania .tds-mode-dark,
522
+ .scania.tds-mode-dark,
523
+ .scania .tl-mode-dark,
524
+ .scania.tl-mode-dark {
525
+ --component-button-background-standard-primary-default: var(--scania-color-blue-400);
526
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-500);
527
+ --component-button-background-standard-primary-active: var(--scania-color-blue-600);
528
+ --component-button-background-standard-secondary-default: var(--color-background-none);
529
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
530
+ --component-button-background-standard-secondary-active: var(--color-background-none);
531
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
532
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
533
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
534
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
535
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
536
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
537
+ --component-button-background-danger-secondary-default: var(--color-background-none);
538
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
539
+ --component-button-background-danger-secondary-active: var(--color-background-none);
540
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
541
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
542
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
543
+ --component-button-border-radius-default: var(--scania-unit-4);
544
+ --component-button-border-standard-primary-default: var(--color-border-none);
545
+ --component-button-border-standard-primary-hover: var(--color-border-none);
546
+ --component-button-border-standard-primary-active: var(--color-border-none);
547
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
548
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
549
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
550
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
551
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
552
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
553
+ --component-button-border-danger-primary-default: var(--color-border-none);
554
+ --component-button-border-danger-primary-hover: var(--color-border-none);
555
+ --component-button-border-danger-primary-active: var(--color-border-none);
556
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
557
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
558
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
559
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
560
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
561
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
562
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
563
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
564
+ --component-button-icon-standard-primary-hover: var(
565
+ --component-button-icon-standard-primary-default
566
+ );
567
+ --component-button-icon-standard-primary-active: var(
568
+ --component-button-icon-standard-primary-default
569
+ );
570
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-white);
571
+ --component-button-icon-standard-secondary-hover: var(
572
+ --component-button-icon-standard-secondary-default
573
+ );
574
+ --component-button-icon-standard-secondary-active: var(
575
+ --component-button-icon-standard-secondary-default
576
+ );
577
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-white);
578
+ --component-button-icon-standard-tertiary-hover: var(
579
+ --component-button-icon-standard-tertiary-default
580
+ );
581
+ --component-button-icon-standard-tertiary-active: var(
582
+ --component-button-icon-standard-tertiary-default
583
+ );
584
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
585
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
586
+ --component-button-icon-danger-primary-active: var(
587
+ --component-button-icon-danger-primary-default
588
+ );
589
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
590
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
591
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
592
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
593
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
594
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
595
+ --component-button-opacity-disabled: var(--scania-opacity-25);
596
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
597
+ --component-button-text-standard-primary-hover: var(
598
+ --component-button-text-standard-primary-default
599
+ );
600
+ --component-button-text-standard-primary-active: var(
601
+ --component-button-text-standard-primary-default
602
+ );
603
+ --component-button-text-standard-secondary-default: var(--scania-color-base-white);
604
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-white);
605
+ --component-button-text-standard-secondary-active: var(--scania-color-base-white);
606
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-white);
607
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-white);
608
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-white);
609
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
610
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
611
+ --component-button-text-danger-primary-active: var(
612
+ --component-button-text-danger-primary-default
613
+ );
614
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
615
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
616
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
617
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
618
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
619
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
620
+ }
621
+
622
+ .traton .tds-mode-dark,
623
+ .traton.tds-mode-dark,
624
+ .traton .tl-mode-dark,
625
+ .traton.tl-mode-dark {
626
+ --component-button-background-standard-primary-default: var(--traton-color-grey-300);
627
+ --component-button-background-standard-primary-hover: var(--traton-color-grey-200);
628
+ --component-button-background-standard-primary-active: var(--traton-color-grey-400);
629
+ --component-button-background-standard-secondary-default: var(--color-background-none);
630
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
631
+ --component-button-background-standard-secondary-active: var(--color-background-none);
632
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
633
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
634
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
635
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
636
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
637
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
638
+ --component-button-background-danger-secondary-default: var(--color-background-none);
639
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
640
+ --component-button-background-danger-secondary-active: var(--color-background-none);
641
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
642
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
643
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
644
+ --component-button-border-radius-default: var(--traton-unit-56);
645
+ --component-button-border-standard-primary-default: var(--color-border-none);
646
+ --component-button-border-standard-primary-hover: var(--color-border-none);
647
+ --component-button-border-standard-primary-active: var(--color-border-none);
648
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
649
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
650
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
651
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
652
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
653
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
654
+ --component-button-border-danger-primary-default: var(--color-border-none);
655
+ --component-button-border-danger-primary-hover: var(--color-border-none);
656
+ --component-button-border-danger-primary-active: var(--color-border-none);
657
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
658
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
659
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
660
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
661
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
662
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
663
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
664
+ --component-button-icon-standard-primary-default: var(--traton-color-base-black);
665
+ --component-button-icon-standard-primary-hover: var(
666
+ --component-button-text-standard-primary-default
667
+ );
668
+ --component-button-icon-standard-primary-active: var(
669
+ --component-button-text-standard-primary-default
670
+ );
671
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-white);
672
+ --component-button-icon-standard-secondary-hover: var(
673
+ --component-button-icon-standard-secondary-default
674
+ );
675
+ --component-button-icon-standard-secondary-active: var(
676
+ --component-button-icon-standard-secondary-default
677
+ );
678
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-white);
679
+ --component-button-icon-standard-tertiary-hover: var(
680
+ --component-button-icon-standard-tertiary-default
681
+ );
682
+ --component-button-icon-standard-tertiary-active: var(
683
+ --component-button-icon-standard-tertiary-default
684
+ );
685
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
686
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
687
+ --component-button-icon-danger-primary-active: var(
688
+ --component-button-icon-danger-primary-default
689
+ );
690
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
691
+ --component-button-icon-danger-secondary-hover: var(
692
+ --component-button-text-danger-secondary-default
693
+ );
694
+ --component-button-icon-danger-secondary-active: var(
695
+ --component-button-text-danger-secondary-default
696
+ );
697
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
698
+ --component-button-icon-danger-tertiary-hover: var(
699
+ --component-button-text-danger-tertiary-default
700
+ );
701
+ --component-button-icon-danger-tertiary-active: var(
702
+ --component-button-text-danger-tertiary-default
703
+ );
704
+ --component-button-opacity-disabled: var(--traton-opacity-25);
705
+ --component-button-text-standard-primary-default: var(--traton-color-base-black);
706
+ --component-button-text-standard-primary-hover: var(
707
+ --component-button-text-standard-primary-default
708
+ );
709
+ --component-button-text-standard-primary-active: var(
710
+ --component-button-text-standard-primary-default
711
+ );
712
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
713
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
714
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
715
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
716
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
717
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
718
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
719
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
720
+ --component-button-text-danger-primary-active: var(
721
+ --component-button-text-danger-primary-default
722
+ );
723
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
724
+ --component-button-text-danger-secondary-hover: var(
725
+ --component-button-text-danger-secondary-default
726
+ );
727
+ --component-button-text-danger-secondary-active: var(
728
+ --component-button-text-danger-secondary-default
729
+ );
730
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
731
+ --component-button-text-danger-tertiary-hover: var(
732
+ --component-button-text-danger-tertiary-default
733
+ );
734
+ --component-button-text-danger-tertiary-active: var(
735
+ --component-button-text-danger-tertiary-default
736
+ );
737
+ }
738
+
739
+ .tl-button {
740
+ --button-radius: calc(var(--component-button-border-radius-default) * 1px);
741
+ --button-sm-only-icon-padding: 11px;
742
+ --button-md-only-icon-padding: 13px;
743
+ --button-lg-only-icon-padding: 17px;
744
+ --button-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
745
+ --button-primary-background: var(--component-button-background-standard-primary-default);
746
+ --button-primary-background-hover: var(--component-button-background-standard-primary-hover);
747
+ --button-primary-background-active: var(--component-button-background-standard-primary-active);
748
+ --button-primary-background-focus: var(--component-button-background-standard-primary-default);
749
+ --button-primary-color: var(--component-button-text-standard-primary-default);
750
+ --button-primary-color-focus: var(--component-button-text-standard-primary-hover);
751
+ --button-primary-border-color: var(--component-button-border-standard-primary-default);
752
+ --button-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
753
+ --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
754
+ --button-primary-icon-color: var(--component-button-icon-standard-primary-default);
755
+ --button-secondary-background: var(--component-button-background-standard-secondary-default);
756
+ --button-secondary-background-focus: var(
757
+ --component-button-background-standard-secondary-default
758
+ );
759
+ --button-secondary-color: var(--component-button-text-standard-secondary-default);
760
+ --button-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
761
+ --button-secondary-border-color: var(--component-button-border-standard-secondary-default);
762
+ --button-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
763
+ --button-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
764
+ --button-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
765
+ --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
766
+ --button-secondary-icon-color: var(--component-button-icon-standard-secondary-default);
767
+ --button-ghost-background: var(--component-button-background-standard-tertiary-default);
768
+ --button-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
769
+ --button-ghost-color: var(--component-button-text-standard-tertiary-default);
770
+ --button-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
771
+ --button-ghost-border-color: var(--component-button-border-standard-tertiary-default);
772
+ --button-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
773
+ --button-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
774
+ --button-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
775
+ --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
776
+ --button-ghost-icon-color: var(--component-button-icon-standard-tertiary-default);
777
+ --button-danger-background: var(--component-button-background-danger-primary-default);
778
+ --button-danger-background-hover: var(--component-button-background-danger-primary-hover);
779
+ --button-danger-background-active: var(--component-button-background-danger-primary-active);
780
+ --button-danger-background-focus: var(--component-button-background-danger-primary-default);
781
+ --button-danger-color: var(--component-button-text-danger-primary-default);
782
+ --button-danger-color-focus: var(--component-button-text-danger-primary-hover);
783
+ --button-danger-border-color: var(--component-button-border-danger-primary-default);
784
+ --button-danger-border-color-active: var(--component-button-border-danger-primary-active);
785
+ --button-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
786
+ --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
787
+ --button-danger-icon-color: var(--component-button-icon-danger-primary-default);
788
+ }
789
+
790
+ .scania .tl-button {
791
+ --button-outline-width: 2px;
792
+ }
793
+
794
+ .traton .tl-button {
795
+ --button-outline-width: 4px;
796
+ }
797
+
798
+ /* Base button styles */
799
+ .tl-button {
800
+ box-sizing: border-box;
801
+ }
802
+ .tl-button * {
803
+ box-sizing: border-box;
804
+ }
805
+ .tl-button {
806
+ font-family: var(--detail-02-font-family);
807
+ font-size: var(--detail-02-font-size);
808
+ line-height: var(--detail-02-line-height);
809
+ font-weight: var(--detail-02-font-weight);
810
+ letter-spacing: var(--detail-02-letter-spacing);
811
+ text-transform: var(--detail-02-text-transform);
812
+ display: inline-flex;
813
+ align-items: center;
814
+ justify-content: center;
815
+ font-weight: 500;
816
+ border-radius: var(--button-radius);
817
+ border: 1px solid var(--button-secondary-border-color);
818
+ box-shadow: none;
819
+ position: relative;
820
+ text-decoration: none;
821
+ cursor: pointer;
822
+ }
823
+ .tl-button:focus-visible {
824
+ outline: 2px solid var(--component--focus-ring-color-strong);
825
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
826
+ outline-offset: 1px;
827
+ z-index: 1;
828
+ }
829
+ .tl-button {
830
+ /* Variants */
831
+ }
832
+ .tl-button--primary {
833
+ background-color: var(--button-primary-background);
834
+ color: var(--button-primary-color);
835
+ border-color: var(--button-primary-border-color);
836
+ }
837
+ .tl-button--primary .tl-icon {
838
+ color: var(--button-primary-icon-color);
839
+ }
840
+ .tl-button--primary:hover:not(:disabled) {
841
+ background-color: var(--button-primary-background-hover);
842
+ }
843
+ .tl-button--primary:disabled {
844
+ cursor: not-allowed;
845
+ opacity: var(--button-opacity-disabled);
846
+ }
847
+ .tl-button--primary:focus-visible:not(:disabled) {
848
+ background: var(--button-primary-background-focus);
849
+ border-color: var(--button-primary-border-color-focus);
850
+ color: var(--button-primary-color-focus);
851
+ }
852
+ .tl-button--primary:active:not(:disabled):focus-visible {
853
+ outline: none;
854
+ box-shadow: none;
855
+ }
856
+ .tl-button--primary:active:not(:disabled) {
857
+ background-color: var(--button-primary-background-active);
858
+ border-color: var(--button-primary-background-active);
859
+ }
860
+ .tl-button--secondary {
861
+ background-color: var(--button-secondary-background);
862
+ color: var(--button-secondary-color);
863
+ border-color: var(--button-secondary-border-color);
864
+ }
865
+ .tl-button--secondary .tl-icon {
866
+ color: var(--button-secondary-icon-color);
867
+ }
868
+ .tl-button--secondary:hover:not(:disabled) {
869
+ border-color: var(--button-secondary-border-color-hover);
870
+ }
871
+ .tl-button--secondary:disabled {
872
+ cursor: not-allowed;
873
+ opacity: var(--button-opacity-disabled);
874
+ }
875
+ .tl-button--secondary:focus-visible:not(:disabled) {
876
+ background: var(--button-secondary-background-focus);
877
+ border-color: var(--button-secondary-border-color-focus);
878
+ color: var(--button-secondary-color-focus);
879
+ }
880
+ .tl-button--secondary:active:not(:disabled):focus-visible {
881
+ outline: none;
882
+ box-shadow: none;
883
+ }
884
+ .tl-button--secondary:active:not(:disabled) {
885
+ border-color: var(--button-secondary-border-color-active);
886
+ }
887
+ .tl-button--ghost {
888
+ background-color: var(--button-ghost-background);
889
+ color: var(--button-ghost-color);
890
+ border-color: var(--button-ghost-border-color);
891
+ }
892
+ .tl-button--ghost .tl-icon {
893
+ color: var(--button-ghost-icon-color);
894
+ }
895
+ .tl-button--ghost:hover:not(:disabled) {
896
+ border-color: var(--button-ghost-border-color-hover);
897
+ }
898
+ .tl-button--ghost:disabled {
899
+ cursor: not-allowed;
900
+ opacity: var(--button-opacity-disabled);
901
+ }
902
+ .tl-button--ghost:focus-visible:not(:disabled) {
903
+ background: var(--button-ghost-background-focus);
904
+ border-color: var(--button-ghost-border-color-focus);
905
+ color: var(--button-ghost-color-focus);
906
+ }
907
+ .tl-button--ghost:active:not(:disabled):focus-visible {
908
+ outline: none;
909
+ box-shadow: none;
910
+ }
911
+ .tl-button--ghost:active:not(:disabled) {
912
+ border-color: var(--button-ghost-border-color-active);
913
+ }
914
+ .tl-button--danger {
915
+ background-color: var(--button-danger-background);
916
+ color: var(--button-danger-color);
917
+ border-color: var(--button-danger-border-color);
918
+ }
919
+ .tl-button--danger .tl-icon {
920
+ color: var(--button-danger-icon-color);
921
+ }
922
+ .tl-button--danger:hover:not(:disabled) {
923
+ background-color: var(--button-danger-background-hover);
924
+ }
925
+ .tl-button--danger:disabled {
926
+ cursor: not-allowed;
927
+ opacity: var(--button-opacity-disabled);
928
+ }
929
+ .tl-button--danger:focus-visible:not(:disabled) {
930
+ background: var(--button-danger-background-focus);
931
+ border-color: var(--button-danger-border-color-focus);
932
+ color: var(--button-danger-color-focus);
933
+ }
934
+ .tl-button--danger:active:not(:disabled):focus-visible {
935
+ outline: none;
936
+ box-shadow: none;
937
+ }
938
+ .tl-button--danger:active:not(:disabled) {
939
+ background-color: var(--button-danger-background-active);
940
+ border-color: var(--button-danger-border-color-active);
941
+ }
942
+ .tl-button {
943
+ /* Sizes */
944
+ }
945
+ .tl-button--xs {
946
+ padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
947
+ height: 24px;
948
+ font-size: var(--detail-05-font-size);
949
+ }
950
+ .tl-button--sm {
951
+ padding: var(--tds-spacing-element-12);
952
+ height: 40px;
953
+ }
954
+ .tl-button--md {
955
+ padding: var(--tds-spacing-element-16);
956
+ height: 48px;
957
+ }
958
+ .tl-button--lg {
959
+ padding: var(--tds-spacing-element-20);
960
+ height: 56px;
961
+ }
962
+ .tl-button {
963
+ /* Icon specific styles */
964
+ }
965
+ .tl-button--icon.tl-button--sm {
966
+ padding: 10px var(--tds-spacing-element-12);
967
+ }
968
+ .tl-button--icon.tl-button--sm .tl-icon {
969
+ margin-left: var(--tds-spacing-element-12);
970
+ }
971
+ .tl-button--icon.tl-button--md {
972
+ padding: 14px var(--tds-spacing-element-16);
973
+ }
974
+ .tl-button--icon.tl-button--md .tl-icon {
975
+ margin-left: var(--tds-spacing-element-16);
976
+ }
977
+ .tl-button--icon.tl-button--lg {
978
+ padding: 18px var(--tds-spacing-element-20);
979
+ }
980
+ .tl-button--icon.tl-button--lg .tl-icon {
981
+ margin-left: var(--tds-spacing-element-20);
982
+ }
983
+ .tl-button {
984
+ /* Only icon specific styles */
985
+ }
986
+ .tl-button--only-icon.tl-button--sm {
987
+ padding: var(--button-sm-only-icon-padding);
988
+ }
989
+ .tl-button--only-icon.tl-button--sm .tl-icon {
990
+ margin-left: 0;
991
+ }
992
+ .tl-button--only-icon.tl-button--md {
993
+ padding: var(--button-md-only-icon-padding);
994
+ }
995
+ .tl-button--only-icon.tl-button--md .tl-icon {
996
+ margin-left: 0;
997
+ }
998
+ .tl-button--only-icon.tl-button--lg {
999
+ padding: var(--button-lg-only-icon-padding);
1000
+ }
1001
+ .tl-button--only-icon.tl-button--lg .tl-icon {
1002
+ margin-left: 0;
1003
+ }
1004
+ .tl-button {
1005
+ /* Full width */
1006
+ }
1007
+ .tl-button--full-width {
1008
+ width: 100%;
1009
+ }
1010
+
1011
+ /**
1012
+ * Do not edit directly, this file was auto-generated with ./scripts/icon-token-generation.mts
1013
+ */
1014
+ .tl-icon {
1015
+ display: inline-block;
1016
+ width: 20px;
1017
+ height: 20px;
1018
+ mask-repeat: no-repeat;
1019
+ mask-position: center;
1020
+ mask-size: contain;
1021
+ flex-shrink: 0;
1022
+ color: inherit;
1023
+ mask-image: none;
1024
+ }
1025
+ .tl-icon--24v_battery {
1026
+ mask-image: var(--icon-24v_battery-svg);
1027
+ background-color: currentcolor;
1028
+ }
1029
+ .tl-icon--24v_battery_inactive {
1030
+ mask-image: var(--icon-24v_battery_inactive-svg);
1031
+ background-color: currentcolor;
1032
+ }
1033
+ .tl-icon--acceleration {
1034
+ mask-image: var(--icon-acceleration-svg);
1035
+ background-color: currentcolor;
1036
+ }
1037
+ .tl-icon--acceleration_inactive {
1038
+ mask-image: var(--icon-acceleration_inactive-svg);
1039
+ background-color: currentcolor;
1040
+ }
1041
+ .tl-icon--adblue {
1042
+ mask-image: var(--icon-adblue-svg);
1043
+ background-color: currentcolor;
1044
+ }
1045
+ .tl-icon--adblue_inactive {
1046
+ mask-image: var(--icon-adblue_inactive-svg);
1047
+ background-color: currentcolor;
1048
+ }
1049
+ .tl-icon--agent {
1050
+ mask-image: var(--icon-agent-svg);
1051
+ background-color: currentcolor;
1052
+ }
1053
+ .tl-icon--arrow_diagonal {
1054
+ mask-image: var(--icon-arrow_diagonal-svg);
1055
+ background-color: currentcolor;
1056
+ }
1057
+ .tl-icon--arrow_down {
1058
+ mask-image: var(--icon-arrow_down-svg);
1059
+ background-color: currentcolor;
1060
+ }
1061
+ .tl-icon--arrow_left {
1062
+ mask-image: var(--icon-arrow_left-svg);
1063
+ background-color: currentcolor;
1064
+ }
1065
+ .tl-icon--arrow_right {
1066
+ mask-image: var(--icon-arrow_right-svg);
1067
+ background-color: currentcolor;
1068
+ }
1069
+ .tl-icon--arrow_up {
1070
+ mask-image: var(--icon-arrow_up-svg);
1071
+ background-color: currentcolor;
1072
+ }
1073
+ .tl-icon--audio {
1074
+ mask-image: var(--icon-audio-svg);
1075
+ background-color: currentcolor;
1076
+ }
1077
+ .tl-icon--audio_inactive {
1078
+ mask-image: var(--icon-audio_inactive-svg);
1079
+ background-color: currentcolor;
1080
+ }
1081
+ .tl-icon--award {
1082
+ mask-image: var(--icon-award-svg);
1083
+ background-color: currentcolor;
1084
+ }
1085
+ .tl-icon--back {
1086
+ mask-image: var(--icon-back-svg);
1087
+ background-color: currentcolor;
1088
+ }
1089
+ .tl-icon--backward {
1090
+ mask-image: var(--icon-backward-svg);
1091
+ background-color: currentcolor;
1092
+ }
1093
+ .tl-icon--backward_inactive {
1094
+ mask-image: var(--icon-backward_inactive-svg);
1095
+ background-color: currentcolor;
1096
+ }
1097
+ .tl-icon--bento {
1098
+ mask-image: var(--icon-bento-svg);
1099
+ background-color: currentcolor;
1100
+ }
1101
+ .tl-icon--bug {
1102
+ mask-image: var(--icon-bug-svg);
1103
+ background-color: currentcolor;
1104
+ }
1105
+ .tl-icon--bug_inactive {
1106
+ mask-image: var(--icon-bug_inactive-svg);
1107
+ background-color: currentcolor;
1108
+ }
1109
+ .tl-icon--burger {
1110
+ mask-image: var(--icon-burger-svg);
1111
+ background-color: currentcolor;
1112
+ }
1113
+ .tl-icon--bus {
1114
+ mask-image: var(--icon-bus-svg);
1115
+ background-color: currentcolor;
1116
+ }
1117
+ .tl-icon--bus_inactive {
1118
+ mask-image: var(--icon-bus_inactive-svg);
1119
+ background-color: currentcolor;
1120
+ }
1121
+ .tl-icon--cab_door {
1122
+ mask-image: var(--icon-cab_door-svg);
1123
+ background-color: currentcolor;
1124
+ }
1125
+ .tl-icon--calendar {
1126
+ mask-image: var(--icon-calendar-svg);
1127
+ background-color: currentcolor;
1128
+ }
1129
+ .tl-icon--calendar_inactive {
1130
+ mask-image: var(--icon-calendar_inactive-svg);
1131
+ background-color: currentcolor;
1132
+ }
1133
+ .tl-icon--camera {
1134
+ mask-image: var(--icon-camera-svg);
1135
+ background-color: currentcolor;
1136
+ }
1137
+ .tl-icon--camera_inactive {
1138
+ mask-image: var(--icon-camera_inactive-svg);
1139
+ background-color: currentcolor;
1140
+ }
1141
+ .tl-icon--card {
1142
+ mask-image: var(--icon-card-svg);
1143
+ background-color: currentcolor;
1144
+ }
1145
+ .tl-icon--cart {
1146
+ mask-image: var(--icon-cart-svg);
1147
+ background-color: currentcolor;
1148
+ }
1149
+ .tl-icon--charging_complete {
1150
+ mask-image: var(--icon-charging_complete-svg);
1151
+ background-color: currentcolor;
1152
+ }
1153
+ .tl-icon--charging_failed {
1154
+ mask-image: var(--icon-charging_failed-svg);
1155
+ background-color: currentcolor;
1156
+ }
1157
+ .tl-icon--charging_speed {
1158
+ mask-image: var(--icon-charging_speed-svg);
1159
+ background-color: currentcolor;
1160
+ }
1161
+ .tl-icon--charging_speed_inactive {
1162
+ mask-image: var(--icon-charging_speed_inactive-svg);
1163
+ background-color: currentcolor;
1164
+ }
1165
+ .tl-icon--charging_stopped {
1166
+ mask-image: var(--icon-charging_stopped-svg);
1167
+ background-color: currentcolor;
1168
+ }
1169
+ .tl-icon--chevron_down {
1170
+ mask-image: var(--icon-chevron_down-svg);
1171
+ background-color: currentcolor;
1172
+ }
1173
+ .tl-icon--chevron_left {
1174
+ mask-image: var(--icon-chevron_left-svg);
1175
+ background-color: currentcolor;
1176
+ }
1177
+ .tl-icon--chevron_right {
1178
+ mask-image: var(--icon-chevron_right-svg);
1179
+ background-color: currentcolor;
1180
+ }
1181
+ .tl-icon--chevron_up {
1182
+ mask-image: var(--icon-chevron_up-svg);
1183
+ background-color: currentcolor;
1184
+ }
1185
+ .tl-icon--clock {
1186
+ mask-image: var(--icon-clock-svg);
1187
+ background-color: currentcolor;
1188
+ }
1189
+ .tl-icon--clock_inactive {
1190
+ mask-image: var(--icon-clock_inactive-svg);
1191
+ background-color: currentcolor;
1192
+ }
1193
+ .tl-icon--configurator {
1194
+ mask-image: var(--icon-configurator-svg);
1195
+ background-color: currentcolor;
1196
+ }
1197
+ .tl-icon--contact {
1198
+ mask-image: var(--icon-contact-svg);
1199
+ background-color: currentcolor;
1200
+ }
1201
+ .tl-icon--contact_inactive {
1202
+ mask-image: var(--icon-contact_inactive-svg);
1203
+ background-color: currentcolor;
1204
+ }
1205
+ .tl-icon--cookie {
1206
+ mask-image: var(--icon-cookie-svg);
1207
+ background-color: currentcolor;
1208
+ }
1209
+ .tl-icon--cookie_inactive {
1210
+ mask-image: var(--icon-cookie_inactive-svg);
1211
+ background-color: currentcolor;
1212
+ }
1213
+ .tl-icon--coolant_level {
1214
+ mask-image: var(--icon-coolant_level-svg);
1215
+ background-color: currentcolor;
1216
+ }
1217
+ .tl-icon--coolant_level_inactive {
1218
+ mask-image: var(--icon-coolant_level_inactive-svg);
1219
+ background-color: currentcolor;
1220
+ }
1221
+ .tl-icon--copy {
1222
+ mask-image: var(--icon-copy-svg);
1223
+ background-color: currentcolor;
1224
+ }
1225
+ .tl-icon--cross {
1226
+ mask-image: var(--icon-cross-svg);
1227
+ background-color: currentcolor;
1228
+ }
1229
+ .tl-icon--cup {
1230
+ mask-image: var(--icon-cup-svg);
1231
+ background-color: currentcolor;
1232
+ }
1233
+ .tl-icon--cup_inactive {
1234
+ mask-image: var(--icon-cup_inactive-svg);
1235
+ background-color: currentcolor;
1236
+ }
1237
+ .tl-icon--dashboard {
1238
+ mask-image: var(--icon-dashboard-svg);
1239
+ background-color: currentcolor;
1240
+ }
1241
+ .tl-icon--department {
1242
+ mask-image: var(--icon-department-svg);
1243
+ background-color: currentcolor;
1244
+ }
1245
+ .tl-icon--department_inactive {
1246
+ mask-image: var(--icon-department_inactive-svg);
1247
+ background-color: currentcolor;
1248
+ }
1249
+ .tl-icon--departure_scheduling {
1250
+ mask-image: var(--icon-departure_scheduling-svg);
1251
+ background-color: currentcolor;
1252
+ }
1253
+ .tl-icon--departure_scheduling_inactive {
1254
+ mask-image: var(--icon-departure_scheduling_inactive-svg);
1255
+ background-color: currentcolor;
1256
+ }
1257
+ .tl-icon--diamond {
1258
+ mask-image: var(--icon-diamond-svg);
1259
+ background-color: currentcolor;
1260
+ }
1261
+ .tl-icon--diamond_inactive {
1262
+ mask-image: var(--icon-diamond_inactive-svg);
1263
+ background-color: currentcolor;
1264
+ }
1265
+ .tl-icon--document {
1266
+ mask-image: var(--icon-document-svg);
1267
+ background-color: currentcolor;
1268
+ }
1269
+ .tl-icon--document_check {
1270
+ mask-image: var(--icon-document_check-svg);
1271
+ background-color: currentcolor;
1272
+ }
1273
+ .tl-icon--document_doc {
1274
+ mask-image: var(--icon-document_doc-svg);
1275
+ background-color: currentcolor;
1276
+ }
1277
+ .tl-icon--document_eye {
1278
+ mask-image: var(--icon-document_eye-svg);
1279
+ background-color: currentcolor;
1280
+ }
1281
+ .tl-icon--document_pdf {
1282
+ mask-image: var(--icon-document_pdf-svg);
1283
+ background-color: currentcolor;
1284
+ }
1285
+ .tl-icon--document_plus {
1286
+ mask-image: var(--icon-document_plus-svg);
1287
+ background-color: currentcolor;
1288
+ }
1289
+ .tl-icon--document_plus_inactive {
1290
+ mask-image: var(--icon-document_plus_inactive-svg);
1291
+ background-color: currentcolor;
1292
+ }
1293
+ .tl-icon--document_ppt {
1294
+ mask-image: var(--icon-document_ppt-svg);
1295
+ background-color: currentcolor;
1296
+ }
1297
+ .tl-icon--document_tool {
1298
+ mask-image: var(--icon-document_tool-svg);
1299
+ background-color: currentcolor;
1300
+ }
1301
+ .tl-icon--document_wrong {
1302
+ mask-image: var(--icon-document_wrong-svg);
1303
+ background-color: currentcolor;
1304
+ }
1305
+ .tl-icon--document_xls {
1306
+ mask-image: var(--icon-document_xls-svg);
1307
+ background-color: currentcolor;
1308
+ }
1309
+ .tl-icon--dollar {
1310
+ mask-image: var(--icon-dollar-svg);
1311
+ background-color: currentcolor;
1312
+ }
1313
+ .tl-icon--doner {
1314
+ mask-image: var(--icon-doner-svg);
1315
+ background-color: currentcolor;
1316
+ }
1317
+ .tl-icon--double_kebab {
1318
+ mask-image: var(--icon-double_kebab-svg);
1319
+ background-color: currentcolor;
1320
+ }
1321
+ .tl-icon--download {
1322
+ mask-image: var(--icon-download-svg);
1323
+ background-color: currentcolor;
1324
+ }
1325
+ .tl-icon--driver {
1326
+ mask-image: var(--icon-driver-svg);
1327
+ background-color: currentcolor;
1328
+ }
1329
+ .tl-icon--driving_licence {
1330
+ mask-image: var(--icon-driving_licence-svg);
1331
+ background-color: currentcolor;
1332
+ }
1333
+ .tl-icon--driving_licence_inactive {
1334
+ mask-image: var(--icon-driving_licence_inactive-svg);
1335
+ background-color: currentcolor;
1336
+ }
1337
+ .tl-icon--drop {
1338
+ mask-image: var(--icon-drop-svg);
1339
+ background-color: currentcolor;
1340
+ }
1341
+ .tl-icon--drop_inactive {
1342
+ mask-image: var(--icon-drop_inactive-svg);
1343
+ background-color: currentcolor;
1344
+ }
1345
+ .tl-icon--edit {
1346
+ mask-image: var(--icon-edit-svg);
1347
+ background-color: currentcolor;
1348
+ }
1349
+ .tl-icon--edit_inactive {
1350
+ mask-image: var(--icon-edit_inactive-svg);
1351
+ background-color: currentcolor;
1352
+ }
1353
+ .tl-icon--email {
1354
+ mask-image: var(--icon-email-svg);
1355
+ background-color: currentcolor;
1356
+ }
1357
+ .tl-icon--email_open {
1358
+ mask-image: var(--icon-email_open-svg);
1359
+ background-color: currentcolor;
1360
+ }
1361
+ .tl-icon--employee {
1362
+ mask-image: var(--icon-employee-svg);
1363
+ background-color: currentcolor;
1364
+ }
1365
+ .tl-icon--engine {
1366
+ mask-image: var(--icon-engine-svg);
1367
+ background-color: currentcolor;
1368
+ }
1369
+ .tl-icon--engine_inactive {
1370
+ mask-image: var(--icon-engine_inactive-svg);
1371
+ background-color: currentcolor;
1372
+ }
1373
+ .tl-icon--environment {
1374
+ mask-image: var(--icon-environment-svg);
1375
+ background-color: currentcolor;
1376
+ }
1377
+ .tl-icon--environment_inactive {
1378
+ mask-image: var(--icon-environment_inactive-svg);
1379
+ background-color: currentcolor;
1380
+ }
1381
+ .tl-icon--error {
1382
+ mask-image: var(--icon-error-svg);
1383
+ background-color: currentcolor;
1384
+ }
1385
+ .tl-icon--exit {
1386
+ mask-image: var(--icon-exit-svg);
1387
+ background-color: currentcolor;
1388
+ }
1389
+ .tl-icon--expand {
1390
+ mask-image: var(--icon-expand-svg);
1391
+ background-color: currentcolor;
1392
+ }
1393
+ .tl-icon--expand_inactive {
1394
+ mask-image: var(--icon-expand_inactive-svg);
1395
+ background-color: currentcolor;
1396
+ }
1397
+ .tl-icon--export {
1398
+ mask-image: var(--icon-export-svg);
1399
+ background-color: currentcolor;
1400
+ }
1401
+ .tl-icon--export_inactive {
1402
+ mask-image: var(--icon-export_inactive-svg);
1403
+ background-color: currentcolor;
1404
+ }
1405
+ .tl-icon--eye {
1406
+ mask-image: var(--icon-eye-svg);
1407
+ background-color: currentcolor;
1408
+ }
1409
+ .tl-icon--eye_inactive {
1410
+ mask-image: var(--icon-eye_inactive-svg);
1411
+ background-color: currentcolor;
1412
+ }
1413
+ .tl-icon--face_dissatisfied {
1414
+ mask-image: var(--icon-face_dissatisfied-svg);
1415
+ background-color: currentcolor;
1416
+ }
1417
+ .tl-icon--face_neutral {
1418
+ mask-image: var(--icon-face_neutral-svg);
1419
+ background-color: currentcolor;
1420
+ }
1421
+ .tl-icon--face_satisfied {
1422
+ mask-image: var(--icon-face_satisfied-svg);
1423
+ background-color: currentcolor;
1424
+ }
1425
+ .tl-icon--factory {
1426
+ mask-image: var(--icon-factory-svg);
1427
+ background-color: currentcolor;
1428
+ }
1429
+ .tl-icon--factory_inactive {
1430
+ mask-image: var(--icon-factory_inactive-svg);
1431
+ background-color: currentcolor;
1432
+ }
1433
+ .tl-icon--ferry {
1434
+ mask-image: var(--icon-ferry-svg);
1435
+ background-color: currentcolor;
1436
+ }
1437
+ .tl-icon--ferry_inactive {
1438
+ mask-image: var(--icon-ferry_inactive-svg);
1439
+ background-color: currentcolor;
1440
+ }
1441
+ .tl-icon--filters {
1442
+ mask-image: var(--icon-filters-svg);
1443
+ background-color: currentcolor;
1444
+ }
1445
+ .tl-icon--filters_inactive {
1446
+ mask-image: var(--icon-filters_inactive-svg);
1447
+ background-color: currentcolor;
1448
+ }
1449
+ .tl-icon--flash {
1450
+ mask-image: var(--icon-flash-svg);
1451
+ background-color: currentcolor;
1452
+ }
1453
+ .tl-icon--flash_inactive {
1454
+ mask-image: var(--icon-flash_inactive-svg);
1455
+ background-color: currentcolor;
1456
+ }
1457
+ .tl-icon--folder {
1458
+ mask-image: var(--icon-folder-svg);
1459
+ background-color: currentcolor;
1460
+ }
1461
+ .tl-icon--forward {
1462
+ mask-image: var(--icon-forward-svg);
1463
+ background-color: currentcolor;
1464
+ }
1465
+ .tl-icon--forward_inactive {
1466
+ mask-image: var(--icon-forward_inactive-svg);
1467
+ background-color: currentcolor;
1468
+ }
1469
+ .tl-icon--fuel {
1470
+ mask-image: var(--icon-fuel-svg);
1471
+ background-color: currentcolor;
1472
+ }
1473
+ .tl-icon--fuel_gauge {
1474
+ mask-image: var(--icon-fuel_gauge-svg);
1475
+ background-color: currentcolor;
1476
+ }
1477
+ .tl-icon--fuel_gauge_inactive {
1478
+ mask-image: var(--icon-fuel_gauge_inactive-svg);
1479
+ background-color: currentcolor;
1480
+ }
1481
+ .tl-icon--fuel_inactive {
1482
+ mask-image: var(--icon-fuel_inactive-svg);
1483
+ background-color: currentcolor;
1484
+ }
1485
+ .tl-icon--gift {
1486
+ mask-image: var(--icon-gift-svg);
1487
+ background-color: currentcolor;
1488
+ }
1489
+ .tl-icon--gift_inactive {
1490
+ mask-image: var(--icon-gift_inactive-svg);
1491
+ background-color: currentcolor;
1492
+ }
1493
+ .tl-icon--global {
1494
+ mask-image: var(--icon-global-svg);
1495
+ background-color: currentcolor;
1496
+ }
1497
+ .tl-icon--guided_tour {
1498
+ mask-image: var(--icon-guided_tour-svg);
1499
+ background-color: currentcolor;
1500
+ }
1501
+ .tl-icon--guided_tour_inactive {
1502
+ mask-image: var(--icon-guided_tour_inactive-svg);
1503
+ background-color: currentcolor;
1504
+ }
1505
+ .tl-icon--hatch_open {
1506
+ mask-image: var(--icon-hatch_open-svg);
1507
+ background-color: currentcolor;
1508
+ }
1509
+ .tl-icon--hatch_open_1 {
1510
+ mask-image: var(--icon-hatch_open_1-svg);
1511
+ background-color: currentcolor;
1512
+ }
1513
+ .tl-icon--hatch_open_2 {
1514
+ mask-image: var(--icon-hatch_open_2-svg);
1515
+ background-color: currentcolor;
1516
+ }
1517
+ .tl-icon--hatch_open_inactive {
1518
+ mask-image: var(--icon-hatch_open_inactive-svg);
1519
+ background-color: currentcolor;
1520
+ }
1521
+ .tl-icon--heart {
1522
+ mask-image: var(--icon-heart-svg);
1523
+ background-color: currentcolor;
1524
+ }
1525
+ .tl-icon--heart_inactive {
1526
+ mask-image: var(--icon-heart_inactive-svg);
1527
+ background-color: currentcolor;
1528
+ }
1529
+ .tl-icon--heating_inactive_screen {
1530
+ mask-image: var(--icon-heating_inactive_screen-svg);
1531
+ background-color: currentcolor;
1532
+ }
1533
+ .tl-icon--history {
1534
+ mask-image: var(--icon-history-svg);
1535
+ background-color: currentcolor;
1536
+ }
1537
+ .tl-icon--history_inactive {
1538
+ mask-image: var(--icon-history_inactive-svg);
1539
+ background-color: currentcolor;
1540
+ }
1541
+ .tl-icon--home {
1542
+ mask-image: var(--icon-home-svg);
1543
+ background-color: currentcolor;
1544
+ }
1545
+ .tl-icon--home_inactive {
1546
+ mask-image: var(--icon-home_inactive-svg);
1547
+ background-color: currentcolor;
1548
+ }
1549
+ .tl-icon--idea {
1550
+ mask-image: var(--icon-idea-svg);
1551
+ background-color: currentcolor;
1552
+ }
1553
+ .tl-icon--idea_inactive {
1554
+ mask-image: var(--icon-idea_inactive-svg);
1555
+ background-color: currentcolor;
1556
+ }
1557
+ .tl-icon--image {
1558
+ mask-image: var(--icon-image-svg);
1559
+ background-color: currentcolor;
1560
+ }
1561
+ .tl-icon--image_add {
1562
+ mask-image: var(--icon-image_add-svg);
1563
+ background-color: currentcolor;
1564
+ }
1565
+ .tl-icon--image_inactive {
1566
+ mask-image: var(--icon-image_inactive-svg);
1567
+ background-color: currentcolor;
1568
+ }
1569
+ .tl-icon--image_set {
1570
+ mask-image: var(--icon-image_set-svg);
1571
+ background-color: currentcolor;
1572
+ }
1573
+ .tl-icon--info {
1574
+ mask-image: var(--icon-info-svg);
1575
+ background-color: currentcolor;
1576
+ }
1577
+ .tl-icon--insights {
1578
+ mask-image: var(--icon-insights-svg);
1579
+ background-color: currentcolor;
1580
+ }
1581
+ .tl-icon--kebab {
1582
+ mask-image: var(--icon-kebab-svg);
1583
+ background-color: currentcolor;
1584
+ }
1585
+ .tl-icon--key {
1586
+ mask-image: var(--icon-key-svg);
1587
+ background-color: currentcolor;
1588
+ }
1589
+ .tl-icon--key_inactive {
1590
+ mask-image: var(--icon-key_inactive-svg);
1591
+ background-color: currentcolor;
1592
+ }
1593
+ .tl-icon--language {
1594
+ mask-image: var(--icon-language-svg);
1595
+ background-color: currentcolor;
1596
+ }
1597
+ .tl-icon--layer {
1598
+ mask-image: var(--icon-layer-svg);
1599
+ background-color: currentcolor;
1600
+ }
1601
+ .tl-icon--layer_inactive {
1602
+ mask-image: var(--icon-layer_inactive-svg);
1603
+ background-color: currentcolor;
1604
+ }
1605
+ .tl-icon--line_chart {
1606
+ mask-image: var(--icon-line_chart-svg);
1607
+ background-color: currentcolor;
1608
+ }
1609
+ .tl-icon--link {
1610
+ mask-image: var(--icon-link-svg);
1611
+ background-color: currentcolor;
1612
+ }
1613
+ .tl-icon--link_broken {
1614
+ mask-image: var(--icon-link_broken-svg);
1615
+ background-color: currentcolor;
1616
+ }
1617
+ .tl-icon--list {
1618
+ mask-image: var(--icon-list-svg);
1619
+ background-color: currentcolor;
1620
+ }
1621
+ .tl-icon--list_inactive {
1622
+ mask-image: var(--icon-list_inactive-svg);
1623
+ background-color: currentcolor;
1624
+ }
1625
+ .tl-icon--lock {
1626
+ mask-image: var(--icon-lock-svg);
1627
+ background-color: currentcolor;
1628
+ }
1629
+ .tl-icon--manager {
1630
+ mask-image: var(--icon-manager-svg);
1631
+ background-color: currentcolor;
1632
+ }
1633
+ .tl-icon--map_cursor {
1634
+ mask-image: var(--icon-map_cursor-svg);
1635
+ background-color: currentcolor;
1636
+ }
1637
+ .tl-icon--map_cursor_inactive {
1638
+ mask-image: var(--icon-map_cursor_inactive-svg);
1639
+ background-color: currentcolor;
1640
+ }
1641
+ .tl-icon--maximize_fullscreen {
1642
+ mask-image: var(--icon-maximize_fullscreen-svg);
1643
+ background-color: currentcolor;
1644
+ }
1645
+ .tl-icon--meatballs {
1646
+ mask-image: var(--icon-meatballs-svg);
1647
+ background-color: currentcolor;
1648
+ }
1649
+ .tl-icon--merge {
1650
+ mask-image: var(--icon-merge-svg);
1651
+ background-color: currentcolor;
1652
+ }
1653
+ .tl-icon--merge_inactive {
1654
+ mask-image: var(--icon-merge_inactive-svg);
1655
+ background-color: currentcolor;
1656
+ }
1657
+ .tl-icon--message {
1658
+ mask-image: var(--icon-message-svg);
1659
+ background-color: currentcolor;
1660
+ }
1661
+ .tl-icon--message_ai {
1662
+ mask-image: var(--icon-message_ai-svg);
1663
+ background-color: currentcolor;
1664
+ }
1665
+ .tl-icon--message_inactive {
1666
+ mask-image: var(--icon-message_inactive-svg);
1667
+ background-color: currentcolor;
1668
+ }
1669
+ .tl-icon--microphone {
1670
+ mask-image: var(--icon-microphone-svg);
1671
+ background-color: currentcolor;
1672
+ }
1673
+ .tl-icon--microphone_ai {
1674
+ mask-image: var(--icon-microphone_ai-svg);
1675
+ background-color: currentcolor;
1676
+ }
1677
+ .tl-icon--microphone_inactive {
1678
+ mask-image: var(--icon-microphone_inactive-svg);
1679
+ background-color: currentcolor;
1680
+ }
1681
+ .tl-icon--mileage {
1682
+ mask-image: var(--icon-mileage-svg);
1683
+ background-color: currentcolor;
1684
+ }
1685
+ .tl-icon--mileage_inactive {
1686
+ mask-image: var(--icon-mileage_inactive-svg);
1687
+ background-color: currentcolor;
1688
+ }
1689
+ .tl-icon--minimize_fullscreen {
1690
+ mask-image: var(--icon-minimize_fullscreen-svg);
1691
+ background-color: currentcolor;
1692
+ }
1693
+ .tl-icon--minus {
1694
+ mask-image: var(--icon-minus-svg);
1695
+ background-color: currentcolor;
1696
+ }
1697
+ .tl-icon--navigate {
1698
+ mask-image: var(--icon-navigate-svg);
1699
+ background-color: currentcolor;
1700
+ }
1701
+ .tl-icon--navigate_inactive {
1702
+ mask-image: var(--icon-navigate_inactive-svg);
1703
+ background-color: currentcolor;
1704
+ }
1705
+ .tl-icon--notification {
1706
+ mask-image: var(--icon-notification-svg);
1707
+ background-color: currentcolor;
1708
+ }
1709
+ .tl-icon--notification_inactive {
1710
+ mask-image: var(--icon-notification_inactive-svg);
1711
+ background-color: currentcolor;
1712
+ }
1713
+ .tl-icon--notification_snooze {
1714
+ mask-image: var(--icon-notification_snooze-svg);
1715
+ background-color: currentcolor;
1716
+ }
1717
+ .tl-icon--oil_level {
1718
+ mask-image: var(--icon-oil_level-svg);
1719
+ background-color: currentcolor;
1720
+ }
1721
+ .tl-icon--oil_level_inactive {
1722
+ mask-image: var(--icon-oil_level_inactive-svg);
1723
+ background-color: currentcolor;
1724
+ }
1725
+ .tl-icon--paperclip {
1726
+ mask-image: var(--icon-paperclip-svg);
1727
+ background-color: currentcolor;
1728
+ }
1729
+ .tl-icon--pause {
1730
+ mask-image: var(--icon-pause-svg);
1731
+ background-color: currentcolor;
1732
+ }
1733
+ .tl-icon--pause_inactive {
1734
+ mask-image: var(--icon-pause_inactive-svg);
1735
+ background-color: currentcolor;
1736
+ }
1737
+ .tl-icon--phone {
1738
+ mask-image: var(--icon-phone-svg);
1739
+ background-color: currentcolor;
1740
+ }
1741
+ .tl-icon--phone_inactive {
1742
+ mask-image: var(--icon-phone_inactive-svg);
1743
+ background-color: currentcolor;
1744
+ }
1745
+ .tl-icon--pie_chart {
1746
+ mask-image: var(--icon-pie_chart-svg);
1747
+ background-color: currentcolor;
1748
+ }
1749
+ .tl-icon--pin {
1750
+ mask-image: var(--icon-pin-svg);
1751
+ background-color: currentcolor;
1752
+ }
1753
+ .tl-icon--pin_inactive {
1754
+ mask-image: var(--icon-pin_inactive-svg);
1755
+ background-color: currentcolor;
1756
+ }
1757
+ .tl-icon--placeholder {
1758
+ mask-image: var(--icon-placeholder-svg);
1759
+ background-color: currentcolor;
1760
+ }
1761
+ .tl-icon--play {
1762
+ mask-image: var(--icon-play-svg);
1763
+ background-color: currentcolor;
1764
+ }
1765
+ .tl-icon--play_inactive {
1766
+ mask-image: var(--icon-play_inactive-svg);
1767
+ background-color: currentcolor;
1768
+ }
1769
+ .tl-icon--plus {
1770
+ mask-image: var(--icon-plus-svg);
1771
+ background-color: currentcolor;
1772
+ }
1773
+ .tl-icon--powerplug {
1774
+ mask-image: var(--icon-powerplug-svg);
1775
+ background-color: currentcolor;
1776
+ }
1777
+ .tl-icon--powerplug_inactive {
1778
+ mask-image: var(--icon-powerplug_inactive-svg);
1779
+ background-color: currentcolor;
1780
+ }
1781
+ .tl-icon--print {
1782
+ mask-image: var(--icon-print-svg);
1783
+ background-color: currentcolor;
1784
+ }
1785
+ .tl-icon--print_inactive {
1786
+ mask-image: var(--icon-print_inactive-svg);
1787
+ background-color: currentcolor;
1788
+ }
1789
+ .tl-icon--privacy {
1790
+ mask-image: var(--icon-privacy-svg);
1791
+ background-color: currentcolor;
1792
+ }
1793
+ .tl-icon--privacy_inactive {
1794
+ mask-image: var(--icon-privacy_inactive-svg);
1795
+ background-color: currentcolor;
1796
+ }
1797
+ .tl-icon--profile {
1798
+ mask-image: var(--icon-profile-svg);
1799
+ background-color: currentcolor;
1800
+ }
1801
+ .tl-icon--profile_inactive {
1802
+ mask-image: var(--icon-profile_inactive-svg);
1803
+ background-color: currentcolor;
1804
+ }
1805
+ .tl-icon--prohibited {
1806
+ mask-image: var(--icon-prohibited-svg);
1807
+ background-color: currentcolor;
1808
+ }
1809
+ .tl-icon--proportions {
1810
+ mask-image: var(--icon-proportions-svg);
1811
+ background-color: currentcolor;
1812
+ }
1813
+ .tl-icon--proportions_inactive {
1814
+ mask-image: var(--icon-proportions_inactive-svg);
1815
+ background-color: currentcolor;
1816
+ }
1817
+ .tl-icon--range {
1818
+ mask-image: var(--icon-range-svg);
1819
+ background-color: currentcolor;
1820
+ }
1821
+ .tl-icon--range_inactive {
1822
+ mask-image: var(--icon-range_inactive-svg);
1823
+ background-color: currentcolor;
1824
+ }
1825
+ .tl-icon--redirect {
1826
+ mask-image: var(--icon-redirect-svg);
1827
+ background-color: currentcolor;
1828
+ }
1829
+ .tl-icon--refresh {
1830
+ mask-image: var(--icon-refresh-svg);
1831
+ background-color: currentcolor;
1832
+ }
1833
+ .tl-icon--refresh_inactive {
1834
+ mask-image: var(--icon-refresh_inactive-svg);
1835
+ background-color: currentcolor;
1836
+ }
1837
+ .tl-icon--reload {
1838
+ mask-image: var(--icon-reload-svg);
1839
+ background-color: currentcolor;
1840
+ }
1841
+ .tl-icon--reload_inactive {
1842
+ mask-image: var(--icon-reload_inactive-svg);
1843
+ background-color: currentcolor;
1844
+ }
1845
+ .tl-icon--repeat {
1846
+ mask-image: var(--icon-repeat-svg);
1847
+ background-color: currentcolor;
1848
+ }
1849
+ .tl-icon--report {
1850
+ mask-image: var(--icon-report-svg);
1851
+ background-color: currentcolor;
1852
+ }
1853
+ .tl-icon--report_inactive {
1854
+ mask-image: var(--icon-report_inactive-svg);
1855
+ background-color: currentcolor;
1856
+ }
1857
+ .tl-icon--route {
1858
+ mask-image: var(--icon-route-svg);
1859
+ background-color: currentcolor;
1860
+ }
1861
+ .tl-icon--route_inactive {
1862
+ mask-image: var(--icon-route_inactive-svg);
1863
+ background-color: currentcolor;
1864
+ }
1865
+ .tl-icon--save {
1866
+ mask-image: var(--icon-save-svg);
1867
+ background-color: currentcolor;
1868
+ }
1869
+ .tl-icon--save_inactive {
1870
+ mask-image: var(--icon-save_inactive-svg);
1871
+ background-color: currentcolor;
1872
+ }
1873
+ .tl-icon--scissor {
1874
+ mask-image: var(--icon-scissor-svg);
1875
+ background-color: currentcolor;
1876
+ }
1877
+ .tl-icon--search {
1878
+ mask-image: var(--icon-search-svg);
1879
+ background-color: currentcolor;
1880
+ }
1881
+ .tl-icon--send {
1882
+ mask-image: var(--icon-send-svg);
1883
+ background-color: currentcolor;
1884
+ }
1885
+ .tl-icon--send_inactive {
1886
+ mask-image: var(--icon-send_inactive-svg);
1887
+ background-color: currentcolor;
1888
+ }
1889
+ .tl-icon--settings {
1890
+ mask-image: var(--icon-settings-svg);
1891
+ background-color: currentcolor;
1892
+ }
1893
+ .tl-icon--share {
1894
+ mask-image: var(--icon-share-svg);
1895
+ background-color: currentcolor;
1896
+ }
1897
+ .tl-icon--shuffle {
1898
+ mask-image: var(--icon-shuffle-svg);
1899
+ background-color: currentcolor;
1900
+ }
1901
+ .tl-icon--skip_backwards {
1902
+ mask-image: var(--icon-skip_backwards-svg);
1903
+ background-color: currentcolor;
1904
+ }
1905
+ .tl-icon--skip_forward {
1906
+ mask-image: var(--icon-skip_forward-svg);
1907
+ background-color: currentcolor;
1908
+ }
1909
+ .tl-icon--smartphone {
1910
+ mask-image: var(--icon-smartphone-svg);
1911
+ background-color: currentcolor;
1912
+ }
1913
+ .tl-icon--smartphone_inactive {
1914
+ mask-image: var(--icon-smartphone_inactive-svg);
1915
+ background-color: currentcolor;
1916
+ }
1917
+ .tl-icon--sorting {
1918
+ mask-image: var(--icon-sorting-svg);
1919
+ background-color: currentcolor;
1920
+ }
1921
+ .tl-icon--sparkle {
1922
+ mask-image: var(--icon-sparkle-svg);
1923
+ background-color: currentcolor;
1924
+ }
1925
+ .tl-icon--speedometer {
1926
+ mask-image: var(--icon-speedometer-svg);
1927
+ background-color: currentcolor;
1928
+ }
1929
+ .tl-icon--speedometer_inactive {
1930
+ mask-image: var(--icon-speedometer_inactive-svg);
1931
+ background-color: currentcolor;
1932
+ }
1933
+ .tl-icon--split {
1934
+ mask-image: var(--icon-split-svg);
1935
+ background-color: currentcolor;
1936
+ }
1937
+ .tl-icon--star {
1938
+ mask-image: var(--icon-star-svg);
1939
+ background-color: currentcolor;
1940
+ }
1941
+ .tl-icon--support {
1942
+ mask-image: var(--icon-support-svg);
1943
+ background-color: currentcolor;
1944
+ }
1945
+ .tl-icon--table {
1946
+ mask-image: var(--icon-table-svg);
1947
+ background-color: currentcolor;
1948
+ }
1949
+ .tl-icon--target {
1950
+ mask-image: var(--icon-target-svg);
1951
+ background-color: currentcolor;
1952
+ }
1953
+ .tl-icon--target_inactive {
1954
+ mask-image: var(--icon-target_inactive-svg);
1955
+ background-color: currentcolor;
1956
+ }
1957
+ .tl-icon--temperature {
1958
+ mask-image: var(--icon-temperature-svg);
1959
+ background-color: currentcolor;
1960
+ }
1961
+ .tl-icon--temperature_inactive {
1962
+ mask-image: var(--icon-temperature_inactive-svg);
1963
+ background-color: currentcolor;
1964
+ }
1965
+ .tl-icon--text {
1966
+ mask-image: var(--icon-text-svg);
1967
+ background-color: currentcolor;
1968
+ }
1969
+ .tl-icon--text_inactive {
1970
+ mask-image: var(--icon-text_inactive-svg);
1971
+ background-color: currentcolor;
1972
+ }
1973
+ .tl-icon--thumbs_down {
1974
+ mask-image: var(--icon-thumbs_down-svg);
1975
+ background-color: currentcolor;
1976
+ }
1977
+ .tl-icon--thumbs_up {
1978
+ mask-image: var(--icon-thumbs_up-svg);
1979
+ background-color: currentcolor;
1980
+ }
1981
+ .tl-icon--tick {
1982
+ mask-image: var(--icon-tick-svg);
1983
+ background-color: currentcolor;
1984
+ }
1985
+ .tl-icon--timer {
1986
+ mask-image: var(--icon-timer-svg);
1987
+ background-color: currentcolor;
1988
+ }
1989
+ .tl-icon--tool {
1990
+ mask-image: var(--icon-tool-svg);
1991
+ background-color: currentcolor;
1992
+ }
1993
+ .tl-icon--tool_inactive {
1994
+ mask-image: var(--icon-tool_inactive-svg);
1995
+ background-color: currentcolor;
1996
+ }
1997
+ .tl-icon--trailer {
1998
+ mask-image: var(--icon-trailer-svg);
1999
+ background-color: currentcolor;
2000
+ }
2001
+ .tl-icon--trailer_inactive {
2002
+ mask-image: var(--icon-trailer_inactive-svg);
2003
+ background-color: currentcolor;
2004
+ }
2005
+ .tl-icon--trash {
2006
+ mask-image: var(--icon-trash-svg);
2007
+ background-color: currentcolor;
2008
+ }
2009
+ .tl-icon--trash_inactive {
2010
+ mask-image: var(--icon-trash_inactive-svg);
2011
+ background-color: currentcolor;
2012
+ }
2013
+ .tl-icon--truck {
2014
+ mask-image: var(--icon-truck-svg);
2015
+ background-color: currentcolor;
2016
+ }
2017
+ .tl-icon--truck_inactive {
2018
+ mask-image: var(--icon-truck_inactive-svg);
2019
+ background-color: currentcolor;
2020
+ }
2021
+ .tl-icon--undo {
2022
+ mask-image: var(--icon-undo-svg);
2023
+ background-color: currentcolor;
2024
+ }
2025
+ .tl-icon--undo_inactive {
2026
+ mask-image: var(--icon-undo_inactive-svg);
2027
+ background-color: currentcolor;
2028
+ }
2029
+ .tl-icon--unlock {
2030
+ mask-image: var(--icon-unlock-svg);
2031
+ background-color: currentcolor;
2032
+ }
2033
+ .tl-icon--upload {
2034
+ mask-image: var(--icon-upload-svg);
2035
+ background-color: currentcolor;
2036
+ }
2037
+ .tl-icon--video {
2038
+ mask-image: var(--icon-video-svg);
2039
+ background-color: currentcolor;
2040
+ }
2041
+ .tl-icon--video_inactive {
2042
+ mask-image: var(--icon-video_inactive-svg);
2043
+ background-color: currentcolor;
2044
+ }
2045
+ .tl-icon--wallet {
2046
+ mask-image: var(--icon-wallet-svg);
2047
+ background-color: currentcolor;
2048
+ }
2049
+ .tl-icon--warning {
2050
+ mask-image: var(--icon-warning-svg);
2051
+ background-color: currentcolor;
2052
+ }
2053
+ .tl-icon--weight {
2054
+ mask-image: var(--icon-weight-svg);
2055
+ background-color: currentcolor;
2056
+ }
2057
+ .tl-icon--weight_inactive {
2058
+ mask-image: var(--icon-weight_inactive-svg);
2059
+ background-color: currentcolor;
2060
+ }
2061
+ .tl-icon--wifi {
2062
+ mask-image: var(--icon-wifi-svg);
2063
+ background-color: currentcolor;
2064
+ }
2065
+ .tl-icon--wifi_inactive {
2066
+ mask-image: var(--icon-wifi_inactive-svg);
2067
+ background-color: currentcolor;
2068
+ }
2069
+ .tl-icon--windscreen_heating {
2070
+ mask-image: var(--icon-windscreen_heating-svg);
2071
+ background-color: currentcolor;
2072
+ }
2073
+ .tl-icon--windscreen_heating_inactive {
2074
+ mask-image: var(--icon-windscreen_heating_inactive-svg);
2075
+ background-color: currentcolor;
2076
+ }
2077
+ .tl-icon--12 {
2078
+ width: 12px;
2079
+ height: 12px;
2080
+ }
2081
+ .tl-icon--14 {
2082
+ width: 14px;
2083
+ height: 14px;
2084
+ }
2085
+ .tl-icon--16 {
2086
+ width: 16px;
2087
+ height: 16px;
2088
+ }
2089
+ .tl-icon--18 {
2090
+ width: 18px;
2091
+ height: 18px;
2092
+ }
2093
+ .tl-icon--20 {
2094
+ width: 20px;
2095
+ height: 20px;
2096
+ }
2097
+ .tl-icon--22 {
2098
+ width: 22px;
2099
+ height: 22px;
2100
+ }
2101
+ .tl-icon--24 {
2102
+ width: 24px;
2103
+ height: 24px;
2104
+ }
2105
+ .tl-icon--26 {
2106
+ width: 26px;
2107
+ height: 26px;
2108
+ }
2109
+ .tl-icon--28 {
2110
+ width: 28px;
2111
+ height: 28px;
2112
+ }
2113
+ .tl-icon--30 {
2114
+ width: 30px;
2115
+ height: 30px;
2116
+ }
2117
+ .tl-icon--32 {
2118
+ width: 32px;
2119
+ height: 32px;
2120
+ }
2121
+ .tl-icon--34 {
2122
+ width: 34px;
2123
+ height: 34px;
2124
+ }
2125
+ .tl-icon--36 {
2126
+ width: 36px;
2127
+ height: 36px;
2128
+ }
2129
+ .tl-icon--38 {
2130
+ width: 38px;
2131
+ height: 38px;
2132
+ }
2133
+ .tl-icon--40 {
2134
+ width: 40px;
2135
+ height: 40px;
2136
+ }
2137
+ .tl-icon--42 {
2138
+ width: 42px;
2139
+ height: 42px;
2140
+ }
2141
+ .tl-icon--44 {
2142
+ width: 44px;
2143
+ height: 44px;
2144
+ }
2145
+ .tl-icon--46 {
2146
+ width: 46px;
2147
+ height: 46px;
2148
+ }
2149
+ .tl-icon--48 {
2150
+ width: 48px;
2151
+ height: 48px;
2152
+ }
2153
+ .tl-icon--50 {
2154
+ width: 50px;
2155
+ height: 50px;
2156
+ }
2157
+ .tl-icon--52 {
2158
+ width: 52px;
2159
+ height: 52px;
2160
+ }
2161
+ .tl-icon--54 {
2162
+ width: 54px;
2163
+ height: 54px;
2164
+ }
2165
+ .tl-icon--56 {
2166
+ width: 56px;
2167
+ height: 56px;
2168
+ }
2169
+ .tl-icon--58 {
2170
+ width: 58px;
2171
+ height: 58px;
2172
+ }
2173
+ .tl-icon--60 {
2174
+ width: 60px;
2175
+ height: 60px;
2176
+ }
2177
+ .tl-icon--62 {
2178
+ width: 62px;
2179
+ height: 62px;
2180
+ }
2181
+ .tl-icon--64 {
2182
+ width: 64px;
2183
+ height: 64px;
2184
+ }
2185
+ .tl-icon--66 {
2186
+ width: 66px;
2187
+ height: 66px;
2188
+ }
2189
+ .tl-icon--68 {
2190
+ width: 68px;
2191
+ height: 68px;
2192
+ }
2193
+ .tl-icon--70 {
2194
+ width: 70px;
2195
+ height: 70px;
2196
+ }
2197
+ .tl-icon--72 {
2198
+ width: 72px;
2199
+ height: 72px;
2200
+ }
2201
+ .tl-icon--74 {
2202
+ width: 74px;
2203
+ height: 74px;
2204
+ }
2205
+ .tl-icon--76 {
2206
+ width: 76px;
2207
+ height: 76px;
2208
+ }
2209
+ .tl-icon--78 {
2210
+ width: 78px;
2211
+ height: 78px;
2212
+ }
2213
+ .tl-icon--80 {
2214
+ width: 80px;
2215
+ height: 80px;
2216
+ }
2217
+ .tl-icon--82 {
2218
+ width: 82px;
2219
+ height: 82px;
2220
+ }
2221
+ .tl-icon--84 {
2222
+ width: 84px;
2223
+ height: 84px;
2224
+ }
2225
+ .tl-icon--86 {
2226
+ width: 86px;
2227
+ height: 86px;
2228
+ }
2229
+ .tl-icon--88 {
2230
+ width: 88px;
2231
+ height: 88px;
2232
+ }
2233
+ .tl-icon--90 {
2234
+ width: 90px;
2235
+ height: 90px;
2236
+ }
2237
+ .tl-icon--92 {
2238
+ width: 92px;
2239
+ height: 92px;
2240
+ }
2241
+ .tl-icon--94 {
2242
+ width: 94px;
2243
+ height: 94px;
2244
+ }
2245
+ .tl-icon--96 {
2246
+ width: 96px;
2247
+ height: 96px;
2248
+ }
2249
+
2250
+ .tl-slider {
2251
+ box-sizing: border-box;
2252
+ }
2253
+ .tl-slider * {
2254
+ box-sizing: border-box;
2255
+ }
2256
+ .tl-slider {
2257
+ width: 100%;
2258
+ }
2259
+ .tl-slider:has(input[type=range][readonly]):not(:has(input[type=range]:disabled)) {
2260
+ pointer-events: none;
2261
+ }
2262
+ .tl-slider:has(input[type=range]:disabled) {
2263
+ pointer-events: none;
2264
+ cursor: not-allowed;
2265
+ opacity: var(--slider-opacity-disabled);
2266
+ }
2267
+
2268
+ .tl-slider__label {
2269
+ font-family: var(--type-system-label-01-font-family);
2270
+ font-size: calc(var(--type-system-label-01-font-size) * 1px);
2271
+ line-height: calc(var(--type-system-label-01-line-height) * 1px);
2272
+ font-weight: var(--type-system-label-01-font-weight);
2273
+ letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
2274
+ user-select: none;
2275
+ color: var(--slider-label);
2276
+ display: block;
2277
+ margin-bottom: 16px;
2278
+ }
2279
+ .tl-slider:has(.tl-slider__value-divider-label) .tl-slider__label {
2280
+ margin-bottom: 44px;
2281
+ }
2282
+ .tl-slider:has(.tl-slider__control-minus, .tl-slider__control-plus) .tl-slider__label {
2283
+ margin-left: 4px;
2284
+ }
2285
+ .tl-slider:has(.tl-slider__value-divider-label):has(.tl-slider__input-wrapper,
2286
+ .tl-slider__control-minus,
2287
+ .tl-slider__control-plus) .tl-slider__label {
2288
+ margin-bottom: 32px;
2289
+ }
2290
+
2291
+ .tl-slider__track-wrapper {
2292
+ position: relative;
2293
+ display: flex;
2294
+ align-items: center;
2295
+ gap: 14px;
2296
+ }
2297
+ .tl-slider__track-wrapper:has(.tl-slider__input-wrapper) {
2298
+ gap: 16px;
2299
+ align-items: center;
2300
+ height: 41px;
2301
+ }
2302
+
2303
+ .tl-slider__control-minus,
2304
+ .tl-slider__control-plus {
2305
+ flex-shrink: 0;
2306
+ border: none;
2307
+ }
2308
+ .tl-slider__control-minus.tl-button,
2309
+ .tl-slider__control-plus.tl-button {
2310
+ width: 24px;
2311
+ height: 24px;
2312
+ border-radius: 4px;
2313
+ }
2314
+ .tl-slider__control-minus .tl-icon,
2315
+ .tl-slider__control-plus .tl-icon {
2316
+ color: var(--slider-controls-color);
2317
+ }
2318
+
2319
+ .tl-slider__track {
2320
+ position: relative;
2321
+ flex: 1;
2322
+ min-height: 2px;
2323
+ background-color: var(--slider-track);
2324
+ }
2325
+ .tl-slider__track-wrapper:has(.tl-slider__input-wrapper) .tl-slider__track {
2326
+ height: 2px;
2327
+ align-self: center;
2328
+ }
2329
+ .tl-slider__track::after {
2330
+ content: "";
2331
+ position: absolute;
2332
+ inset: -10px 0;
2333
+ cursor: pointer;
2334
+ z-index: 0;
2335
+ }
2336
+ .tl-slider__track:focus {
2337
+ outline: 0;
2338
+ }
2339
+ .tl-slider__track:focus .tl-slider__thumb-inner {
2340
+ width: 24px;
2341
+ height: 24px;
2342
+ }
2343
+ .tl-slider__track:focus .tl-slider__thumb-inner::before {
2344
+ display: block;
2345
+ background-color: var(--slider-thumb-active);
2346
+ }
2347
+ .tl-slider__track:focus-within .tl-slider__thumb-inner {
2348
+ outline: 2px solid var(--component--focus-ring-color-strong);
2349
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
2350
+ outline-offset: 1px;
2351
+ z-index: 1;
2352
+ }
2353
+ .tl-slider__track:disabled {
2354
+ cursor: not-allowed;
2355
+ }
2356
+ .tl-slider__track:disabled::after {
2357
+ cursor: not-allowed;
2358
+ }
2359
+
2360
+ .tl-slider__value {
2361
+ font-family: var(--type-system-body-01-font-family);
2362
+ font-size: calc(var(--type-system-body-01-font-size) * 1px);
2363
+ line-height: calc(var(--type-system-body-01-line-height) * 1px);
2364
+ font-weight: var(--type-system-body-01-font-weight);
2365
+ letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
2366
+ text-transform: var(--type-system-body-01-text-transform);
2367
+ user-select: none;
2368
+ color: var(--slider-text-value);
2369
+ flex-shrink: 0;
2370
+ align-self: center;
2371
+ }
2372
+
2373
+ .tl-slider__input-wrapper.tl-text-field {
2374
+ flex-shrink: 0;
2375
+ width: auto;
2376
+ height: auto;
2377
+ min-width: auto;
2378
+ margin-left: 0;
2379
+ align-self: center;
2380
+ }
2381
+ .tl-slider__input-wrapper.tl-text-field.tl-text-field:not(:has(.tl-text-field__input[readonly])), .tl-slider__input-wrapper.tl-text-field.tl-text-field.tl-text-field--hide-readonly-icon {
2382
+ width: 50px;
2383
+ }
2384
+ .tl-slider__track-wrapper:not(:has(.tl-slider__value)) .tl-slider__input-wrapper.tl-text-field {
2385
+ top: -10px;
2386
+ }
2387
+
2388
+ .tl-slider__input-wrapper .tl-slider__input-field {
2389
+ width: 50px;
2390
+ padding: 12px;
2391
+ text-align: center;
2392
+ appearance: textfield;
2393
+ color: var(--slider-input-value);
2394
+ background-color: var(--slider-input-background);
2395
+ }
2396
+ .tl-slider__input-wrapper .tl-slider__input-field::-webkit-outer-spin-button, .tl-slider__input-wrapper .tl-slider__input-field::-webkit-inner-spin-button {
2397
+ appearance: none;
2398
+ margin: 0;
2399
+ }
2400
+
2401
+ .tl-slider__input-wrapper:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-slider__input-field[readonly] {
2402
+ width: 74px;
2403
+ padding-right: 39px;
2404
+ }
2405
+
2406
+ .tl-slider__value-tooltip {
2407
+ font-family: var(--type-system-label-01-font-family);
2408
+ font-size: calc(var(--type-system-label-01-font-size) * 1px);
2409
+ line-height: calc(var(--type-system-label-01-line-height) * 1px);
2410
+ font-weight: var(--type-system-label-01-font-weight);
2411
+ letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
2412
+ user-select: none;
2413
+ border-radius: var(--slider-value-tooltip-border-radius);
2414
+ padding: 8px 12px;
2415
+ position: absolute;
2416
+ left: 0;
2417
+ transform: translateX(-50%);
2418
+ top: -52px;
2419
+ background-color: var(--slider-value-tooltip-background);
2420
+ color: var(--slider-value-tooltip);
2421
+ display: none;
2422
+ white-space: nowrap;
2423
+ z-index: 10;
2424
+ }
2425
+ .tl-slider--small .tl-slider__value-tooltip {
2426
+ top: -50px;
2427
+ }
2428
+ .tl-slider__value-tooltip::after {
2429
+ content: "";
2430
+ position: absolute;
2431
+ left: 50%;
2432
+ transform: translateX(-50%);
2433
+ bottom: -5px;
2434
+ width: 0;
2435
+ height: 0;
2436
+ border-left: 5px solid transparent;
2437
+ border-right: 5px solid transparent;
2438
+ border-top: 6px solid var(--slider-value-tooltip-background);
2439
+ }
2440
+ .tl-slider__thumb:hover .tl-slider__value-tooltip {
2441
+ display: block;
2442
+ }
2443
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__value-tooltip {
2444
+ display: none;
2445
+ }
2446
+
2447
+ .tl-slider__thumb {
2448
+ position: absolute;
2449
+ z-index: 1;
2450
+ top: 1px;
2451
+ }
2452
+
2453
+ .tl-slider__thumb-inner {
2454
+ width: 20px;
2455
+ height: 20px;
2456
+ border-radius: 100%;
2457
+ background-color: var(--slider-thumb);
2458
+ position: absolute;
2459
+ top: 50%;
2460
+ left: 50%;
2461
+ transform: translate(-50%, -50%);
2462
+ cursor: pointer;
2463
+ overflow: visible;
2464
+ }
2465
+ .tl-slider__thumb-inner::before {
2466
+ content: " ";
2467
+ display: none;
2468
+ width: 48px;
2469
+ height: 48px;
2470
+ background-color: var(--slider-thumb-hover);
2471
+ position: absolute;
2472
+ border-radius: 100%;
2473
+ top: 50%;
2474
+ left: 50%;
2475
+ transform: translate(-50%, -50%);
2476
+ }
2477
+ .tl-slider__thumb-inner:hover::before {
2478
+ display: block;
2479
+ }
2480
+ .tl-slider__thumb-inner--pressed {
2481
+ width: 24px;
2482
+ height: 24px;
2483
+ }
2484
+ .tl-slider__thumb-inner--pressed::before {
2485
+ display: block;
2486
+ background-color: var(--slider-thumb-active);
2487
+ }
2488
+ .tl-slider--small .tl-slider__thumb-inner {
2489
+ width: 16px;
2490
+ height: 16px;
2491
+ }
2492
+ .tl-slider--small .tl-slider__thumb-inner::before {
2493
+ width: 40px;
2494
+ height: 40px;
2495
+ }
2496
+ .tl-slider--small .tl-slider__thumb-inner.tl-slider__thumb-inner--pressed {
2497
+ width: 20px;
2498
+ height: 20px;
2499
+ }
2500
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner {
2501
+ cursor: not-allowed;
2502
+ }
2503
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
2504
+ display: none;
2505
+ }
2506
+
2507
+ .tl-slider__value-dividers {
2508
+ pointer-events: none;
2509
+ position: absolute;
2510
+ display: flex;
2511
+ justify-content: space-between;
2512
+ width: 100%;
2513
+ top: 1.2px;
2514
+ z-index: 0;
2515
+ }
2516
+
2517
+ .tl-slider__value-divider {
2518
+ position: relative;
2519
+ display: flex;
2520
+ flex-direction: column;
2521
+ align-items: center;
2522
+ height: 16px;
2523
+ }
2524
+
2525
+ .tl-slider__value-divider-line {
2526
+ position: absolute;
2527
+ width: 1px;
2528
+ height: 16px;
2529
+ background-color: var(--slider-divider);
2530
+ top: 0;
2531
+ left: 50%;
2532
+ transform: translate(-50%, -50%);
2533
+ }
2534
+
2535
+ .tl-slider__value-divider-label {
2536
+ font-family: var(--type-system-label-01-font-family);
2537
+ font-size: calc(var(--type-system-label-01-font-size) * 1px);
2538
+ line-height: calc(var(--type-system-label-01-line-height) * 1px);
2539
+ font-weight: var(--type-system-label-01-font-weight);
2540
+ letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
2541
+ position: absolute;
2542
+ bottom: 100%;
2543
+ left: 50%;
2544
+ transform: translateX(-50%);
2545
+ margin-bottom: 16px;
2546
+ width: 50px;
2547
+ text-align: center;
2548
+ white-space: nowrap;
2549
+ user-select: none;
2550
+ color: var(--slider-divider-values);
2551
+ }
2552
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-label {
2553
+ color: var(--slider-disabled-text);
2554
+ }
2555
+
2556
+ .tl-slider__track-fill {
2557
+ background-color: var(--slider-track-fill);
2558
+ height: 4px;
2559
+ position: absolute;
2560
+ left: 0;
2561
+ top: -1px;
2562
+ z-index: 1;
2563
+ }
2564
+
2565
+ .tl-slider__native-input {
2566
+ display: none;
2567
+ }