: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;
}

:host {
  height: var(--tds-header-height);
  position: relative;
}
:host .menu {
  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-top-right-radius: 0;
  border-top-left-radius: 0;
}
:host .menu:hover::-webkit-scrollbar-thumb {
  border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
  background-clip: padding-box;
}
:host .menu::-webkit-scrollbar {
  width: var(--tds-scrollbar-width);
}
:host .menu::-webkit-scrollbar-track {
  background: var(--tds-scrollbar-track-color);
}
:host .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 .menu::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  :host .menu {
    scrollbar-color: var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);
    scrollbar-width: var(--tds-scrollbar-width-standard);
  }
}
:host .state-open .dropdown-icon {
  transform: rotate(180deg);
}
:host .state-open .button {
  position: relative;
  z-index: 901;
}
:host .state-open tds-header-item button:hover,
:host .state-open tds-header-item a:hover {
  background-color: var(--tds-nav-item-background-hover);
  box-shadow: none;
}