@scania/tegel-lite 0.1.0 → 1.0.1

package/dist/tl-header.css

@@ -1,859 +0,0 @@
-@charset "UTF-8";
-/**
- * Do not edit directly, this file was auto-generated.
- */
-.scania tds-header,
-.scania .tl-header {
-  /* State & interaction colors */
-  --component-header-color-background-open: var(--color-foreground-border-accent-focus);
-  --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
-  --component-header-dropdown-item-background: var(--color-background-layer-02);
-  --component-header-avatar-item-background: var(--color-background-layer-02);
-  --component-header-app-launcher-meny-background: var(--color-background-layer-02);
-  /* Sizing & spacing */
-  --component-header-brand-logo-size: 30px;
-  --component-header-space-profile-padding: 16px;
-  --component-header-item-image-size: 34px;
-  --component-header-item-image-left: 10px;
-  --component-header-item-width: none;
-  --component-header-item-border-right: 1px solid var(--header-basic-element-border);
-  /* Borders */
-  --component-header-border: none;
-  /* Typography */
-  --component-header-font-family-headline: var(--scania-font-family-display);
-  --component-header-font-weight: var(--scania-font-weight-regular);
-  --component-header-text-transform: none;
-}
-.scania {
-  /* ── Light-mode overrides ───────────────────── */
-}
-.scania .tds-mode-light tds-header,
-.scania .tds-mode-light .tl-header {
-  --component-header-color-background: var(--color-brand-primary-800);
-  --component-header-color-foreground-strong: var(--color-foreground-icon-inverse-strong);
-  --component-header-color-background-hover: var(--color-brand-primary-700);
-  --component-header-color-background-border: var(--color-brand-primary-700);
-  --component-header-color-background-pressed: var(--color-brand-neutral-white);
-  --component-header-color-background-selected: var(--color-brand-primary-700);
-}
-.scania {
-  /* ── Dark-mode overrides ───────────────────── */
-}
-.scania .tds-mode-dark tds-header,
-.scania .tds-mode-dark .tl-header {
-  --component-header-color-background: var(--color-brand-primary-900);
-  --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
-  --component-header-color-background-hover: var(--color-brand-primary-800);
-  --component-header-color-background-border: var(--color-brand-primary-800);
-  --component-header-color-background-pressed: var(--color-brand-primary-800);
-  --component-header-color-background-selected: var(--color-brand-primary-800);
-}
-
-.traton tds-header,
-.traton .tl-header {
-  /* Base colors */
-  --component-header-color-background: var(--color-background-base);
-  --component-header-color-background-hover: var(--color-background-layer-01);
-  --component-header-color-background-open: transparent;
-  --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
-  --component-header-color-background-border: var(--traton-color-transparent-invisible-light);
-  --component-header-color-background-pressed: var(--color-background-base);
-  --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
-  /* Dropdown & launcher */
-  --component-header-dropdown-item-background: var(--color-background-layer-01);
-  --component-header-avatar-item-background: var(--color-background-layer-01);
-  --component-header-app-launcher-meny-background: var(--color-background-layer-01);
-  /* Sizing & spacing */
-  --component-header-brand-logo-size: 106px;
-  --component-header-space-profile-padding: 20px;
-  --component-header-item-image-size: 24px;
-  --component-header-item-image-left: 15px;
-  --component-header-item-width: 122px;
-  --component-header-item-border-right: none;
-  /* Borders */
-  --component-header-border: 2px solid var(--header-nav-item-border-active);
-  /* Typography */
-  --component-header-font-family-headline: var(--traton-font-family-display);
-  --component-header-font-weight: var(--traton-font-weight-medium);
-  --component-header-text-transform: uppercase;
-}
-.traton {
-  /* ── Light-mode overrides ───────────────────── */
-}
-.traton .tds-mode-light tds-header,
-.traton .tds-mode-light .tl-header {
-  --component-header-color-background-selected: var(--color-background-layer-01);
-}
-.traton {
-  /* ── Dark-mode overrides ───────────────────── */
-}
-.traton .tds-mode-dark tds-header,
-.traton .tds-mode-dark .tl-header {
-  --component-header-color-background-selected: var(--color-background-surface-100);
-}
-
-/*
-  Tegel Lite specific overrides
-  Keep this in last to ensure it has the highest specificity for Tegel Lite
-*/
-.scania .tl-header {
-  --component-header-item-width: 30px;
-  --component-header-dropdown-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
-}
-
-.traton .tl-header {
-  --component-header-dropdown-box-shadow: none;
-}
-
-.tl-header {
-  /* Base text */
-  --header-nav-item: var(--component-header-color-foreground-strong);
-  /* Nav-item states */
-  --header-nav-item-background-hover: var(--color-background-surface-100);
-  --header-nav-item-background-selected: var(--component-header-dropdown-item-background);
-  --header-nav-item-border-pressed: var(--color-foreground-border-accent-focus);
-  --header-item-hover: var(--component-header-color-background-hover);
-  /* Dropdown menu items */
-  --header-nav-dropdown-item-background: var(--component-header-dropdown-item-background);
-  --header-nav-dropdown-item-border: var(--color-foreground-border-discrete);
-  /* Dropdown “opened” state */
-  --tds-header-nav-item-dropdown-opened-background: var(--tds-white);
-  --tds-header-nav-item-dropdown-opened-background-hover: var(--tds-grey-100);
-  --tds-header-nav-item-dropdown-opened-background-selected: var(--tds-grey-100);
-  --tds-header-nav-item-dropdown-opened-background-pressed: var(--tds-grey-300);
-  --header-nav-item-dropdown-opened: var(--component-header-color-foreground-selected);
-  /* Basic element ("Bento") separators & backgrounds */
-  --header-basic-element-border: var(--component-header-color-background-border);
-  --header-basic-element-border-open: var(--component-header-color-background-open);
-  --header-basic-element-background-pressed: var(--component-header-dropdown-item-background);
-  --header-basic-element-background-selected: var(--component-header-dropdown-item-background);
-  /* Avatar dropdown */
-  --header-avatar-item-background: var(--component-header-avatar-item-background);
-  --header-avatar-item: var(--color-foreground-text-soft);
-  /* App launcher (list) */
-  --header-app-launcher-menu-background: var(--component-header-app-launcher-meny-background);
-  --header-app-launcher-category-title: var(--color-foreground-text-soft);
-  --header-app-launcher-item: var(--color-foreground-text-defined);
-  /* App launcher (grid) */
-  --header-app-launcher-grid-category-title: var(--color-foreground-text-soft);
-  --header-app-launcher-grid-hover-background: var(--color-background-surface-200);
-  /* Brand symbol */
-  --header-brand-item-width: var(--component-header-item-width);
-  /* Brand logo */
-  --header-brand-logo-size: var(--component-header-brand-logo-size);
-  /* Header item */
-  --header-item-image-left: var(--component-header-item-image-left);
-  --header-item-image-size: var(--component-header-item-image-size);
-  --header-item-border-right: var(--component-header-item-border-right);
-  /* Header title */
-  --header-font-weight: var(--component-header-font-weight);
-  --header-font-family-headline: var(--component-header-font-family-headline);
-  --header-text-transform: var(--component-header-text-transform);
-  --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
-}
-
-.scania {
-  /* Light mode - explicit light mode class */
-}
-.scania .tds-mode-light .tl-header {
-  --header-background: var(--color-brand-primary-800);
-  --header-nav-item: var(--color-foreground-icon-inverse-strong);
-  --header-item-hover: var(--color-brand-primary-700);
-  --header-basic-element-border: var(--color-brand-primary-700);
-  --header-basic-element-background-pressed: var(--color-brand-neutral-white);
-  --header-basic-element-background-selected: var(--color-brand-primary-700);
-}
-.scania {
-  /* Dark mode - override with dark colors */
-}
-.scania .tds-mode-dark .tl-header {
-  --header-background: var(--color-brand-primary-900);
-  --header-nav-item: var(--color-foreground-icon-strong);
-  --header-item-hover: var(--color-brand-primary-800);
-  --header-basic-element-border: var(--color-brand-primary-800);
-  --header-basic-element-background-pressed: var(--color-brand-primary-800);
-  --header-basic-element-background-selected: var(--color-brand-primary-800);
-}
-.scania {
-  /* Default .tl-header (works for no mode specified - defaults to light) */
-}
-.scania .tl-header {
-  /* Brand logo */
-  --header-logotype-local: var(--tds-background-image-scania-symbol-svg-local);
-  --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
-  --component-header-space-profile-padding: 16px;
-  /* Background defaults to light mode */
-  --header-background: var(--color-brand-primary-800);
-  --header-nav-item: var(--color-foreground-icon-inverse-strong);
-  --header-item-hover: var(--color-brand-primary-700);
-  --header-basic-element-border: var(--color-brand-primary-700);
-  --header-basic-element-background-pressed: var(--color-brand-neutral-white);
-  --header-basic-element-background-selected: var(--color-brand-primary-700);
-}
-
-.traton .tds-mode-dark .tl-header {
-  /* Brand logo - White for dark mode */
-  --header-logotype-local: var(--traton-logotype-white-svg-local);
-  --header-logotype-cdn: var(--traton-logotype-white-svg);
-  /* Background - uses base from traton tokens */
-  --header-background: var(--color-background-base);
-  --header-nav-item: var(--color-foreground-icon-strong);
-  --header-item-hover: var(--color-background-layer-01);
-  --header-basic-element-border: var(--traton-color-transparent-invisible-light);
-  --header-basic-element-background-pressed: var(--color-background-base);
-  --header-basic-element-background-selected: var(--color-background-surface-100);
-}
-.traton .tds-mode-light .tl-header {
-  /* Brand logo - Black for light mode */
-  --header-logotype-local: var(--traton-logotype-black-svg-local);
-  --header-logotype-cdn: var(--traton-logotype-black-svg);
-  /* Background - uses base from traton tokens */
-  --header-background: var(--color-background-base);
-  --header-nav-item: var(--color-foreground-icon-strong);
-  --header-item-hover: var(--color-background-layer-01);
-  --header-basic-element-border: var(--traton-color-transparent-invisible-light);
-  --header-basic-element-background-pressed: var(--color-background-base);
-  --header-basic-element-background-selected: var(--color-background-layer-01);
-}
-.traton .tl-header {
-  /* Brand logo - Black as default (for no mode specified) */
-  --header-logotype-local: var(--traton-logotype-black-svg-local);
-  --header-logotype-cdn: var(--traton-logotype-black-svg);
-  --component-header-space-profile-padding: 20px;
-  --header-background: transparent;
-}
-
-/* Typography Usage mixins */
-/* Header Elements */
-.tl-header__item-wrapper {
-  all: unset;
-  box-sizing: border-box;
-}
-.tl-header__item-wrapper * {
-  box-sizing: border-box;
-}
-.tl-header__item-wrapper {
-  font-family: var(--headline-07-font-family);
-  font-size: var(--headline-07-font-size);
-  line-height: var(--headline-07-line-height);
-  font-weight: var(--headline-07-font-weight);
-  letter-spacing: var(--headline-07-letter-spacing);
-  text-transform: var(--headline-07-text-transform);
-  background-color: var(--header-background);
-  border-right: 1px solid var(--header-basic-element-border);
-  color: var(--header-nav-item);
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  padding: 0 24px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.tl-header__item-wrapper:has(.tl-header__brand) {
-  padding: 0 19px;
-}
-.tl-header__item-wrapper:hover {
-  background-color: var(--header-item-hover);
-}
-.tl-header__item-wrapper:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-}
-.tl-header__item-wrapper:active {
-  padding-top: 2px;
-  padding-bottom: 2px;
-  background-color: var(--component-header-color-background-pressed);
-  box-shadow: inset 0 0 0 2px var(--header-nav-item-border-pressed);
-}
-
-.tl-header__item-wrapper .tl-link__icon {
-  position: relative;
-  margin-left: -6px;
-  left: 3px;
-  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
-}
-
-:host,
-:root {
-  --tl-scrollbar-width-standard: thin;
-  --tl-scrollbar-width: 10px;
-  --tl-scrollbar-height: 10px;
-  --tl-scrollbar-thumb-border-width: 3px;
-  --tl-scrollbar-thumb-border-hover-width: 2px;
-}
-
-body {
-  scrollbar-width: thin;
-}
-
-/** The breakpoint at which the layout changes from fixed size to full-width. */
-.tl-header__dropdown-wrapper {
-  all: unset;
-  box-sizing: border-box;
-}
-.tl-header__dropdown-wrapper * {
-  box-sizing: border-box;
-}
-.tl-header__dropdown-wrapper {
-  background-color: var(--header-background);
-  border-right: 1px solid var(--header-basic-element-border);
-  color: var(--header-nav-item);
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  padding: 0 24px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.tl-header__dropdown-wrapper:hover {
-  background-color: var(--header-item-hover);
-}
-.tl-header__dropdown-wrapper:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-}
-.tl-header__dropdown-wrapper:active {
-  background-color: var(--component-header-color-background-pressed);
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-}
-.tl-header__dropdown-wrapper--open {
-  background-color: var(--component-header-color-background-pressed);
-  color: var(--header-nav-item-dropdown-opened);
-  position: relative;
-  z-index: calc(var(--tds-z-index-header) + 1);
-}
-.tl-header__dropdown-wrapper--open:hover {
-  background-color: var(--component-header-color-background-pressed);
-}
-.tl-header__dropdown-wrapper--open:active {
-  background-color: var(--component-header-color-background-pressed);
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-}
-.tl-header__dropdown-wrapper--selected {
-  border-bottom: 4px solid var(--header-nav-item-border-pressed);
-}
-
-.tl-header__dropdown-wrapper-user {
-  all: unset;
-  box-sizing: border-box;
-}
-.tl-header__dropdown-wrapper-user * {
-  box-sizing: border-box;
-}
-.tl-header__dropdown-wrapper-user {
-  background-color: var(--header-background);
-  border-right: 1px solid var(--header-basic-element-border);
-  color: var(--header-nav-item);
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  padding: var(--component-header-space-profile-padding);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.tl-header__dropdown-wrapper-user:hover {
-  background-color: var(--header-item-hover);
-}
-.tl-header__dropdown-wrapper-user:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-}
-.tl-header__dropdown-wrapper-user:active {
-  background-color: var(--component-header-color-background-pressed);
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-}
-.tl-header__dropdown-wrapper-user--open {
-  background-color: var(--component-header-color-background-pressed);
-  color: var(--header-nav-item-dropdown-opened);
-  position: relative;
-  z-index: calc(var(--tds-z-index-header) + 1);
-}
-.tl-header__dropdown-wrapper-user--open:hover {
-  background-color: var(--component-header-color-background-pressed);
-}
-.tl-header__dropdown-wrapper-user--open:active {
-  background-color: var(--component-header-color-background-pressed);
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-}
-.tl-header__dropdown-wrapper-user--selected {
-  border-bottom: 4px solid var(--header-nav-item-border-pressed);
-}
-
-.tl-header__dropdown-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s ease;
-  transform-origin: center center;
-}
-.tl-header__dropdown-icon--rotated {
-  transform: rotate(180deg);
-}
-
-.tl-header__dropdown-menu {
-  all: unset;
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background: var(--tds-header-app-launcher-menu-background);
-  box-shadow: var(--header-dropdown-box-shadow);
-  min-width: 190px;
-  max-height: calc(100vh - var(--tds-header-height));
-  overflow-y: auto;
-  z-index: var(--tds-z-index-header);
-}
-.tl-header__dropdown-menu::-webkit-scrollbar {
-  width: var(--tl-scrollbar-width);
-}
-.tl-header__dropdown-menu::-webkit-scrollbar-track {
-  background: var(--tl-scrollbar-track-color);
-}
-.tl-header__dropdown-menu::-webkit-scrollbar-thumb {
-  border-radius: 40px;
-  background: var(--tl-scrollbar-thumb-color);
-  border-width: var(--tl-scrollbar-thumb-border-width);
-  border-style: solid;
-  border-color: transparent;
-  background-clip: padding-box;
-}
-.tl-header__dropdown-menu::-webkit-scrollbar-thumb:hover {
-  border-width: var(--tl-scrollbar-thumb-border-hover-width);
-}
-.tl-header__dropdown-menu::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}
-@supports not selector(::-webkit-scrollbar) {
-  .tl-header__dropdown-menu {
-    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
-    scrollbar-width: var(--tl-scrollbar-width-standard);
-  }
-}
-@media all and (max-width: 384px) {
-  .tl-header__dropdown-menu {
-    width: 100vw;
-  }
-}
-.tl-header__dropdown-menu--open {
-  display: block;
-}
-
-.tl-header__user-menu {
-  all: unset;
-  display: none;
-  position: fixed;
-  top: var(--tds-header-height);
-  right: 0;
-  left: auto;
-  background: var(--tds-header-app-launcher-menu-background);
-  box-shadow: var(--header-dropdown-box-shadow);
-  min-width: 290px;
-  max-height: calc(100vh - var(--tds-header-height));
-  overflow-y: auto;
-  z-index: var(--tds-z-index-header);
-  border-radius: 4px;
-}
-.tl-header__user-menu::-webkit-scrollbar {
-  width: var(--tl-scrollbar-width);
-}
-.tl-header__user-menu::-webkit-scrollbar-track {
-  background: var(--tl-scrollbar-track-color);
-}
-.tl-header__user-menu::-webkit-scrollbar-thumb {
-  border-radius: 40px;
-  background: var(--tl-scrollbar-thumb-color);
-  border-width: var(--tl-scrollbar-thumb-border-width);
-  border-style: solid;
-  border-color: transparent;
-  background-clip: padding-box;
-}
-.tl-header__user-menu::-webkit-scrollbar-thumb:hover {
-  border-width: var(--tl-scrollbar-thumb-border-hover-width);
-}
-.tl-header__user-menu::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}
-@supports not selector(::-webkit-scrollbar) {
-  .tl-header__user-menu {
-    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
-    scrollbar-width: var(--tl-scrollbar-width-standard);
-  }
-}
-.tl-header__user-menu--open {
-  display: block;
-}
-
-.tl-header__launcher-menu {
-  all: unset;
-  display: none;
-  position: fixed;
-  top: var(--tds-header-height);
-  right: 0;
-  left: auto;
-  background: var(--tds-header-app-launcher-menu-background);
-  box-shadow: var(--header-dropdown-box-shadow);
-  min-width: 320px;
-  max-height: calc(100vh - var(--tds-header-height));
-  overflow-y: auto;
-  z-index: var(--tds-z-index-header);
-}
-.tl-header__launcher-menu::-webkit-scrollbar {
-  width: var(--tl-scrollbar-width);
-}
-.tl-header__launcher-menu::-webkit-scrollbar-track {
-  background: var(--tl-scrollbar-track-color);
-}
-.tl-header__launcher-menu::-webkit-scrollbar-thumb {
-  border-radius: 40px;
-  background: var(--tl-scrollbar-thumb-color);
-  border-width: var(--tl-scrollbar-thumb-border-width);
-  border-style: solid;
-  border-color: transparent;
-  background-clip: padding-box;
-}
-.tl-header__launcher-menu::-webkit-scrollbar-thumb:hover {
-  border-width: var(--tl-scrollbar-thumb-border-hover-width);
-}
-.tl-header__launcher-menu::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}
-@supports not selector(::-webkit-scrollbar) {
-  .tl-header__launcher-menu {
-    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
-    scrollbar-width: var(--tl-scrollbar-width-standard);
-  }
-}
-.tl-header__launcher-menu--open {
-  display: block;
-}
-
-.tl-header__launcher-menu-grid {
-  all: unset;
-  display: none;
-  position: fixed;
-  top: var(--tds-header-height);
-  right: 0;
-  left: auto;
-  background: var(--tds-header-app-launcher-menu-background);
-  box-shadow: var(--header-dropdown-box-shadow);
-  min-width: 320px;
-  max-height: calc(100vh - var(--tds-header-height));
-  overflow-y: auto;
-  z-index: var(--tds-z-index-header);
-  border-radius: 4px;
-}
-.tl-header__launcher-menu-grid::-webkit-scrollbar {
-  width: var(--tl-scrollbar-width);
-}
-.tl-header__launcher-menu-grid::-webkit-scrollbar-track {
-  background: var(--tl-scrollbar-track-color);
-}
-.tl-header__launcher-menu-grid::-webkit-scrollbar-thumb {
-  border-radius: 40px;
-  background: var(--tl-scrollbar-thumb-color);
-  border-width: var(--tl-scrollbar-thumb-border-width);
-  border-style: solid;
-  border-color: transparent;
-  background-clip: padding-box;
-}
-.tl-header__launcher-menu-grid::-webkit-scrollbar-thumb:hover {
-  border-width: var(--tl-scrollbar-thumb-border-hover-width);
-}
-.tl-header__launcher-menu-grid::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}
-@supports not selector(::-webkit-scrollbar) {
-  .tl-header__launcher-menu-grid {
-    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
-    scrollbar-width: var(--tl-scrollbar-width-standard);
-  }
-}
-.tl-header__launcher-menu-grid--open {
-  display: block;
-}
-
-.tl-header__dropdown-menu-item {
-  display: block;
-  box-sizing: border-box;
-  height: var(--tds-header-list-item-md-height);
-  width: 100%;
-}
-.tl-header__dropdown-menu-item:not(:last-child) {
-  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
-}
-.tl-header__dropdown-menu-item--selected {
-  background-color: var(--header-nav-item-background-selected);
-  padding-right: 4px;
-  border-left: 4px solid var(--header-nav-item-border-pressed);
-}
-
-.tl-header__user-menu-item {
-  background-color: var(--header-avatar-item-background);
-  display: flex;
-  height: 84px;
-}
-
-.tl-header__user-menu-box {
-  gap: 16px;
-  width: 100%;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
-}
-
-.tl-header__user-menu-image {
-  width: var(--header-item-image-size);
-  height: var(--header-item-image-size);
-  border-radius: 50%;
-  overflow: hidden;
-}
-
-.tl-header__user-menu-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tl-header__user-menu-header {
-  font-family: var(--detail-06-font-family);
-  font-size: var(--detail-06-font-size);
-  line-height: var(--detail-06-line-height);
-  font-weight: var(--detail-06-font-weight);
-  letter-spacing: var(--detail-06-letter-spacing);
-  text-transform: var(--detail-06-text-transform);
-  color: var(--color-foreground-text-defined);
-}
-
-.tl-header__user-menu-subheader {
-  font-family: var(--headline-07-font-family);
-  font-size: var(--headline-07-font-size);
-  line-height: var(--headline-07-line-height);
-  font-weight: var(--headline-07-font-weight);
-  letter-spacing: var(--headline-07-letter-spacing);
-  text-transform: var(--headline-07-text-transform);
-  color: var(--header-avatar-item);
-}
-
-.tl-header__launcher-menu-list {
-  box-sizing: border-box;
-  padding: 12px;
-  margin: 0;
-  list-style: none;
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 4px;
-  background-color: var(--header-nav-dropdown-item-background);
-}
-
-.tl-header__launcher-menu-item {
-  display: block;
-  width: 96px;
-  height: 96px;
-}
-
-.tl-header__launcher-menu-title {
-  all: unset;
-  box-sizing: border-box;
-  font-family: var(--text-component-title-02-font-family);
-  font-size: var(--text-component-title-02-font-size);
-  line-height: var(--text-component-title-02-line-height);
-  font-weight: var(--text-component-title-02-font-weight);
-  letter-spacing: var(--text-component-title-02-letter-spacing);
-  text-transform: var(--text-component-title-02-text-transform);
-  background-color: var(--header-nav-dropdown-item-background);
-  color: var(--header-app-launcher-grid-category-title);
-  height: 48px;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
-  margin: 0;
-}
-
-.tl-header__dropdown-menu-item a,
-.tl-header__dropdown-menu-item button {
-  all: unset;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding: 0 24px;
-  width: 100%;
-  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);
-  background-color: var(--header-nav-dropdown-item-background);
-  color: var(--color-foreground-text-defined);
-}
-.tl-header__dropdown-menu-item a:hover,
-.tl-header__dropdown-menu-item button:hover {
-  background-color: var(--header-nav-item-background-hover);
-  cursor: pointer;
-}
-.tl-header__dropdown-menu-item a:focus-visible,
-.tl-header__dropdown-menu-item button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-}
-.tl-header__dropdown-menu-item--selected a,
-.tl-header__dropdown-menu-item--selected button {
-  background-color: var(--header-nav-item-background-selected);
-}
-.tl-header__launcher-menu-item a,
-.tl-header__launcher-menu-item button {
-  all: unset;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding: 0 12px;
-  display: flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 8px;
-  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);
-  background-color: var(--header-nav-dropdown-item-background);
-  color: var(--color-foreground-text-defined);
-  border-radius: 4px;
-  transition: background-color 150ms ease;
-}
-.tl-header__launcher-menu-item a:hover,
-.tl-header__launcher-menu-item button:hover {
-  background-color: var(--header-app-launcher-grid-hover-background);
-  cursor: pointer;
-}
-.tl-header__launcher-menu-item a:focus-visible,
-.tl-header__launcher-menu-item button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-}
-
-.tl-header__user-menu-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.tl-header__title {
-  all: unset;
-  box-sizing: border-box;
-}
-.tl-header__title * {
-  box-sizing: border-box;
-}
-.tl-header__title {
-  border-right: 1px solid var(--header-basic-element-border);
-  height: 100%;
-}
-
-.tl-header__title-text {
-  font-size: 14px;
-  padding: 4px 32px 0 16px;
-  color: var(--header-nav-item);
-  font-weight: var(--header-font-weight);
-  font-family: var(--header-font-family-headline);
-  text-transform: var(--header-text-transform);
-  letter-spacing: normal;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.tl-header__brand {
-  display: block;
-  width: var(--header-brand-item-width);
-  height: 30px;
-  background-image: var(--header-logotype-local), var(--header-logotype-cdn);
-  background-size: var(--header-brand-logo-size) auto;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.tl-header {
-  display: block;
-  height: var(--tds-header-height);
-  background-color: var(--header-background);
-  width: 100%;
-  z-index: var(--tds-z-index-header);
-}
-
-.tl-header__nav {
-  box-sizing: border-box;
-}
-.tl-header__nav * {
-  box-sizing: border-box;
-}
-.tl-header__nav {
-  background-color: var(--header-background);
-  width: 100%;
-  display: block;
-}
-
-.tl-header__list {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: var(--tds-header-height);
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.tl-header__item {
-  display: none;
-  height: 100%;
-}
-@media (min-width: 992px) {
-  .tl-header__item {
-    display: block;
-  }
-}
-.tl-header__item:has(.tl-icon--burger), .tl-header__item:has(.tl-header__brand) {
-  display: block;
-}
-
-.tl-header__dropdown {
-  display: none;
-  font-family: var(--headline-07-font-family);
-  font-size: var(--headline-07-font-size);
-  line-height: var(--headline-07-line-height);
-  font-weight: var(--headline-07-font-weight);
-  letter-spacing: var(--headline-07-letter-spacing);
-  text-transform: var(--headline-07-text-transform);
-  height: 100%;
-  position: relative;
-}
-@media (min-width: 992px) {
-  .tl-header__dropdown {
-    display: block;
-  }
-}
-.tl-header__dropdown:has(.tl-icon--bento) {
-  display: block;
-}
-
-.tl-header__middle-spacer {
-  display: block;
-  flex-grow: 1;
-  height: var(--tds-header-height);
-  border-right: 1px solid var(--header-basic-element-border);
-}