/* Typography Usage mixins */
tds-side-menu {
  --tds-side-menu-background: var(--component-side-menu-background-default);
  --tds-side-menu-border-color: var(--component-side-menu-border-divider-default);
  --tds-side-menu-border-thickness: var(--unit-1);
  --tds-side-menu-width-collapsed: var(--unit-68);
  --tds-side-menu-horizontal-padding: 0px;
  --tds-side-menu-gap: 0px;
  --tds-side-menu-dropdown-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
  --tds-side-menu-item-background: var(--component-side-menu-background-item-link-default);
  --tds-side-menu-item-border-color: var(--component-side-menu-border-divider-default);
  --tds-side-menu-item-border-thickness: var(--unit-1);
  --tds-side-menu-item-border-radius: calc(var(--component-side-menu-border-radius-default) * 1px);
  --tds-side-menu-item-text-color: var(--component-side-menu-text-item-link-default);
  --tds-side-menu-item-background-hover: var(--component-side-menu-background-item-link-hover);
  --tds-side-menu-item-background-active: var(--component-side-menu-background-item-link-active);
  --tds-side-menu-item-background-selected: var(
    --component-side-menu-background-item-current-default
  );
  --tds-side-menu-item-border-left-color-selected: var(
    --component-side-menu-border-item-indicator-default
  );
  --tds-side-menu-item-icon-color: var(--component-side-menu-icon-item-link-default);
  --tds-side-menu-item-horizontal-padding: var(--unit-22);
  --tds-side-menu-item-height: var(--unit-68);
  --tds-side-menu-sub-item-height: var(--unit-48);
  --tds-side-menu-sub-item-padding-icon: var(--unit-16) var(--unit-48) var(--unit-16) var(--unit-58);
  --tds-side-menu-sub-item-padding-user-image: var(--unit-16) var(--unit-48) var(--unit-16)
    var(--unit-64);
  --tds-side-menu-sub-items-gap: 0px;
  --tds-side-menu-item-horizontal-gap: var(--unit-10);
  --tds-side-menu-item-user-subheading-color: var(--component-side-menu-text-subtitle-default);
  --tds-side-menu-user-gap: var(--unit-16);
  --tds-side-menu-user-image-size: var(--unit-34);
  --tds-side-menu-close-button-height: var(--unit-64);
  --tds-side-menu-dropdown-padding-top: 0px;
}

.scania tds-side-menu {
  --tds-side-menu-width-collapsed: var(--unit-68);
  --tds-side-menu-horizontal-padding: 0px;
  --tds-side-menu-gap: 0px;
  --tds-side-menu-dropdown-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
  --tds-side-menu-item-horizontal-padding: var(--unit-22);
  --tds-side-menu-item-height: var(--unit-68);
  --tds-side-menu-sub-item-height: var(--unit-48);
  --tds-side-menu-sub-item-padding-icon: var(--unit-16) var(--unit-48) var(--unit-16) var(--unit-58);
  --tds-side-menu-sub-item-padding-user-image: var(--unit-16) var(--unit-48) var(--unit-16)
    var(--unit-64);
  --tds-side-menu-sub-items-gap: 0px;
  --tds-side-menu-user-image-size: var(--unit-34);
  --tds-side-menu-close-button-height: var(--unit-64);
  --tds-side-menu-dropdown-padding-top: 0px;
}

.traton tds-side-menu {
  --tds-side-menu-width-collapsed: var(--unit-72);
  --tds-side-menu-horizontal-padding: calc(var(--traton-unit-16) * 1px);
  --tds-side-menu-gap: var(--unit-16);
  --tds-side-menu-dropdown-box-shadow: none;
  --tds-side-menu-item-horizontal-padding: calc(var(--traton-unit-12) * 1px);
  --tds-side-menu-item-height: var(--unit-40);
  --tds-side-menu-sub-item-height: var(--unit-32);
  --tds-side-menu-sub-item-padding-icon: var(--unit-8) var(--unit-48) var(--unit-8) var(--unit-40);
  --tds-side-menu-sub-item-padding-user-image: var(--unit-8) var(--unit-48) var(--unit-8)
    var(--unit-48);
  --tds-side-menu-sub-items-gap: var(--unit-10);
  --tds-side-menu-user-image-size: var(--unit-24);
  --tds-side-menu-close-button-height: var(--unit-36);
  --tds-side-menu-dropdown-padding-top: var(--unit-10);
}

: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([slot=end]) .wrapper .menu {
  flex-direction: column-reverse;
  bottom: calc(100vh - var(--tds-side-menu-dropdown-top-distance) - var(--tds-side-menu-item-height));
  padding-top: var(--tds-side-menu-dropdown-padding-top);
  padding-bottom: 0;
  max-height: calc(var(--tds-side-menu-dropdown-top-distance) * 0.7);
}

:host {
  display: block;
}
:host .wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--tds-side-menu-sub-items-gap);
}
: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: flex;
}
:host .state-collapsed .menu {
  --side-menu-width: 69px;
  position: absolute;
  left: var(--side-menu-width);
  box-shadow: var(--tds-side-menu-dropdown-box-shadow);
  border-radius: var(--tds-side-menu-item-border-radius);
  padding: var(--tds-side-menu-sub-items-gap);
  background-color: var(--tds-side-menu-item-background);
  overflow-y: auto;
  max-height: calc((100vh - var(--tds-side-menu-dropdown-top-distance)) * 0.7);
  z-index: 500;
}
:host .state-collapsed .menu:hover::-webkit-scrollbar-thumb {
  border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
  border-radius: var(--tds-scrollbar-hover-thumb-border-radius);
  background-clip: padding-box;
}
:host .state-collapsed .menu::-webkit-scrollbar {
  width: var(--tds-scrollbar-width);
}
:host .state-collapsed .menu::-webkit-scrollbar-track {
  background: var(--tds-scrollbar-track-color);
}
:host .state-collapsed .menu::-webkit-scrollbar-thumb {
  border-radius: var(--tds-scrollbar-thumb-border-radius);
  background: var(--tds-scrollbar-thumb-color);
  border: var(--tds-scrollbar-thumb-border-width) solid transparent;
  background-clip: padding-box;
}
:host .state-collapsed .menu::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  :host .state-collapsed .menu {
    scrollbar-color: var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);
    scrollbar-width: var(--tds-scrollbar-width-standard);
  }
}
:host .state-collapsed .menu:focus-visible {
  outline: 2px solid var(--component--focus-ring-color-strong);
  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
  outline-offset: 1px;
  z-index: 1;
}
:host .state-collapsed .menu .heading-collapsed {
  all: unset;
  box-sizing: border-box;
  padding: 16px 24px 15px;
  min-height: 48px;
  height: var(--tds-side-menu-item-height);
  width: 190px;
  display: flex;
  align-items: center;
  border-bottom: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-item-border-color);
  font-family: var(--type-system-title-01-font-family);
  font-size: calc(var(--type-system-title-01-font-size) * 1px);
  line-height: calc(var(--type-system-title-01-line-height) * 1px);
  font-weight: var(--type-system-title-01-font-weight);
  letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
}
:host .state-collapsed.state-open tds-side-menu-item button {
  background-color: var(--tds-side-menu-item-background-selected);
  position: relative;
}
:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list) {
  width: 100%;
}
:host .menu {
  display: none;
  flex-direction: column;
}

:host([selected]) .state-collapsed.state-open tds-side-menu-item button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-top-left-radius: var(--tds-side-menu-item-border-radius);
  border-bottom-left-radius: var(--tds-side-menu-item-border-radius);
  background-color: var(--tds-side-menu-item-border-left-color-selected);
}