@scania/tegel-lite 0.0.1-beta.0

package/dist/tl-header.css

@@ -0,0 +1,703 @@
+@charset "UTF-8";
+.tl-header {
+  /* Base background & text */
+  --header-background: var(--component-header-color-background);
+  --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(--color-background-surface-100);
+  --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-color-background-pressed);
+  --header-basic-element-background-selected: var(--component-header-color-background-selected);
+  /* 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 .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;
+}
+
+.traton .tds-mode-dark .tl-header {
+  /* Brand logo */
+  --header-logotype-local: var(--traton-logotype-white-svg-local);
+  --header-logotype-cdn: var(--traton-logotype-white-svg);
+}
+.traton .tds-mode-light .tl-header {
+  /* Brand logo */
+  --header-logotype-local: var(--traton-logotype-black-svg-local);
+  --header-logotype-cdn: var(--traton-logotype-black-svg);
+}
+.traton .tl-header {
+  --component-header-space-profile-padding: 20px;
+}
+
+/* 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--pressed .tl-header__item-wrapper {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  background-color: var(--header-basic-element-background-selected);
+  box-shadow: inset 0 0 0 2px var(--header-nav-item-border-pressed);
+}
+.tl-header__item--selected:not(.tl-header__item--pressed) .tl-header__item-wrapper {
+  padding-top: 4px;
+  border-bottom-style: solid;
+  border-bottom-width: 4px;
+  border-bottom-color: 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--open {
+  background-color: var(--header-basic-element-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(--header-basic-element-background-pressed);
+}
+.tl-header__dropdown-wrapper--selected {
+  padding-top: 4px;
+  border-bottom: 4px solid var(--header-nav-item-border-pressed);
+}
+.tl-header__dropdown-wrapper--pressed {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  background-color: var(--header-basic-element-background-selected);
+  box-shadow: inset 0 0 0 2px 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--open {
+  background-color: var(--header-basic-element-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(--header-basic-element-background-pressed);
+}
+.tl-header__dropdown-wrapper-user--selected {
+  padding-top: 4px;
+  border-bottom: 4px solid var(--header-nav-item-border-pressed);
+}
+.tl-header__dropdown-wrapper-user--pressed {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  background-color: var(--header-basic-element-background-selected);
+  box-shadow: inset 0 0 0 2px var(--header-nav-item-border-pressed);
+}
+
+.tl-header__dropdown-icon {
+  transition: transform 0.2s ease;
+}
+.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);
+}
+.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);
+}
+.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(--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-nav-item-dropdown-opened);
+}
+
+.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(--detail-04-font-family);
+  font-size: var(--detail-04-font-size);
+  line-height: var(--detail-04-line-height);
+  font-weight: var(--detail-04-font-weight);
+  letter-spacing: var(--detail-04-letter-spacing);
+  text-transform: var(--detail-04-text-transform);
+  background-color: var(--header-nav-dropdown-item-background);
+  color: var(--header-app-launcher-grid-category-title);
+  text-transform: uppercase;
+  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(--header-nav-item-dropdown-opened);
+}
+.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(--tds-header-app-launcher-menu-bg);
+  color: var(--tds-header-app-launcher-grid-color);
+  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);
+}