:host {
  /* layout */
  --ld-sidenav-line-height: 1.15;
  --ld-sidenav-padding-x: 1rem;
  --ld-sidenav-padding-y: 1rem;
  --ld-sidenav-padding: var(--ld-sidenav-padding-y) var(--ld-sidenav-padding-x);
  --ld-sidenav-toggle-size: var(--ld-sp-24);
  --ld-sidenav-toggle-top: calc(
    2 * var(--ld-sidenav-padding-y) + var(--ld-sidenav-navitem-icon-size) - 0.5 *
      var(--ld-sidenav-toggle-size)
  );
  --ld-sidenav-translate-x-delta: calc(
    var(--ld-sidenav-width) - var(--ld-sidenav-width-collapsed)
  );
  --ld-sidenav-width: 15.625rem;
  --ld-sidenav-width-collapsed: calc(
    2 * var(--ld-sidenav-padding-x) + var(--ld-sidenav-navitem-icon-size)
  );
  --ld-sidenav-width-fully-collapsed: calc(-1 * var(--ld-sp-1));

  /* layout ld-navitem */
  --ld-sidenav-navitem-active-indicator-border-width: 0.1875rem;
  --ld-sidenav-navitem-icon-size: var(--ld-sp-32);
  --ld-sidenav-navitem-bg-inset: var(--ld-sp-6);
  --ld-sidenav-navitem-border-radius: var(--ld-br-l);
  --ld-sidenav-navitem-tertiary-indent: calc(
    3 * var(--ld-sidenav-padding-x) + 0.3125rem
  );
  --ld-sidenav-navitem-tertiary-width: calc(
    100% - (4 * var(--ld-sidenav-padding-x)) - 0.3125rem
  );

  /* transitions */
  --ld-sidenav-collapse-content-transition: opacity
      var(--ld-sidenav-transition-duration-collapse-expand)
      var(--ld-sidenav-transition-delay-collapse-expand) linear,
    transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
  --ld-sidenav-transition-delay: 0s;
  --ld-sidenav-transition-delay-collapse-expand: 0s;
  /* Not using 0s here because we rely on the transition end event. */
  --ld-sidenav-transition-duration: var(--ld-transition-duration-instant);
  --ld-sidenav-transition-duration-collapse-expand: var(
    --ld-transition-duration-instant
  );
  --ld-sidenav-translate-x-direction: 1;
  --ld-sidenav-stack-to-top-transition: transform
    var(--ld-sidenav-transition-duration-collapse-expand)
    var(--ld-sidenav-transition-delay-collapse-expand) ease;

  /* colors */
  --ld-sidenav-bg-color: var(--ld-col-wht);
  --ld-sidenav-separator-line-bg-col: var(--ld-col-neutral-100);
  --ld-sidenav-subnav-bg-color: var(--ld-col-wht);

  &(.ld-sidenav--transitions) {
    @media (prefers-reduced-motion: no-preference) {
      --ld-sidenav-transition-duration: var(--ld-transition-duration-normal);
      --ld-sidenav-transition-duration-collapse-expand: var(
        --ld-transition-duration-normal
      );
      --ld-sidenav-transition-delay: var(--ld-transition-duration-quick);
      --ld-sidenav-transition-delay-collapse-expand: var(
        --ld-transition-duration-quick
      );
    }
  }

  &(.ld-sidenav--toggle-transition-disabled) {
    @media (prefers-reduced-motion: no-preference) {
      --ld-sidenav-transition-duration-collapse-expand: var(
        --ld-transition-duration-instant
      );
      --ld-sidenav-transition-delay-collapse-expand: 0s;
    }
  }

  background-color: var(--ld-sidenav-bg-color);
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font: var(--ld-typo-body-m);
  left: 0;
  overflow: hidden;
  position: var(--ld-sidenav-position, fixed);
  text-align: left;
  transition: transform var(--ld-sidenav-transition-duration-collapse-expand)
    ease;
  top: 0;
  width: var(--ld-sidenav-width);

  /* Create a stacking context with a default z-index greater zero,
  so that elements with a stacking context of their own don't overlap. */
  z-index: var(--ld-sidenav-z-index, 1);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--ld-sp-2);
    background-color: var(--ld-sidenav-separator-line-bg-col);
    z-index: 2;
  }

  .ld-sidenav__content {
    transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
      linear;
  }

  &(.ld-sidenav--closable:not(.ld-sidenav--open)) {
    .ld-sidenav__content {
      transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
          linear,
        visibility 0s var(--ld-sidenav-transition-duration-collapse-expand)
          linear;
      visibility: hidden;
    }
  }

  &(.ld-sidenav--collapsed:not(.ld-sidenav--closable)) {
    transform: translateX(
      calc(
        var(--ld-sidenav-translate-x-direction) *
          (-100% + var(--ld-sidenav-width-collapsed))
      )
    );
  }

  &(.ld-sidenav--collapsed.ld-sidenav--fully-collapsible:not(.ld-sidenav--closable)) {
    transform: translateX(
      calc(
        var(--ld-sidenav-translate-x-direction) *
          (-100% + var(--ld-sidenav-width-fully-collapsed))
      )
    );

    .ld-sidenav__content {
      opacity: 0;
      visibility: hidden;
    }
  }

  &(.ld-sidenav--collapsed.ld-sidenav--fully-collapsible.ld-sidenav--transitions:not(.ld-sidenav--closable)) {
    .ld-sidenav__content {
      transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
          linear,
        visibility 0s var(--ld-sidenav-transition-duration-collapse-expand)
          linear;
    }
  }

  &(.ld-sidenav--right) {
    --ld-sidenav-translate-x-direction: -1;
    --ld-sidenav-translate-x-delta: 0;
    left: unset;
    right: 0;

    &::before {
      right: unset;
      left: 0;
      transform: translateX(-50%) scaleX(1.5);
    }
  }

  &(.ld-sidenav--closable) {
    --ld-sidenav-collapse-content-transition: none;
    --ld-sidenav-stack-to-top-transition: none;
    --ld-sidenav-navitem-move-up-closable: 0;
    --ld-sidenav-translate-x-delta: 0;
    width: 100%;
    transform: translateX(
      calc(var(--ld-sidenav-translate-x-direction) * -100%)
    );
  }

  &(.ld-sidenav--closable.ld-sidenav--open) {
    transform: translateX(0);
  }

  ::slotted(ld-sidenav-navitem) {
    margin-bottom: var(--ld-sidenav-padding-y);
  }

  ::slotted(ld-sidenav-navitem[slot='top']),
  ::slotted(ld-sidenav-navitem[slot='bottom']) {
    margin-top: var(--ld-sidenav-padding-y);
  }

  ::slotted(ld-sidenav-heading) {
    margin: var(--ld-sidenav-padding-y) 0;
  }
}

.ld-sidenav__toggle {
  aspect-ratio: 1;
  background-color: var(--ld-col-wht);
  border: 0;
  border-radius: var(--ld-br-full);
  box-shadow: var(--ld-shadow-stacked);
  color: var(--ld-thm-primary);
  cursor: pointer;
  display: grid;
  outline-offset: var(--ld-sp-4);
  place-content: center;
  position: absolute;
  right: 0;
  top: var(--ld-sidenav-toggle-top);
  touch-action: manipulation;
  transform: translateX(50%);
  width: var(--ld-sidenav-toggle-size);
  will-change: transform; /* fixes rendering issue */
  z-index: 1;
  -webkit-touch-callout: none;

  /* background color */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
  }

  /* increase click area */
  &::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--ld-sp-6));
    display: block;
    border-radius: inherit;
  }

  &:hover,
  &:focus:focus-visible {
    &:not(:active) {
      box-shadow: var(--ld-shadow-sticky);
    }
  }

  &:where(:focus:focus-visible) {
    color: var(--ld-thm-primary-hover);

    &::before {
      background-color: var(--ld-thm-primary-alpha-low);
    }
  }
  @media (hover: hover) {
    &:where(:hover) {
      color: var(--ld-thm-primary-hover);
    }
  }
  &:where(:active),
  &:where(:active:focus-visible) {
    color: var(--ld-thm-primary-active);
  }

  :host(.ld-sidenav--right) & {
    transform: translateX(-50%);
    right: unset;
    left: 0;
  }
}

.ld-sidenav__toggle-icon {
  transform-origin: center;
  position: relative;

  :host(.ld-sidenav--collapsed) & {
    transform: rotate(180deg);
  }

  :host(.ld-sidenav--right) & {
    transform: rotate(180deg);
  }
  :host(.ld-sidenav--right.ld-sidenav--collapsed) & {
    transform: none;
  }
}

.ld-sidenav__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  will-change: transform; /* fixes overflow not working on slide transition */
}

.ld-sidenav__slot-container-default {
  height: 100%;
  position: relative;
}

.ld-sidenav__slot-container-top,
.ld-sidenav__slot-container-bottom {
  background-color: var(--ld-sidenav-bg-color);
  z-index: 1;
  position: relative;
}

.ld-sidenav__slot-container-top,
.ld-sidenav__slot-container-default,
.ld-sidenav__slot-container-bottom {
  &::before {
    visibility: visible;
    z-index: 0;
    opacity: 0;
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--ld-sidenav-subnav-bg-color);
    transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
      linear;
  }

  :host(.ld-sidenav--has-active-subnav) & {
    &::before {
      opacity: 1;
    }
  }
}

.ld-sidenav__fully-collapsed-click-area {
  display: none;
  inset: 0;
  position: absolute;
  z-index: 1;

  :host(
      .ld-sidenav--collapsed.ld-sidenav--fully-collapsible:not(
          .ld-sidenav--closable
        )
    )
    & {
    display: block;
  }
}
