:host {
  display: block;
}
:host .wrapper {
  display: flex;
  flex-direction: column;
}
:host .dropdown-icon {
  margin-left: auto;
  transition: all 0.2s ease-in-out;
}
:host .state-open .dropdown-icon {
  transform: rotateZ(180deg);
}
:host .state-open .menu {
  display: block;
}
:host .state-collapsed .menu {
  --side-menu-width: 69px;
  position: absolute;
  left: var(--side-menu-width);
  box-shadow: var(--tds-nav-dropdown-menu-box);
  background-color: var(--tds-sidebar-side-menu-subnav-background);
}
:host .state-collapsed .menu .heading-collapsed {
  all: unset;
  box-sizing: border-box;
  padding: 16px 24px 15px;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
  font: var(--tds-headline-07);
  letter-spacing: var(--tds-headline-07-ls);
}
:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list) {
  width: 100%;
}
:host .menu {
  display: none;
  flex-direction: column;
}