@scania/tegel-lite 0.1.0-variables-beta.1 → 1.0.0

package/dist/tl-slider.css

@@ -1,2242 +0,0 @@
-/* Typography Usage mixins */
-.tl-slider {
-  --slider-label: var(--color-foreground-text-strong);
-  --slider-thumb: var(--color-foreground-icon-strong);
-  --slider-track: var(--color-background-surface-300);
-  --slider-track-fill: var(--color-foreground-icon-strong);
-  --slider-divider: var(--color-background-surface-300);
-  --slider-divider-values: var(--color-foreground-text-defined);
-  --slider-input-focused: var(--color-foreground-border-accent-focus);
-  --slider-input-value: var(--color-foreground-text-defined);
-  --slider-disabled: var(--color-background-surface-300);
-  --slider-disabled-text: var(--color-foreground-text-disabled);
-  --slider-value-tooltip-background: var(--color-background-inverse-layer-03);
-  --slider-value-tooltip: var(--color-foreground-text-inverse-strong);
-  --slider-input-background: var(--color-background-layer-01);
-  --slider-input-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
-}
-
-.tl-slider,
-.scania .tl-slider {
-  --slider-border-radius: 4px 4px 0 0;
-}
-
-.traton .tl-slider {
-  --slider-border-radius: 4px;
-  --slider-input-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
-}
-
-/**
- * Do not edit directly, this file was auto-generated.
- */
-:root,
-.tds-mode-light,
-.scania .tds-mode-light,
-.scania .tl-mode-light {
-  --component-button-background-standard-primary-default: var(--scania-color-blue-600);
-  --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
-  --component-button-background-standard-primary-active: var(--scania-color-blue-700);
-  --component-button-background-standard-secondary-default: var(--color-background-none);
-  --component-button-background-standard-secondary-hover: var(--color-background-none);
-  --component-button-background-standard-secondary-active: var(--color-background-none);
-  --component-button-background-standard-tertiary-default: var(--color-background-none);
-  --component-button-background-standard-tertiary-hover: var(--color-background-none);
-  --component-button-background-standard-tertiary-active: var(--color-background-none);
-  --component-button-background-danger-primary-default: var(--color-system-danger-default);
-  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
-  --component-button-background-danger-primary-active: var(--scania-color-red-600);
-  --component-button-background-danger-secondary-default: var(--color-background-none);
-  --component-button-background-danger-secondary-hover: var(--color-background-none);
-  --component-button-background-danger-secondary-active: var(--color-background-none);
-  --component-button-background-danger-tertiary-default: var(--color-background-none);
-  --component-button-background-danger-tertiary-hover: var(--color-background-none);
-  --component-button-background-danger-tertiary-active: var(--color-background-none);
-  --component-button-border-radius-default: var(--scania-unit-4);
-  --component-button-border-standard-primary-default: var(--color-border-none);
-  --component-button-border-standard-primary-hover: var(--color-border-none);
-  --component-button-border-standard-primary-active: var(--color-border-none);
-  --component-button-border-standard-secondary-default: var(--color-border-soft);
-  --component-button-border-standard-secondary-hover: var(--color-border-subtle);
-  --component-button-border-standard-secondary-active: var(--color-border-strong);
-  --component-button-border-standard-tertiary-default: var(--color-border-none);
-  --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
-  --component-button-border-standard-tertiary-active: var(--color-border-strong);
-  --component-button-border-danger-primary-default: var(--color-border-none);
-  --component-button-border-danger-primary-hover: var(--color-border-none);
-  --component-button-border-danger-primary-active: var(--color-border-none);
-  --component-button-border-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
-  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
-  --component-button-border-danger-tertiary-default: var(--color-border-none);
-  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
-  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
-  --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
-  --component-button-icon-standard-primary-hover: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-icon-standard-primary-active: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-icon-standard-secondary-default: var(--color-text-strong);
-  --component-button-icon-standard-secondary-hover: var(--color-text-strong);
-  --component-button-icon-standard-secondary-active: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-default: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-active: var(--color-text-strong);
-  --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
-  --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
-  --component-button-icon-danger-primary-active: var(
-    --component-button-text-danger-primary-default
-  );
-  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
-  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
-  --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
-  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
-  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
-  --component-button-opacity-disabled: var(--scania-opacity-25);
-  --component-button-text-standard-primary-default: var(--color-text-inverse-brand);
-  --component-button-text-standard-primary-hover: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-text-standard-primary-active: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-text-standard-secondary-default: var(--color-text-strong);
-  --component-button-text-standard-secondary-hover: var(--color-text-strong);
-  --component-button-text-standard-secondary-active: var(--color-text-strong);
-  --component-button-text-standard-tertiary-default: var(--color-text-strong);
-  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-text-standard-tertiary-active: var(--color-text-strong);
-  --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
-  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
-  --component-button-text-danger-primary-active: var(
-    --component-button-text-danger-primary-default
-  );
-  --component-button-text-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
-  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
-  --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
-  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
-  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
-}
-
-.traton .tds-mode-light,
-.traton .tl-mode-light {
-  --component-button-background-standard-primary-default: #004852;
-  --component-button-background-standard-primary-hover: #003137;
-  --component-button-background-standard-primary-active: #002429;
-  --component-button-background-standard-secondary-default: var(--color-background-none);
-  --component-button-background-standard-secondary-hover: var(--color-background-none);
-  --component-button-background-standard-secondary-active: var(--color-background-none);
-  --component-button-background-standard-tertiary-default: var(--color-background-none);
-  --component-button-background-standard-tertiary-hover: var(--color-background-none);
-  --component-button-background-standard-tertiary-active: var(--color-background-none);
-  --component-button-background-danger-primary-default: var(--color-system-danger-default);
-  --component-button-background-danger-primary-hover: var(--traton-color-red-400);
-  --component-button-background-danger-primary-active: var(--traton-color-red-500);
-  --component-button-background-danger-secondary-default: var(--color-background-none);
-  --component-button-background-danger-secondary-hover: var(--color-background-none);
-  --component-button-background-danger-secondary-active: var(--color-background-none);
-  --component-button-background-danger-tertiary-default: var(--color-background-none);
-  --component-button-background-danger-tertiary-hover: var(--color-background-none);
-  --component-button-background-danger-tertiary-active: var(--color-background-none);
-  --component-button-border-radius-default: var(--traton-unit-56);
-  --component-button-border-standard-primary-default: var(--color-border-none);
-  --component-button-border-standard-primary-hover: var(--color-border-none);
-  --component-button-border-standard-primary-active: var(--color-border-none);
-  --component-button-border-standard-secondary-default: var(--color-border-soft);
-  --component-button-border-standard-secondary-hover: var(--color-border-subtle);
-  --component-button-border-standard-secondary-active: var(--color-border-strong);
-  --component-button-border-standard-tertiary-default: var(--color-border-none);
-  --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
-  --component-button-border-standard-tertiary-active: var(--color-border-strong);
-  --component-button-border-danger-primary-default: var(--color-border-none);
-  --component-button-border-danger-primary-hover: var(--color-border-none);
-  --component-button-border-danger-primary-active: var(--color-border-none);
-  --component-button-border-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
-  --component-button-border-danger-secondary-active: var(--traton-color-red-500);
-  --component-button-border-danger-tertiary-default: var(--color-border-none);
-  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
-  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
-  --component-button-icon-standard-primary-default: #fff;
-  --component-button-icon-standard-primary-hover: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-icon-standard-primary-active: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-icon-standard-secondary-default: var(--color-text-strong);
-  --component-button-icon-standard-secondary-hover: var(--color-text-strong);
-  --component-button-icon-standard-secondary-active: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-default: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-active: var(--color-text-strong);
-  --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
-  --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
-  --component-button-icon-danger-primary-active: var(
-    --component-button-text-danger-primary-default
-  );
-  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-icon-danger-secondary-hover: var(
-    --component-button-text-danger-secondary-default
-  );
-  --component-button-icon-danger-secondary-active: var(
-    --component-button-text-danger-secondary-default
-  );
-  --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
-  --component-button-icon-danger-tertiary-hover: var(
-    --component-button-text-danger-tertiary-default
-  );
-  --component-button-icon-danger-tertiary-active: var(
-    --component-button-text-danger-tertiary-default
-  );
-  --component-button-opacity-disabled: var(--traton-opacity-25);
-  --component-button-text-standard-primary-default: #fff;
-  --component-button-text-standard-primary-hover: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-text-standard-primary-active: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-text-standard-secondary-default: var(--color-text-strong);
-  --component-button-text-standard-secondary-hover: var(--color-text-strong);
-  --component-button-text-standard-secondary-active: var(--color-text-strong);
-  --component-button-text-standard-tertiary-default: var(--color-text-strong);
-  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-text-standard-tertiary-active: var(--color-text-strong);
-  --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
-  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
-  --component-button-text-danger-primary-active: var(
-    --component-button-text-danger-primary-default
-  );
-  --component-button-text-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-text-danger-secondary-hover: var(
-    --component-button-text-danger-secondary-default
-  );
-  --component-button-text-danger-secondary-active: var(
-    --component-button-text-danger-secondary-default
-  );
-  --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
-  --component-button-text-danger-tertiary-hover: var(
-    --component-button-text-danger-tertiary-default
-  );
-  --component-button-text-danger-tertiary-active: var(
-    --component-button-text-danger-tertiary-default
-  );
-}
-
-.tds-mode-dark,
-.scania .tds-mode-dark,
-.scania .tl-mode-dark {
-  --component-button-background-standard-primary-default: var(--scania-color-blue-400);
-  --component-button-background-standard-primary-hover: var(--scania-color-blue-500);
-  --component-button-background-standard-primary-active: var(--scania-color-blue-600);
-  --component-button-background-standard-secondary-default: var(--color-background-none);
-  --component-button-background-standard-secondary-hover: var(--color-background-none);
-  --component-button-background-standard-secondary-active: var(--color-background-none);
-  --component-button-background-standard-tertiary-default: var(--color-background-none);
-  --component-button-background-standard-tertiary-hover: var(--color-background-none);
-  --component-button-background-standard-tertiary-active: var(--color-background-none);
-  --component-button-background-danger-primary-default: var(--color-system-danger-subtle);
-  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
-  --component-button-background-danger-primary-active: var(--scania-color-red-600);
-  --component-button-background-danger-secondary-default: var(--color-background-none);
-  --component-button-background-danger-secondary-hover: var(--color-background-none);
-  --component-button-background-danger-secondary-active: var(--color-background-none);
-  --component-button-background-danger-tertiary-default: var(--color-background-none);
-  --component-button-background-danger-tertiary-hover: var(--color-background-none);
-  --component-button-background-danger-tertiary-active: var(--color-background-none);
-  --component-button-border-radius-default: var(--scania-unit-4);
-  --component-button-border-standard-primary-default: var(--color-border-none);
-  --component-button-border-standard-primary-hover: var(--color-border-none);
-  --component-button-border-standard-primary-active: var(--color-border-none);
-  --component-button-border-standard-secondary-default: var(--color-border-soft);
-  --component-button-border-standard-secondary-hover: var(--color-border-subtle);
-  --component-button-border-standard-secondary-active: var(--color-border-strong);
-  --component-button-border-standard-tertiary-default: var(--color-border-none);
-  --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
-  --component-button-border-standard-tertiary-active: var(--color-border-strong);
-  --component-button-border-danger-primary-default: var(--color-border-none);
-  --component-button-border-danger-primary-hover: var(--color-border-none);
-  --component-button-border-danger-primary-active: var(--color-border-none);
-  --component-button-border-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
-  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
-  --component-button-border-danger-tertiary-default: var(--color-border-none);
-  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
-  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
-  --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
-  --component-button-icon-standard-primary-hover: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-icon-standard-primary-active: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-icon-standard-secondary-default: var(--color-text-strong);
-  --component-button-icon-standard-secondary-hover: var(--color-text-strong);
-  --component-button-icon-standard-secondary-active: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-default: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-active: var(--color-text-strong);
-  --component-button-icon-danger-primary-default: var(--color-text-strong);
-  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
-  --component-button-icon-danger-primary-active: var(
-    --component-button-icon-danger-primary-default
-  );
-  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
-  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
-  --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
-  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
-  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
-  --component-button-opacity-disabled: var(--scania-opacity-25);
-  --component-button-text-standard-primary-default: var(--color-text-brand);
-  --component-button-text-standard-primary-hover: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-text-standard-primary-active: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-text-standard-secondary-default: var(--color-text-strong);
-  --component-button-text-standard-secondary-hover: var(--color-text-strong);
-  --component-button-text-standard-secondary-active: var(--color-text-strong);
-  --component-button-text-standard-tertiary-default: var(--color-text-strong);
-  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-text-standard-tertiary-active: var(--color-text-strong);
-  --component-button-text-danger-primary-default: var(--color-text-strong);
-  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
-  --component-button-text-danger-primary-active: var(
-    --component-button-text-danger-primary-default
-  );
-  --component-button-text-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
-  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
-  --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
-  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
-  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
-}
-
-.traton .tds-mode-dark,
-.traton .tl-mode-dark {
-  --component-button-background-standard-primary-default: #c2bfb6;
-  --component-button-background-standard-primary-hover: #d6d4c9;
-  --component-button-background-standard-primary-active: #a6a49c;
-  --component-button-background-standard-secondary-default: var(--color-background-none);
-  --component-button-background-standard-secondary-hover: var(--color-background-none);
-  --component-button-background-standard-secondary-active: var(--color-background-none);
-  --component-button-background-standard-tertiary-default: var(--color-background-none);
-  --component-button-background-standard-tertiary-hover: var(--color-background-none);
-  --component-button-background-standard-tertiary-active: var(--color-background-none);
-  --component-button-background-danger-primary-default: var(--color-system-danger-default);
-  --component-button-background-danger-primary-hover: var(--traton-color-red-400);
-  --component-button-background-danger-primary-active: var(--traton-color-red-500);
-  --component-button-background-danger-secondary-default: var(--color-background-none);
-  --component-button-background-danger-secondary-hover: var(--color-background-none);
-  --component-button-background-danger-secondary-active: var(--color-background-none);
-  --component-button-background-danger-tertiary-default: var(--color-background-none);
-  --component-button-background-danger-tertiary-hover: var(--color-background-none);
-  --component-button-background-danger-tertiary-active: var(--color-background-none);
-  --component-button-border-radius-default: var(--traton-unit-56);
-  --component-button-border-standard-primary-default: var(--color-border-none);
-  --component-button-border-standard-primary-hover: var(--color-border-none);
-  --component-button-border-standard-primary-active: var(--color-border-none);
-  --component-button-border-standard-secondary-default: var(--color-border-soft);
-  --component-button-border-standard-secondary-hover: var(--color-border-subtle);
-  --component-button-border-standard-secondary-active: var(--color-border-strong);
-  --component-button-border-standard-tertiary-default: var(--color-border-none);
-  --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
-  --component-button-border-standard-tertiary-active: var(--color-border-strong);
-  --component-button-border-danger-primary-default: var(--color-border-none);
-  --component-button-border-danger-primary-hover: var(--color-border-none);
-  --component-button-border-danger-primary-active: var(--color-border-none);
-  --component-button-border-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
-  --component-button-border-danger-secondary-active: var(--traton-color-red-500);
-  --component-button-border-danger-tertiary-default: var(--color-border-none);
-  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
-  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
-  --component-button-icon-standard-primary-default: #000;
-  --component-button-icon-standard-primary-hover: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-icon-standard-primary-active: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-icon-standard-secondary-default: var(--color-text-strong);
-  --component-button-icon-standard-secondary-hover: var(--color-text-strong);
-  --component-button-icon-standard-secondary-active: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-default: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-active: var(--color-text-strong);
-  --component-button-icon-danger-primary-default: var(--color-text-strong);
-  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
-  --component-button-icon-danger-primary-active: var(
-    --component-button-icon-danger-primary-default
-  );
-  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-icon-danger-secondary-hover: var(
-    --component-button-text-danger-secondary-default
-  );
-  --component-button-icon-danger-secondary-active: var(
-    --component-button-text-danger-secondary-default
-  );
-  --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
-  --component-button-icon-danger-tertiary-hover: var(
-    --component-button-text-danger-tertiary-default
-  );
-  --component-button-icon-danger-tertiary-active: var(
-    --component-button-text-danger-tertiary-default
-  );
-  --component-button-opacity-disabled: var(--traton-opacity-25);
-  --component-button-text-standard-primary-default: #000;
-  --component-button-text-standard-primary-hover: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-text-standard-primary-active: var(
-    --component-button-text-standard-primary-default
-  );
-  --component-button-text-standard-secondary-default: var(--color-text-strong);
-  --component-button-text-standard-secondary-hover: var(--color-text-strong);
-  --component-button-text-standard-secondary-active: var(--color-text-strong);
-  --component-button-text-standard-tertiary-default: var(--color-text-strong);
-  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-text-standard-tertiary-active: var(--color-text-strong);
-  --component-button-text-danger-primary-default: var(--color-text-strong);
-  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
-  --component-button-text-danger-primary-active: var(
-    --component-button-text-danger-primary-default
-  );
-  --component-button-text-danger-secondary-default: var(--color-system-danger-default);
-  --component-button-text-danger-secondary-hover: var(
-    --component-button-text-danger-secondary-default
-  );
-  --component-button-text-danger-secondary-active: var(
-    --component-button-text-danger-secondary-default
-  );
-  --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
-  --component-button-text-danger-tertiary-hover: var(
-    --component-button-text-danger-tertiary-default
-  );
-  --component-button-text-danger-tertiary-active: var(
-    --component-button-text-danger-tertiary-default
-  );
-}
-
-.tl-button {
-  --button-transparent: transparent;
-  --button-white: var(--color-brand-neutral-white);
-  --button-black: var(--color-brand-neutral-black);
-  --button-radius: var(--dimension-radius-for-surface-clickable);
-  --button-sm-only-icon-padding: 11px;
-  --button-md-only-icon-padding: 13px;
-  --button-lg-only-icon-padding: 17px;
-  --button-primary-background: var(--color-background-accent-primary-default);
-  --button-primary-background-hover: var(--color-background-accent-primary-hover);
-  --button-primary-background-active: var(--color-background-accent-primary-pressed);
-  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
-  --button-primary-color: var(--component-button-primary-text);
-  --button-primary-color-disabled: var(--color-foreground-text-disabled);
-  --button-primary-border-color: var(--button-transparent);
-  --button-primary-border-color-disabled: var(--button-transparent);
-  --button-primary-background-focus: var(--color-background-accent-primary-focus);
-  --button-primary-color-focus: var(--component-button-primary-text);
-  --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
-  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
-  --button-secondary-background: var(--button-transparent);
-  --button-secondary-color: var(--color-foreground-text-strong);
-  --button-secondary-border-color: var(--color-foreground-border-soft);
-  --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
-  --button-secondary-border-color-active: var(--color-foreground-border-strong);
-  --button-secondary-background-disabled: var(--button-transparent);
-  --button-secondary-color-disabled: var(--color-foreground-text-disabled);
-  --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
-  --button-secondary-background-focus: var(--button-transparent);
-  --button-secondary-color-focus: var(--color-foreground-text-strong);
-  --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
-  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
-  --button-ghost-background: var(--button-transparent);
-  --button-ghost-color: var(--color-foreground-text-strong);
-  --button-ghost-border-color: var(--button-transparent);
-  --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
-  --button-ghost-border-color-active: var(--color-foreground-border-strong);
-  --button-ghost-color-disabled: var(--color-foreground-text-disabled);
-  --button-ghost-border-color-disabled: var(--button-transparent);
-  --button-ghost-background-focus: var(--button-transparent);
-  --button-ghost-color-focus: var(--color-foreground-text-strong);
-  --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
-  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
-  --button-danger-background: var(--color-background-accent-danger-default);
-  --button-danger-color: var(--button-white);
-  --button-danger-border-color: var(--button-transparent);
-  --button-danger-background-hover: var(--color-background-accent-danger-hover);
-  --button-danger-background-active: var(--color-background-accent-danger-pressed);
-  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
-  --button-danger-color-disabled: var(--color-foreground-text-disabled);
-  --button-danger-border-color-disabled: var(--button-transparent);
-  --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
-  --button-danger-background-focus: var(--color-background-accent-danger-focus);
-  --button-danger-color-focus: var(--button-white);
-  --button-danger-border-color-focus: var(--button-transparent);
-  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
-}
-.tl-button .tl-button--primary {
-  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
-  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
-}
-.tl-button .tl-button--secondary {
-  --button-primary-background-disabled: var(--button-white);
-  --button-danger-background-disabled: var(--button-white);
-}
-
-.scania .tl-button {
-  --button-outline-width: 2px;
-}
-
-.traton .tl-button {
-  --button-outline-width: 4px;
-}
-
-/* Base button styles */
-.tl-button {
-  box-sizing: border-box;
-}
-.tl-button * {
-  box-sizing: border-box;
-}
-.tl-button {
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  border-radius: var(--button-radius);
-  border: 1px solid var(--button-secondary-border-color);
-  box-shadow: none;
-  position: relative;
-  text-decoration: none;
-  cursor: pointer;
-}
-.tl-button:focus-visible {
-  outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
-  outline-offset: calc(var(--button-outline-width) * -1);
-}
-.tl-button {
-  /* Variants */
-}
-.tl-button--primary {
-  background-color: var(--button-primary-background);
-  color: var(--button-primary-color);
-  border-color: var(--button-primary-border-color);
-}
-.tl-button--primary:hover:not(:disabled) {
-  background-color: var(--button-primary-background-hover);
-}
-.tl-button--primary:disabled {
-  background-color: var(--button-primary-background-disabled);
-  color: var(--button-primary-color-disabled);
-  border-color: var(--button-primary-border-color-disabled);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.tl-button--primary:focus-visible:not(:disabled) {
-  background: var(--button-primary-background-focus);
-  border-color: var(--button-primary-border-color-focus);
-  color: var(--button-primary-color-focus);
-  outline-color: var(--button-primary-outline-color-focus);
-}
-.tl-button--primary:active:not(:disabled):focus-visible {
-  outline: none;
-  outline-offset: none;
-}
-.tl-button--primary:active:not(:disabled) {
-  background-color: var(--button-primary-background-active);
-  border-color: var(--button-primary-background-active);
-}
-.tl-button--secondary {
-  background-color: var(--button-secondary-background);
-  color: var(--button-secondary-color);
-  border-color: var(--button-secondary-border-color);
-}
-.tl-button--secondary:hover:not(:disabled) {
-  border-color: var(--button-secondary-border-color-hover);
-}
-.tl-button--secondary:disabled {
-  background-color: var(--button-secondary-background-disabled);
-  color: var(--button-secondary-color-disabled);
-  border-color: var(--button-secondary-border-color-disabled);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.tl-button--secondary:focus-visible:not(:disabled) {
-  background: var(--button-secondary-background-focus);
-  border-color: var(--button-secondary-border-color-focus);
-  color: var(--button-secondary-color-focus);
-  outline-color: var(--button-secondary-outline-color-focus);
-}
-.tl-button--secondary:active:not(:disabled):focus-visible {
-  outline: none;
-}
-.tl-button--secondary:active:not(:disabled) {
-  border-color: var(--button-secondary-border-color-active);
-}
-.tl-button--ghost {
-  background-color: var(--button-ghost-background);
-  color: var(--button-ghost-color);
-  border-color: var(--button-ghost-border-color);
-}
-.tl-button--ghost:hover:not(:disabled) {
-  border-color: var(--button-ghost-border-color-hover);
-}
-.tl-button--ghost:disabled {
-  color: var(--button-ghost-color-disabled);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.tl-button--ghost:focus-visible:not(:disabled) {
-  background: var(--button-ghost-background-focus);
-  border-color: var(--button-ghost-border-color-focus);
-  color: var(--button-ghost-color-focus);
-  outline-color: var(--button-ghost-outline-color-focus);
-}
-.tl-button--ghost:active:not(:disabled):focus-visible {
-  outline: none;
-}
-.tl-button--ghost:active:not(:disabled) {
-  border-color: var(--button-ghost-border-color-active);
-}
-.tl-button--danger {
-  background-color: var(--button-danger-background);
-  color: var(--button-danger-color);
-  border-color: var(--button-danger-border-color);
-}
-.tl-button--danger:hover:not(:disabled) {
-  background-color: var(--button-danger-background-hover);
-}
-.tl-button--danger:disabled {
-  background-color: var(--button-danger-background-disabled);
-  color: var(--button-danger-color-disabled);
-  border-color: var(--button-danger-border-color-disabled);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.tl-button--danger:focus-visible:not(:disabled) {
-  background: var(--button-danger-background-focus);
-  border-color: var(--button-danger-border-color-focus);
-  color: var(--button-danger-color-focus);
-  outline-color: var(--button-danger-outline-color-focus);
-}
-.tl-button--danger:active:not(:disabled):focus-visible {
-  outline: none;
-}
-.tl-button--danger:active:not(:disabled) {
-  background-color: var(--button-danger-background-active);
-  border-color: var(--button-danger-border-color-active);
-}
-.tl-button {
-  /* Sizes */
-}
-.tl-button--xs {
-  padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
-  height: 24px;
-}
-.tl-button--sm {
-  padding: var(--tds-spacing-element-12);
-  height: 40px;
-}
-.tl-button--md {
-  padding: var(--tds-spacing-element-16);
-  height: 48px;
-}
-.tl-button--lg {
-  padding: var(--tds-spacing-element-20);
-  height: 56px;
-}
-.tl-button {
-  /* Icon specific styles */
-}
-.tl-button--icon.tl-button--sm {
-  padding: 10px var(--tds-spacing-element-12);
-}
-.tl-button--icon.tl-button--sm .tl-icon {
-  margin-left: var(--tds-spacing-element-12);
-}
-.tl-button--icon.tl-button--md {
-  padding: 14px var(--tds-spacing-element-16);
-}
-.tl-button--icon.tl-button--md .tl-icon {
-  margin-left: var(--tds-spacing-element-16);
-}
-.tl-button--icon.tl-button--lg {
-  padding: 18px var(--tds-spacing-element-20);
-}
-.tl-button--icon.tl-button--lg .tl-icon {
-  margin-left: var(--tds-spacing-element-20);
-}
-.tl-button {
-  /* Only icon specific styles */
-}
-.tl-button--only-icon.tl-button--sm {
-  padding: var(--button-sm-only-icon-padding);
-}
-.tl-button--only-icon.tl-button--sm .tl-icon {
-  margin-left: 0;
-}
-.tl-button--only-icon.tl-button--md {
-  padding: var(--button-md-only-icon-padding);
-}
-.tl-button--only-icon.tl-button--md .tl-icon {
-  margin-left: 0;
-}
-.tl-button--only-icon.tl-button--lg {
-  padding: var(--button-lg-only-icon-padding);
-}
-.tl-button--only-icon.tl-button--lg .tl-icon {
-  margin-left: 0;
-}
-.tl-button {
-  /* Full width */
-}
-.tl-button--full-width {
-  width: 100%;
-}
-
-/**
- * Do not edit directly, this file was auto-generated.
- */
-.tl-icon {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  flex-shrink: 0;
-  color: inherit;
-  mask-image: none;
-}
-.tl-icon--24v_battery {
-  mask-image: var(--icon-24v_battery-svg);
-  background-color: currentcolor;
-}
-.tl-icon--24v_battery_inactive {
-  mask-image: var(--icon-24v_battery_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--acceleration {
-  mask-image: var(--icon-acceleration-svg);
-  background-color: currentcolor;
-}
-.tl-icon--acceleration_inactive {
-  mask-image: var(--icon-acceleration_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--adblue {
-  mask-image: var(--icon-adblue-svg);
-  background-color: currentcolor;
-}
-.tl-icon--adblue_inactive {
-  mask-image: var(--icon-adblue_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--arrow_diagonal {
-  mask-image: var(--icon-arrow_diagonal-svg);
-  background-color: currentcolor;
-}
-.tl-icon--arrow_down {
-  mask-image: var(--icon-arrow_down-svg);
-  background-color: currentcolor;
-}
-.tl-icon--arrow_left {
-  mask-image: var(--icon-arrow_left-svg);
-  background-color: currentcolor;
-}
-.tl-icon--arrow_right {
-  mask-image: var(--icon-arrow_right-svg);
-  background-color: currentcolor;
-}
-.tl-icon--arrow_up {
-  mask-image: var(--icon-arrow_up-svg);
-  background-color: currentcolor;
-}
-.tl-icon--audio {
-  mask-image: var(--icon-audio-svg);
-  background-color: currentcolor;
-}
-.tl-icon--audio_inactive {
-  mask-image: var(--icon-audio_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--award {
-  mask-image: var(--icon-award-svg);
-  background-color: currentcolor;
-}
-.tl-icon--back {
-  mask-image: var(--icon-back-svg);
-  background-color: currentcolor;
-}
-.tl-icon--backward {
-  mask-image: var(--icon-backward-svg);
-  background-color: currentcolor;
-}
-.tl-icon--backward_inactive {
-  mask-image: var(--icon-backward_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--bento {
-  mask-image: var(--icon-bento-svg);
-  background-color: currentcolor;
-}
-.tl-icon--bug {
-  mask-image: var(--icon-bug-svg);
-  background-color: currentcolor;
-}
-.tl-icon--bug_inactive {
-  mask-image: var(--icon-bug_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--burger {
-  mask-image: var(--icon-burger-svg);
-  background-color: currentcolor;
-}
-.tl-icon--bus {
-  mask-image: var(--icon-bus-svg);
-  background-color: currentcolor;
-}
-.tl-icon--bus_inactive {
-  mask-image: var(--icon-bus_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--cab_door {
-  mask-image: var(--icon-cab_door-svg);
-  background-color: currentcolor;
-}
-.tl-icon--calendar {
-  mask-image: var(--icon-calendar-svg);
-  background-color: currentcolor;
-}
-.tl-icon--calendar_inactive {
-  mask-image: var(--icon-calendar_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--camera {
-  mask-image: var(--icon-camera-svg);
-  background-color: currentcolor;
-}
-.tl-icon--camera_inactive {
-  mask-image: var(--icon-camera_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--card {
-  mask-image: var(--icon-card-svg);
-  background-color: currentcolor;
-}
-.tl-icon--cart {
-  mask-image: var(--icon-cart-svg);
-  background-color: currentcolor;
-}
-.tl-icon--charging_complete {
-  mask-image: var(--icon-charging_complete-svg);
-  background-color: currentcolor;
-}
-.tl-icon--charging_failed {
-  mask-image: var(--icon-charging_failed-svg);
-  background-color: currentcolor;
-}
-.tl-icon--charging_speed {
-  mask-image: var(--icon-charging_speed-svg);
-  background-color: currentcolor;
-}
-.tl-icon--charging_speed_inactive {
-  mask-image: var(--icon-charging_speed_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--charging_stopped {
-  mask-image: var(--icon-charging_stopped-svg);
-  background-color: currentcolor;
-}
-.tl-icon--chevron_down {
-  mask-image: var(--icon-chevron_down-svg);
-  background-color: currentcolor;
-}
-.tl-icon--chevron_left {
-  mask-image: var(--icon-chevron_left-svg);
-  background-color: currentcolor;
-}
-.tl-icon--chevron_right {
-  mask-image: var(--icon-chevron_right-svg);
-  background-color: currentcolor;
-}
-.tl-icon--chevron_up {
-  mask-image: var(--icon-chevron_up-svg);
-  background-color: currentcolor;
-}
-.tl-icon--clock {
-  mask-image: var(--icon-clock-svg);
-  background-color: currentcolor;
-}
-.tl-icon--clock_inactive {
-  mask-image: var(--icon-clock_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--configurator {
-  mask-image: var(--icon-configurator-svg);
-  background-color: currentcolor;
-}
-.tl-icon--contact {
-  mask-image: var(--icon-contact-svg);
-  background-color: currentcolor;
-}
-.tl-icon--contact_inactive {
-  mask-image: var(--icon-contact_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--cookie {
-  mask-image: var(--icon-cookie-svg);
-  background-color: currentcolor;
-}
-.tl-icon--cookie_inactive {
-  mask-image: var(--icon-cookie_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--coolant_level {
-  mask-image: var(--icon-coolant_level-svg);
-  background-color: currentcolor;
-}
-.tl-icon--coolant_level_inactive {
-  mask-image: var(--icon-coolant_level_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--copy {
-  mask-image: var(--icon-copy-svg);
-  background-color: currentcolor;
-}
-.tl-icon--cross {
-  mask-image: var(--icon-cross-svg);
-  background-color: currentcolor;
-}
-.tl-icon--cup {
-  mask-image: var(--icon-cup-svg);
-  background-color: currentcolor;
-}
-.tl-icon--cup_inactive {
-  mask-image: var(--icon-cup_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--dashboard {
-  mask-image: var(--icon-dashboard-svg);
-  background-color: currentcolor;
-}
-.tl-icon--department {
-  mask-image: var(--icon-department-svg);
-  background-color: currentcolor;
-}
-.tl-icon--department_inactive {
-  mask-image: var(--icon-department_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--departure_scheduling {
-  mask-image: var(--icon-departure_scheduling-svg);
-  background-color: currentcolor;
-}
-.tl-icon--departure_scheduling_inactive {
-  mask-image: var(--icon-departure_scheduling_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--diamond {
-  mask-image: var(--icon-diamond-svg);
-  background-color: currentcolor;
-}
-.tl-icon--diamond_inactive {
-  mask-image: var(--icon-diamond_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--document {
-  mask-image: var(--icon-document-svg);
-  background-color: currentcolor;
-}
-.tl-icon--document_check {
-  mask-image: var(--icon-document_check-svg);
-  background-color: currentcolor;
-}
-.tl-icon--document_doc {
-  mask-image: var(--icon-document_doc-svg);
-  background-color: currentcolor;
-}
-.tl-icon--document_eye {
-  mask-image: var(--icon-document_eye-svg);
-  background-color: currentcolor;
-}
-.tl-icon--document_pdf {
-  mask-image: var(--icon-document_pdf-svg);
-  background-color: currentcolor;
-}
-.tl-icon--document_plus {
-  mask-image: var(--icon-document_plus-svg);
-  background-color: currentcolor;
-}
-.tl-icon--document_plus_inactive {
-  mask-image: var(--icon-document_plus_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--document_ppt {
-  mask-image: var(--icon-document_ppt-svg);
-  background-color: currentcolor;
-}
-.tl-icon--document_tool {
-  mask-image: var(--icon-document_tool-svg);
-  background-color: currentcolor;
-}
-.tl-icon--document_wrong {
-  mask-image: var(--icon-document_wrong-svg);
-  background-color: currentcolor;
-}
-.tl-icon--document_xls {
-  mask-image: var(--icon-document_xls-svg);
-  background-color: currentcolor;
-}
-.tl-icon--dollar {
-  mask-image: var(--icon-dollar-svg);
-  background-color: currentcolor;
-}
-.tl-icon--doner {
-  mask-image: var(--icon-doner-svg);
-  background-color: currentcolor;
-}
-.tl-icon--double_kebab {
-  mask-image: var(--icon-double_kebab-svg);
-  background-color: currentcolor;
-}
-.tl-icon--download {
-  mask-image: var(--icon-download-svg);
-  background-color: currentcolor;
-}
-.tl-icon--driving_licence {
-  mask-image: var(--icon-driving_licence-svg);
-  background-color: currentcolor;
-}
-.tl-icon--driving_licence_inactive {
-  mask-image: var(--icon-driving_licence_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--drop {
-  mask-image: var(--icon-drop-svg);
-  background-color: currentcolor;
-}
-.tl-icon--drop_inactive {
-  mask-image: var(--icon-drop_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--edit {
-  mask-image: var(--icon-edit-svg);
-  background-color: currentcolor;
-}
-.tl-icon--edit_inactive {
-  mask-image: var(--icon-edit_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--email {
-  mask-image: var(--icon-email-svg);
-  background-color: currentcolor;
-}
-.tl-icon--engine {
-  mask-image: var(--icon-engine-svg);
-  background-color: currentcolor;
-}
-.tl-icon--engine_inactive {
-  mask-image: var(--icon-engine_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--environment {
-  mask-image: var(--icon-environment-svg);
-  background-color: currentcolor;
-}
-.tl-icon--environment_inactive {
-  mask-image: var(--icon-environment_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--error {
-  mask-image: var(--icon-error-svg);
-  background-color: currentcolor;
-}
-.tl-icon--exit {
-  mask-image: var(--icon-exit-svg);
-  background-color: currentcolor;
-}
-.tl-icon--expand {
-  mask-image: var(--icon-expand-svg);
-  background-color: currentcolor;
-}
-.tl-icon--expand_inactive {
-  mask-image: var(--icon-expand_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--export {
-  mask-image: var(--icon-export-svg);
-  background-color: currentcolor;
-}
-.tl-icon--export_inactive {
-  mask-image: var(--icon-export_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--eye {
-  mask-image: var(--icon-eye-svg);
-  background-color: currentcolor;
-}
-.tl-icon--eye_inactive {
-  mask-image: var(--icon-eye_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--face_dissatisfied {
-  mask-image: var(--icon-face_dissatisfied-svg);
-  background-color: currentcolor;
-}
-.tl-icon--face_neutral {
-  mask-image: var(--icon-face_neutral-svg);
-  background-color: currentcolor;
-}
-.tl-icon--face_satisfied {
-  mask-image: var(--icon-face_satisfied-svg);
-  background-color: currentcolor;
-}
-.tl-icon--factory {
-  mask-image: var(--icon-factory-svg);
-  background-color: currentcolor;
-}
-.tl-icon--factory_inactive {
-  mask-image: var(--icon-factory_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--ferry {
-  mask-image: var(--icon-ferry-svg);
-  background-color: currentcolor;
-}
-.tl-icon--ferry_inactive {
-  mask-image: var(--icon-ferry_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--filters {
-  mask-image: var(--icon-filters-svg);
-  background-color: currentcolor;
-}
-.tl-icon--filters_inactive {
-  mask-image: var(--icon-filters_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--flash {
-  mask-image: var(--icon-flash-svg);
-  background-color: currentcolor;
-}
-.tl-icon--flash_inactive {
-  mask-image: var(--icon-flash_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--folder {
-  mask-image: var(--icon-folder-svg);
-  background-color: currentcolor;
-}
-.tl-icon--forward {
-  mask-image: var(--icon-forward-svg);
-  background-color: currentcolor;
-}
-.tl-icon--forward_inactive {
-  mask-image: var(--icon-forward_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--fuel {
-  mask-image: var(--icon-fuel-svg);
-  background-color: currentcolor;
-}
-.tl-icon--fuel_gauge {
-  mask-image: var(--icon-fuel_gauge-svg);
-  background-color: currentcolor;
-}
-.tl-icon--fuel_gauge_inactive {
-  mask-image: var(--icon-fuel_gauge_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--fuel_inactive {
-  mask-image: var(--icon-fuel_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--gift {
-  mask-image: var(--icon-gift-svg);
-  background-color: currentcolor;
-}
-.tl-icon--gift_inactive {
-  mask-image: var(--icon-gift_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--global {
-  mask-image: var(--icon-global-svg);
-  background-color: currentcolor;
-}
-.tl-icon--guided_tour {
-  mask-image: var(--icon-guided_tour-svg);
-  background-color: currentcolor;
-}
-.tl-icon--guided_tour_inactive {
-  mask-image: var(--icon-guided_tour_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--hatch_open {
-  mask-image: var(--icon-hatch_open-svg);
-  background-color: currentcolor;
-}
-.tl-icon--hatch_open_1 {
-  mask-image: var(--icon-hatch_open_1-svg);
-  background-color: currentcolor;
-}
-.tl-icon--hatch_open_2 {
-  mask-image: var(--icon-hatch_open_2-svg);
-  background-color: currentcolor;
-}
-.tl-icon--hatch_open_inactive {
-  mask-image: var(--icon-hatch_open_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--heart {
-  mask-image: var(--icon-heart-svg);
-  background-color: currentcolor;
-}
-.tl-icon--heart_inactive {
-  mask-image: var(--icon-heart_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--heating_inactive_screen {
-  mask-image: var(--icon-heating_inactive_screen-svg);
-  background-color: currentcolor;
-}
-.tl-icon--history {
-  mask-image: var(--icon-history-svg);
-  background-color: currentcolor;
-}
-.tl-icon--history_inactive {
-  mask-image: var(--icon-history_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--home {
-  mask-image: var(--icon-home-svg);
-  background-color: currentcolor;
-}
-.tl-icon--home_inactive {
-  mask-image: var(--icon-home_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--idea {
-  mask-image: var(--icon-idea-svg);
-  background-color: currentcolor;
-}
-.tl-icon--idea_inactive {
-  mask-image: var(--icon-idea_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--image {
-  mask-image: var(--icon-image-svg);
-  background-color: currentcolor;
-}
-.tl-icon--image_add {
-  mask-image: var(--icon-image_add-svg);
-  background-color: currentcolor;
-}
-.tl-icon--image_inactive {
-  mask-image: var(--icon-image_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--image_set {
-  mask-image: var(--icon-image_set-svg);
-  background-color: currentcolor;
-}
-.tl-icon--info {
-  mask-image: var(--icon-info-svg);
-  background-color: currentcolor;
-}
-.tl-icon--insights {
-  mask-image: var(--icon-insights-svg);
-  background-color: currentcolor;
-}
-.tl-icon--kebab {
-  mask-image: var(--icon-kebab-svg);
-  background-color: currentcolor;
-}
-.tl-icon--key {
-  mask-image: var(--icon-key-svg);
-  background-color: currentcolor;
-}
-.tl-icon--key_inactive {
-  mask-image: var(--icon-key_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--language {
-  mask-image: var(--icon-language-svg);
-  background-color: currentcolor;
-}
-.tl-icon--layer {
-  mask-image: var(--icon-layer-svg);
-  background-color: currentcolor;
-}
-.tl-icon--layer_inactive {
-  mask-image: var(--icon-layer_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--link {
-  mask-image: var(--icon-link-svg);
-  background-color: currentcolor;
-}
-.tl-icon--link_broken {
-  mask-image: var(--icon-link_broken-svg);
-  background-color: currentcolor;
-}
-.tl-icon--list {
-  mask-image: var(--icon-list-svg);
-  background-color: currentcolor;
-}
-.tl-icon--list_inactive {
-  mask-image: var(--icon-list_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--lock {
-  mask-image: var(--icon-lock-svg);
-  background-color: currentcolor;
-}
-.tl-icon--lock_inactive {
-  mask-image: var(--icon-lock_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--map_cursor {
-  mask-image: var(--icon-map_cursor-svg);
-  background-color: currentcolor;
-}
-.tl-icon--map_cursor_inactive {
-  mask-image: var(--icon-map_cursor_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--maximize_fullscreen {
-  mask-image: var(--icon-maximize_fullscreen-svg);
-  background-color: currentcolor;
-}
-.tl-icon--meatballs {
-  mask-image: var(--icon-meatballs-svg);
-  background-color: currentcolor;
-}
-.tl-icon--merge {
-  mask-image: var(--icon-merge-svg);
-  background-color: currentcolor;
-}
-.tl-icon--merge_inactive {
-  mask-image: var(--icon-merge_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--message {
-  mask-image: var(--icon-message-svg);
-  background-color: currentcolor;
-}
-.tl-icon--message_inactive {
-  mask-image: var(--icon-message_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--microphone {
-  mask-image: var(--icon-microphone-svg);
-  background-color: currentcolor;
-}
-.tl-icon--microphone_inactive {
-  mask-image: var(--icon-microphone_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--mileage {
-  mask-image: var(--icon-mileage-svg);
-  background-color: currentcolor;
-}
-.tl-icon--mileage_inactive {
-  mask-image: var(--icon-mileage_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--minimize_fullscreen {
-  mask-image: var(--icon-minimize_fullscreen-svg);
-  background-color: currentcolor;
-}
-.tl-icon--minus {
-  mask-image: var(--icon-minus-svg);
-  background-color: currentcolor;
-}
-.tl-icon--navigate {
-  mask-image: var(--icon-navigate-svg);
-  background-color: currentcolor;
-}
-.tl-icon--navigate_inactive {
-  mask-image: var(--icon-navigate_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--notification {
-  mask-image: var(--icon-notification-svg);
-  background-color: currentcolor;
-}
-.tl-icon--notification_inactive {
-  mask-image: var(--icon-notification_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--notification_snooze {
-  mask-image: var(--icon-notification_snooze-svg);
-  background-color: currentcolor;
-}
-.tl-icon--oil_level {
-  mask-image: var(--icon-oil_level-svg);
-  background-color: currentcolor;
-}
-.tl-icon--oil_level_inactive {
-  mask-image: var(--icon-oil_level_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--paperclip {
-  mask-image: var(--icon-paperclip-svg);
-  background-color: currentcolor;
-}
-.tl-icon--pause {
-  mask-image: var(--icon-pause-svg);
-  background-color: currentcolor;
-}
-.tl-icon--pause_inactive {
-  mask-image: var(--icon-pause_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--phone {
-  mask-image: var(--icon-phone-svg);
-  background-color: currentcolor;
-}
-.tl-icon--phone_inactive {
-  mask-image: var(--icon-phone_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--pie_chart {
-  mask-image: var(--icon-pie_chart-svg);
-  background-color: currentcolor;
-}
-.tl-icon--pin {
-  mask-image: var(--icon-pin-svg);
-  background-color: currentcolor;
-}
-.tl-icon--pin_inactive {
-  mask-image: var(--icon-pin_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--placeholder {
-  mask-image: var(--icon-placeholder-svg);
-  background-color: currentcolor;
-}
-.tl-icon--play {
-  mask-image: var(--icon-play-svg);
-  background-color: currentcolor;
-}
-.tl-icon--play_inactive {
-  mask-image: var(--icon-play_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--plus {
-  mask-image: var(--icon-plus-svg);
-  background-color: currentcolor;
-}
-.tl-icon--powerplug {
-  mask-image: var(--icon-powerplug-svg);
-  background-color: currentcolor;
-}
-.tl-icon--powerplug_inactive {
-  mask-image: var(--icon-powerplug_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--print {
-  mask-image: var(--icon-print-svg);
-  background-color: currentcolor;
-}
-.tl-icon--print_inactive {
-  mask-image: var(--icon-print_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--privacy {
-  mask-image: var(--icon-privacy-svg);
-  background-color: currentcolor;
-}
-.tl-icon--privacy_inactive {
-  mask-image: var(--icon-privacy_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--profile {
-  mask-image: var(--icon-profile-svg);
-  background-color: currentcolor;
-}
-.tl-icon--profile_inactive {
-  mask-image: var(--icon-profile_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--prohibited {
-  mask-image: var(--icon-prohibited-svg);
-  background-color: currentcolor;
-}
-.tl-icon--proportions {
-  mask-image: var(--icon-proportions-svg);
-  background-color: currentcolor;
-}
-.tl-icon--proportions_inactive {
-  mask-image: var(--icon-proportions_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--range {
-  mask-image: var(--icon-range-svg);
-  background-color: currentcolor;
-}
-.tl-icon--range_inactive {
-  mask-image: var(--icon-range_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--redirect {
-  mask-image: var(--icon-redirect-svg);
-  background-color: currentcolor;
-}
-.tl-icon--refresh {
-  mask-image: var(--icon-refresh-svg);
-  background-color: currentcolor;
-}
-.tl-icon--refresh_inactive {
-  mask-image: var(--icon-refresh_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--reload {
-  mask-image: var(--icon-reload-svg);
-  background-color: currentcolor;
-}
-.tl-icon--reload_inactive {
-  mask-image: var(--icon-reload_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--repeat {
-  mask-image: var(--icon-repeat-svg);
-  background-color: currentcolor;
-}
-.tl-icon--report {
-  mask-image: var(--icon-report-svg);
-  background-color: currentcolor;
-}
-.tl-icon--report_inactive {
-  mask-image: var(--icon-report_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--route {
-  mask-image: var(--icon-route-svg);
-  background-color: currentcolor;
-}
-.tl-icon--route_inactive {
-  mask-image: var(--icon-route_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--save {
-  mask-image: var(--icon-save-svg);
-  background-color: currentcolor;
-}
-.tl-icon--save_inactive {
-  mask-image: var(--icon-save_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--search {
-  mask-image: var(--icon-search-svg);
-  background-color: currentcolor;
-}
-.tl-icon--send {
-  mask-image: var(--icon-send-svg);
-  background-color: currentcolor;
-}
-.tl-icon--send_inactive {
-  mask-image: var(--icon-send_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--settings {
-  mask-image: var(--icon-settings-svg);
-  background-color: currentcolor;
-}
-.tl-icon--share {
-  mask-image: var(--icon-share-svg);
-  background-color: currentcolor;
-}
-.tl-icon--shuffle {
-  mask-image: var(--icon-shuffle-svg);
-  background-color: currentcolor;
-}
-.tl-icon--skip_backwards {
-  mask-image: var(--icon-skip_backwards-svg);
-  background-color: currentcolor;
-}
-.tl-icon--skip_forward {
-  mask-image: var(--icon-skip_forward-svg);
-  background-color: currentcolor;
-}
-.tl-icon--smartphone {
-  mask-image: var(--icon-smartphone-svg);
-  background-color: currentcolor;
-}
-.tl-icon--smartphone_inactive {
-  mask-image: var(--icon-smartphone_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--sorting {
-  mask-image: var(--icon-sorting-svg);
-  background-color: currentcolor;
-}
-.tl-icon--speedometer {
-  mask-image: var(--icon-speedometer-svg);
-  background-color: currentcolor;
-}
-.tl-icon--speedometer_inactive {
-  mask-image: var(--icon-speedometer_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--star {
-  mask-image: var(--icon-star-svg);
-  background-color: currentcolor;
-}
-.tl-icon--support {
-  mask-image: var(--icon-support-svg);
-  background-color: currentcolor;
-}
-.tl-icon--target {
-  mask-image: var(--icon-target-svg);
-  background-color: currentcolor;
-}
-.tl-icon--target_inactive {
-  mask-image: var(--icon-target_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--temperature {
-  mask-image: var(--icon-temperature-svg);
-  background-color: currentcolor;
-}
-.tl-icon--temperature_inactive {
-  mask-image: var(--icon-temperature_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--text {
-  mask-image: var(--icon-text-svg);
-  background-color: currentcolor;
-}
-.tl-icon--text_inactive {
-  mask-image: var(--icon-text_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--thumbs_down {
-  mask-image: var(--icon-thumbs_down-svg);
-  background-color: currentcolor;
-}
-.tl-icon--thumbs_up {
-  mask-image: var(--icon-thumbs_up-svg);
-  background-color: currentcolor;
-}
-.tl-icon--tick {
-  mask-image: var(--icon-tick-svg);
-  background-color: currentcolor;
-}
-.tl-icon--timer {
-  mask-image: var(--icon-timer-svg);
-  background-color: currentcolor;
-}
-.tl-icon--tool {
-  mask-image: var(--icon-tool-svg);
-  background-color: currentcolor;
-}
-.tl-icon--tool_inactive {
-  mask-image: var(--icon-tool_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--trailer {
-  mask-image: var(--icon-trailer-svg);
-  background-color: currentcolor;
-}
-.tl-icon--trailer_inactive {
-  mask-image: var(--icon-trailer_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--trash {
-  mask-image: var(--icon-trash-svg);
-  background-color: currentcolor;
-}
-.tl-icon--trash_inactive {
-  mask-image: var(--icon-trash_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--truck {
-  mask-image: var(--icon-truck-svg);
-  background-color: currentcolor;
-}
-.tl-icon--truck_inactive {
-  mask-image: var(--icon-truck_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--undo {
-  mask-image: var(--icon-undo-svg);
-  background-color: currentcolor;
-}
-.tl-icon--undo_inactive {
-  mask-image: var(--icon-undo_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--unlock {
-  mask-image: var(--icon-unlock-svg);
-  background-color: currentcolor;
-}
-.tl-icon--upload {
-  mask-image: var(--icon-upload-svg);
-  background-color: currentcolor;
-}
-.tl-icon--video {
-  mask-image: var(--icon-video-svg);
-  background-color: currentcolor;
-}
-.tl-icon--video_inactive {
-  mask-image: var(--icon-video_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--wallet {
-  mask-image: var(--icon-wallet-svg);
-  background-color: currentcolor;
-}
-.tl-icon--warning {
-  mask-image: var(--icon-warning-svg);
-  background-color: currentcolor;
-}
-.tl-icon--weight {
-  mask-image: var(--icon-weight-svg);
-  background-color: currentcolor;
-}
-.tl-icon--weight_inactive {
-  mask-image: var(--icon-weight_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--wifi {
-  mask-image: var(--icon-wifi-svg);
-  background-color: currentcolor;
-}
-.tl-icon--wifi_inactive {
-  mask-image: var(--icon-wifi_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--windscreen_heating {
-  mask-image: var(--icon-windscreen_heating-svg);
-  background-color: currentcolor;
-}
-.tl-icon--windscreen_heating_inactive {
-  mask-image: var(--icon-windscreen_heating_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--12 {
-  width: 12px;
-  height: 12px;
-}
-.tl-icon--14 {
-  width: 14px;
-  height: 14px;
-}
-.tl-icon--16 {
-  width: 16px;
-  height: 16px;
-}
-.tl-icon--18 {
-  width: 18px;
-  height: 18px;
-}
-.tl-icon--20 {
-  width: 20px;
-  height: 20px;
-}
-.tl-icon--22 {
-  width: 22px;
-  height: 22px;
-}
-.tl-icon--24 {
-  width: 24px;
-  height: 24px;
-}
-.tl-icon--26 {
-  width: 26px;
-  height: 26px;
-}
-.tl-icon--28 {
-  width: 28px;
-  height: 28px;
-}
-.tl-icon--30 {
-  width: 30px;
-  height: 30px;
-}
-.tl-icon--32 {
-  width: 32px;
-  height: 32px;
-}
-.tl-icon--34 {
-  width: 34px;
-  height: 34px;
-}
-.tl-icon--36 {
-  width: 36px;
-  height: 36px;
-}
-.tl-icon--38 {
-  width: 38px;
-  height: 38px;
-}
-.tl-icon--40 {
-  width: 40px;
-  height: 40px;
-}
-.tl-icon--42 {
-  width: 42px;
-  height: 42px;
-}
-.tl-icon--44 {
-  width: 44px;
-  height: 44px;
-}
-.tl-icon--46 {
-  width: 46px;
-  height: 46px;
-}
-.tl-icon--48 {
-  width: 48px;
-  height: 48px;
-}
-.tl-icon--50 {
-  width: 50px;
-  height: 50px;
-}
-.tl-icon--52 {
-  width: 52px;
-  height: 52px;
-}
-.tl-icon--54 {
-  width: 54px;
-  height: 54px;
-}
-.tl-icon--56 {
-  width: 56px;
-  height: 56px;
-}
-.tl-icon--58 {
-  width: 58px;
-  height: 58px;
-}
-.tl-icon--60 {
-  width: 60px;
-  height: 60px;
-}
-.tl-icon--62 {
-  width: 62px;
-  height: 62px;
-}
-.tl-icon--64 {
-  width: 64px;
-  height: 64px;
-}
-.tl-icon--66 {
-  width: 66px;
-  height: 66px;
-}
-.tl-icon--68 {
-  width: 68px;
-  height: 68px;
-}
-.tl-icon--70 {
-  width: 70px;
-  height: 70px;
-}
-.tl-icon--72 {
-  width: 72px;
-  height: 72px;
-}
-.tl-icon--74 {
-  width: 74px;
-  height: 74px;
-}
-.tl-icon--76 {
-  width: 76px;
-  height: 76px;
-}
-.tl-icon--78 {
-  width: 78px;
-  height: 78px;
-}
-.tl-icon--80 {
-  width: 80px;
-  height: 80px;
-}
-.tl-icon--82 {
-  width: 82px;
-  height: 82px;
-}
-.tl-icon--84 {
-  width: 84px;
-  height: 84px;
-}
-.tl-icon--86 {
-  width: 86px;
-  height: 86px;
-}
-.tl-icon--88 {
-  width: 88px;
-  height: 88px;
-}
-.tl-icon--90 {
-  width: 90px;
-  height: 90px;
-}
-.tl-icon--92 {
-  width: 92px;
-  height: 92px;
-}
-.tl-icon--94 {
-  width: 94px;
-  height: 94px;
-}
-.tl-icon--96 {
-  width: 96px;
-  height: 96px;
-}
-
-.tl-slider {
-  box-sizing: border-box;
-}
-.tl-slider * {
-  box-sizing: border-box;
-}
-.tl-slider {
-  width: 100%;
-}
-.tl-slider:has(input[type=range][readonly]):not(:has(input[type=range]:disabled)) {
-  pointer-events: none;
-}
-
-.tl-slider__label {
-  font-family: var(--detail-05-font-family);
-  font-size: var(--detail-05-font-size);
-  line-height: var(--detail-05-line-height);
-  font-weight: var(--detail-05-font-weight);
-  letter-spacing: var(--detail-05-letter-spacing);
-  text-transform: var(--detail-05-text-transform);
-  user-select: none;
-  color: var(--slider-label);
-  display: block;
-  margin-bottom: 24px;
-  margin-left: -2px;
-}
-.tl-slider:has(.tl-slider__value-divider-label) .tl-slider__label {
-  margin-bottom: 44px;
-}
-.tl-slider:has(.tl-slider__control-minus, .tl-slider__control-plus) .tl-slider__label {
-  margin-bottom: 2px;
-  padding-left: 11px;
-  margin-left: 0;
-}
-.tl-slider:has(.tl-slider__control-minus, .tl-slider__control-plus):has(.tl-slider__value-divider-label) .tl-slider__label {
-  margin-bottom: 20px;
-  padding-left: 11px;
-  margin-left: 0;
-}
-.tl-slider:has(.tl-slider__input-wrapper) .tl-slider__label {
-  margin-bottom: 2px;
-  margin-left: 0;
-}
-.tl-slider:has(input[type=range]:disabled) .tl-slider__label {
-  color: var(--slider-disabled-text);
-}
-
-.tl-slider__track-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-.tl-slider__track-wrapper:has(.tl-slider__input-wrapper) {
-  gap: 16px;
-  align-items: center;
-  height: 41px;
-}
-
-.tl-slider__control-minus,
-.tl-slider__control-plus {
-  flex-shrink: 0;
-  border: none;
-}
-
-.tl-slider__track {
-  position: relative;
-  flex: 1;
-  min-height: 2px;
-  background-color: var(--slider-track);
-  border-radius: var(--slider-border-radius);
-}
-.tl-slider__track-wrapper:has(.tl-slider__input-wrapper) .tl-slider__track {
-  height: 2px;
-  align-self: center;
-}
-.tl-slider__track::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -10px;
-  bottom: -10px;
-  cursor: pointer;
-  z-index: 0;
-}
-.tl-slider__track:focus {
-  outline: 0;
-}
-.tl-slider__track:focus .tl-slider__thumb-inner {
-  width: 24px;
-  height: 24px;
-}
-.tl-slider__track:focus .tl-slider__thumb-inner::before {
-  display: block;
-  opacity: 0.08;
-}
-.tl-slider__track:focus-within .tl-slider__thumb-inner {
-  outline: 2px solid var(--slider-input-focused);
-  box-shadow: 0 0 0 1px var(--color-background-layer-01);
-  outline-offset: 1px;
-  z-index: 1;
-}
-.tl-slider__track:disabled {
-  cursor: not-allowed;
-  background-color: var(--slider-disabled);
-}
-.tl-slider__track:disabled::after {
-  cursor: not-allowed;
-}
-
-.tl-slider__value {
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  user-select: none;
-  color: var(--slider-input-value);
-  flex-shrink: 0;
-  align-self: center;
-}
-.tl-slider:has(input[type=range]:disabled) .tl-slider__value {
-  color: var(--slider-disabled-text);
-}
-
-.tl-slider__input-wrapper {
-  flex-shrink: 0;
-  width: auto;
-  height: auto;
-  min-width: auto;
-  margin-left: 0;
-  align-self: center;
-  border-radius: var(--slider-border-radius);
-}
-.tl-slider__input-wrapper.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled))::before {
-  width: 16px;
-  height: 16px;
-  right: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.tl-slider__input-wrapper .tl-slider__input-field {
-  width: var(--slider-input-width, 56px);
-  padding: 12px;
-  text-align: center;
-  appearance: textfield;
-  border: none;
-  background-color: var(--slider-input-background);
-  color: var(--slider-input-value);
-  border-radius: var(--slider-border-radius);
-  box-shadow: inset var(--slider-input-box-shadow);
-}
-.tl-slider__input-wrapper .tl-slider__input-field--decimal {
-  width: 56px;
-}
-.tl-slider__input-wrapper .tl-slider__input-field::-webkit-outer-spin-button, .tl-slider__input-wrapper .tl-slider__input-field::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
-}
-
-.tl-slider__input-wrapper:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-slider__input-field[readonly] {
-  width: 74px;
-  padding-right: 39px;
-}
-
-.tl-slider__value-tooltip {
-  font-family: var(--detail-01-font-family);
-  font-size: var(--detail-01-font-size);
-  line-height: var(--detail-01-line-height);
-  font-weight: var(--detail-01-font-weight);
-  letter-spacing: var(--detail-01-letter-spacing);
-  text-transform: var(--detail-01-text-transform);
-  user-select: none;
-  border-radius: 4px;
-  padding: 8px 11px;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 100%;
-  margin-bottom: 8px;
-  background-color: var(--slider-value-tooltip-background);
-  color: var(--slider-value-tooltip);
-  display: none;
-  white-space: nowrap;
-  z-index: 10;
-}
-.tl-slider__value-tooltip::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: -6px;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid var(--slider-value-tooltip-background);
-}
-.tl-slider__thumb:hover .tl-slider__value-tooltip {
-  display: block;
-}
-.tl-slider:has(input[type=range]:disabled) .tl-slider__value-tooltip {
-  display: none;
-}
-
-.tl-slider__thumb {
-  position: absolute;
-  z-index: 1;
-}
-
-.tl-slider__thumb-inner {
-  width: 20px;
-  height: 20px;
-  border-radius: 100%;
-  background-color: var(--slider-thumb);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  cursor: pointer;
-  overflow: visible;
-}
-.tl-slider__thumb-inner::before {
-  content: " ";
-  display: none;
-  width: 48px;
-  height: 48px;
-  background-color: var(--slider-thumb);
-  position: absolute;
-  border-radius: 100%;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0.17;
-}
-.tl-slider__thumb-inner:hover::before {
-  display: block;
-}
-.tl-slider__thumb-inner--pressed {
-  width: 24px;
-  height: 24px;
-}
-.tl-slider__thumb-inner--pressed::before {
-  display: block;
-  opacity: 0.35;
-}
-.tl-slider--small .tl-slider__thumb-inner {
-  width: 16px;
-  height: 16px;
-}
-.tl-slider--small .tl-slider__thumb-inner::before {
-  width: 40px;
-  height: 40px;
-}
-.tl-slider--small .tl-slider__thumb-inner.tl-slider__thumb-inner--pressed {
-  width: 20px;
-  height: 20px;
-}
-.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner {
-  background-color: var(--slider-disabled);
-  cursor: not-allowed;
-}
-.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
-  display: none;
-}
-
-.tl-slider__value-dividers {
-  pointer-events: none;
-  position: absolute;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  top: 0;
-  z-index: 0;
-}
-
-.tl-slider__value-divider {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 16px;
-}
-
-.tl-slider__value-divider-line {
-  position: absolute;
-  width: 1px;
-  height: 16px;
-  background-color: var(--slider-divider);
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-line {
-  background-color: var(--slider-disabled);
-}
-
-.tl-slider__value-divider-label {
-  font-family: var(--detail-05-font-family);
-  font-size: var(--detail-05-font-size);
-  line-height: var(--detail-05-line-height);
-  font-weight: var(--detail-05-font-weight);
-  letter-spacing: var(--detail-05-letter-spacing);
-  text-transform: var(--detail-05-text-transform);
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 16px;
-  width: 50px;
-  text-align: center;
-  white-space: nowrap;
-  user-select: none;
-  color: var(--slider-divider-values);
-}
-.tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-label {
-  color: var(--slider-disabled-text);
-}
-
-.tl-slider__track-fill {
-  background-color: var(--slider-track-fill);
-  border-radius: 2px;
-  height: 4px;
-  position: absolute;
-  left: 0;
-  top: -1px;
-  z-index: 1;
-}
-.tl-slider:has(input[type=range]:disabled) .tl-slider__track-fill {
-  background-color: var(--slider-disabled);
-}
-
-.tl-slider__native-input {
-  display: none;
-}