@scania/tegel/dist/collection/components/header/header-launcher/header-launcher.css

Tegel Design System

:host,
:root {
  --tds-scrollbar-width-standard: thin;
  --tds-scrollbar-width: 10px;
  --tds-scrollbar-height: 10px;
  --tds-scrollbar-thumb-border-width: 3px;
  --tds-scrollbar-thumb-border-hover-width: 2px;
}

body {
  scrollbar-width: thin;
}

/** The breakpoint at which the layout changes from fixed size to full-width. */
:host .wrapper {
  height: var(--tds-header-height);
  position: relative;
}
:host .wrapper .menu {
  /** Should control only height, position, and overflow here. 
    Width and appearance are set inside nested components */
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - var(--tds-header-height));
  box-shadow: var(--tds-nav-dropdown-menu-box);
  background-color: var(--tds-header-app-launcher-menu-background);
  border-radius: 0;
}
:host .wrapper .menu:hover::-webkit-scrollbar-thumb {
  border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
  background-clip: padding-box;
}
:host .wrapper .menu::-webkit-scrollbar {
  width: var(--tds-scrollbar-width);
}
:host .wrapper .menu::-webkit-scrollbar-track {
  background: var(--tds-scrollbar-track-color);
}
:host .wrapper .menu::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tds-scrollbar-thumb-color);
  border: var(--tds-scrollbar-thumb-border-width) solid transparent;
  background-clip: padding-box;
}
:host .wrapper .menu::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  :host .wrapper .menu {
    scrollbar-color: var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);
    scrollbar-width: var(--tds-scrollbar-width-standard);
  }
}
@media all and (max-width: 384px) {
  :host .wrapper .menu {
    width: 100vw;
  }
}
:host .wrapper.state-list-type-menu .menu {
  height: calc(100vh - var(--tds-header-height));
}
:host .wrapper.state-open .button {
  position: relative;
  z-index: 901;
}