/*
  Contains spacing variables for the layout
*/
: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 {
  pointer-events: none;
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
}
:host .wrapper {
  height: inherit;
  /* default slot */
  /* 'end' slot */
}
:host .wrapper slot:not([name])::slotted(*) {
  border-bottom: var(--tds-side-menu-item-border-thickness) solid var(--tds-side-menu-item-border-color);
}
:host .wrapper slot[name=end] {
  border-top: var(--tds-side-menu-item-border-thickness) solid var(--tds-side-menu-item-border-color);
}
:host .wrapper .tds-side-menu-list-end {
  margin-top: var(--tds-side-menu-item-height);
}
:host .state-closed {
  display: none;
}
:host .state-open slot[name=overlay]::slotted(tds-side-menu-overlay) {
  opacity: 0.4;
}
:host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button) {
  opacity: 1;
}
:host .state-upper-slot-empty .tds-side-menu-list-upper {
  display: none;
}
:host .state-upper-slot-empty .tds-side-menu-list-end {
  margin-top: 0;
}
:host .state-upper-slot-empty ::slotted([slot=end]) {
  border-top: none;
  border-bottom: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-item-border-color);
}

@media (max-width: 992px) {
  :host(.menu-opened) {
    pointer-events: auto;
    z-index: 500;
  }
}
@media (min-width: 992px) {
  :host(.menu-persistent) {
    pointer-events: auto;
    position: static;
    width: 272px;
    height: auto;
    border-right: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-border-color);
  }
  :host(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay) {
    display: none;
  }
  :host(.menu-persistent) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button) {
    display: none;
  }
  :host(.menu-persistent) .menu {
    width: 272px;
  }
  :host(.menu-persistent) .state-closed {
    display: block;
  }
  :host(.menu-persistent):host(.menu-collapsed) {
    width: calc(var(--tds-side-menu-width-collapsed) + var(--tds-side-menu-border-thickness));
    box-sizing: border-box;
  }
  :host(.menu-persistent):host(.menu-collapsed) .menu {
    width: var(--tds-side-menu-width-collapsed);
  }
}
.menu {
  width: 80%;
  height: inherit;
  position: relative;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--tds-side-menu-gap);
  background-color: var(--tds-side-menu-background);
}

@media (max-width: 384px) {
  .menu {
    width: 100%;
  }
}
aside .tds-side-menu-wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--tds-side-menu-background);
  padding: 0 var(--tds-side-menu-horizontal-padding);
  overflow-y: auto;
}
aside .tds-side-menu-wrapper: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;
}
aside .tds-side-menu-wrapper::-webkit-scrollbar {
  width: var(--tds-scrollbar-width);
}
aside .tds-side-menu-wrapper::-webkit-scrollbar-track {
  background: var(--tds-scrollbar-track-color);
}
aside .tds-side-menu-wrapper::-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;
}
aside .tds-side-menu-wrapper::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  aside .tds-side-menu-wrapper {
    scrollbar-color: var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);
    scrollbar-width: var(--tds-scrollbar-width-standard);
  }
}
aside nav {
  height: 100%;
  display: flex;
  flex-direction: column;
}
aside li {
  list-style: none;
  padding: 0;
  margin: 0;
}