:host {
  display: flex;

  &([slot="toggle"]) {
    .ld-sidenav-navitem__bg {
      width: var(--ld-sidenav-navitem-bg-width);
    }
  }
}

.ld-sidenav-navitem {
  /* layout */
  --ld-sidenav-navitem-height: var(--ld-sp-32);
  --ld-sidenav-navitem-icon-font-size: 90%;
  --ld-sidenav-navitem-indicator-additional-border-radius: var(--ld-sp-4);

  /* colors */
  --ld-sidenav-navitem-col: var(--ld-col-neutral-800);
  --ld-sidenav-navitem-col-active: var(--ld-thm-primary-active);
  --ld-sidenav-navitem-col-hover: var(--ld-thm-primary);
  --ld-sidenav-navitem-col-focus: var(--ld-thm-primary);
  --ld-sidenav-navitem-indicator-col: transparent;
  --ld-sidenav-navitem-indicator-col-active: var(--ld-thm-primary);
  --ld-sidenav-navitem-indicator-col-hover: var(--ld-col-neutral-050);
  --ld-sidenav-navitem-indicator-col-focus: var(--ld-thm-primary-focus);
  --ld-sidenav-navitem-indicator-col-selected: var(--ld-col-neutral-050);
  --ld-sidenav-navitem-indicator-col-selected-active: var(--ld-thm-primary);
  --ld-sidenav-navitem-indicator-col-selected-hover: var(--ld-col-neutral-100);
  --ld-sidenav-navitem-indicator-col-selected-focus: var(
    --ld-thm-primary-focus
  );
  --ld-sidenav-navitem-secondary-icon-color: var(--ld-thm-primary);

  background-color: transparent;
  margin: 0 var(--ld-sidenav-padding-x);
  position: relative;
  flex-grow: 1;
  font: var(--ld-typo-body-s);
  font-weight: 700;
  border: 0;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  color: var(--ld-sidenav-navitem-col);
  display: grid;
  grid-template-columns: var(--ld-sidenav-navitem-icon-size) 1fr auto;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  text-align: left;
  text-decoration: none;
  outline: none;
  -webkit-touch-callout: none;

  &:not(
      .ld-sidenav-navitem--secondary,
      .ld-sidenav-navitem--tertiary,
      .ld-sidenav-navitem--in-accordion
    ) {
    transition: var(--ld-sidenav-stack-to-top-transition);
    transform: translateY(
      var(
        --ld-sidenav-navitem-move-up-closable,
        var(--ld-sidenav-navitem-move-up, 0)
      )
    );
  }

  &.ld-sidenav-navitem--collapsed {
    &.ld-sidenav-navitem--secondary,
    &.ld-sidenav-navitem--tertiary {
      transition: visibility 0s
        calc(2 * var(--ld-sidenav-transition-duration-collapse-expand)) linear;
      visibility: hidden;
    }

    &:not(.ld-sidenav-navitem--secondary, .ld-sidenav-navitem--tertiary) {
      transition: transform
        var(--ld-sidenav-transition-duration-collapse-expand) ease;
    }

    &:not(.ld-sidenav-navitem--right-aligned) {
      .ld-sidenav-navitem__bg {
        transform: translateX(
          calc(var(--ld-sidenav-width) - var(--ld-sidenav-width-collapsed))
        );
      }
    }
  }

  &--in-accordion {
    margin: 0;
  }

  &:active {
    --ld-sidenav-navitem-col: var(--ld-thm-primary-active);
    --ld-sidenav-navitem-indicator-col: var(
      --ld-sidenav-navitem-indicator-col-active
    );

    .ld-sidenav-navitem__bg {
      opacity: 0.3;
    }
  }

  @media (hover: hover) {
    &:where(:hover) {
      --ld-sidenav-navitem-col: var(--ld-sidenav-navitem-col-hover);
      --ld-sidenav-navitem-indicator-col: var(
        --ld-sidenav-navitem-indicator-col-hover
      );
    }
  }

  &:focus:focus-visible {
    --ld-sidenav-navitem-col: var(--ld-sidenav-navitem-col-focus);
    --ld-sidenav-navitem-indicator-col: var(
      --ld-sidenav-navitem-indicator-col-focus
    );

    .ld-sidenav-navitem__bg {
      opacity: 0.2;
    }

    &:active {
      --ld-sidenav-navitem-col: var(--ld-sidenav-navitem-col-active);
      --ld-sidenav-navitem-indicator-col: var(
        --ld-sidenav-navitem-indicator-col-active
      );

      .ld-sidenav-navitem__bg {
        opacity: 0.3;
      }
    }
  }

  &--selected {
    --ld-sidenav-navitem-col: var(--ld-thm-primary);
    --ld-sidenav-navitem-indicator-col: var(
      --ld-sidenav-navitem-indicator-col-selected
    );

    &:active {
      --ld-sidenav-navitem-indicator-col: var(
        --ld-sidenav-navitem-indicator-col-selected-active
      );
    }

    @media (hover: hover) {
      &:where(:hover) {
        --ld-sidenav-navitem-indicator-col: var(
          --ld-sidenav-navitem-indicator-col-selected-hover
        );
      }
    }

    &:focus:focus-visible {
      --ld-sidenav-navitem-indicator-col: var(
        --ld-sidenav-navitem-indicator-col-selected-focus
      );

      &:active {
        --ld-sidenav-navitem-indicator-col: var(
          --ld-sidenav-navitem-indicator-col-selected-active
        );
      }
    }
  }

  &--rounded {
    --ld-sidenav-navitem-border-radius: calc(
      0.5 * var(--ld-sidenav-navitem-icon-size)
    );
  }

  &--tertiary {
    grid-template-columns:
      calc(var(--ld-sidenav-navitem-icon-size) - var(--ld-sp-8))
      1fr auto;
    margin-left: var(--ld-sidenav-navitem-tertiary-indent);
    width: var(--ld-sidenav-navitem-tertiary-width);
    gap: 0;
  }
}

.ld-sidenav-navitem__bg {
  position: absolute;
  inset: calc(-1 * var(--ld-sidenav-navitem-bg-inset));
  display: block;
  transition: transform var(--ld-sidenav-transition-duration-collapse-expand)
    ease;
  pointer-events: none;
}

.ld-sidenav-navitem__bg-left,
.ld-sidenav-navitem__bg-right,
.ld-sidenav-navitem__bg-center {
  background-color: var(--ld-sidenav-navitem-indicator-col);
  position: absolute;
  top: 0;
  bottom: 0;
  transition: transform var(--ld-sidenav-transition-duration-collapse-expand)
    ease;
  pointer-events: all;
}

.ld-sidenav-navitem__bg-left,
.ld-sidenav-navitem__bg-right {
  width: calc(
    0.5 * var(--ld-sidenav-navitem-icon-size) + 2 *
      var(--ld-sidenav-navitem-indicator-additional-border-radius)
  );
}

.ld-sidenav-navitem__bg-left {
  left: 0;
  border-bottom-left-radius: calc(
    var(--ld-sidenav-navitem-border-radius) +
      var(--ld-sidenav-navitem-indicator-additional-border-radius)
  );
  border-top-left-radius: calc(
    var(--ld-sidenav-navitem-border-radius) +
      var(--ld-sidenav-navitem-indicator-additional-border-radius)
  );
}

.ld-sidenav-navitem__bg-right {
  right: 0;
  border-bottom-right-radius: calc(
    var(--ld-sidenav-navitem-border-radius) +
      var(--ld-sidenav-navitem-indicator-additional-border-radius)
  );
  border-top-right-radius: calc(
    var(--ld-sidenav-navitem-border-radius) +
      var(--ld-sidenav-navitem-indicator-additional-border-radius)
  );

  .ld-sidenav-navitem--collapsed & {
    transform: translateX(
      calc(-1 * (var(--ld-sidenav-width) - var(--ld-sidenav-width-collapsed)))
    );
  }
  .ld-sidenav-navitem--collapsed.ld-sidenav-navitem--in-accordion & {
    transform: translateX(
      calc(
        (
            var(--ld-sidenav-translate-x-delta) -
              var(--ld-sidenav-navitem-icon-size) +
              var(--ld-sidenav-navitem-bg-right-x-delta, 0px)
          ) * -1
      )
    );
  }
}

.ld-sidenav-navitem__bg-center {
  left: calc(
    0.5 * var(--ld-sidenav-navitem-icon-size) +
      var(--ld-sidenav-navitem-indicator-additional-border-radius)
  );
  right: calc(
    0.5 * var(--ld-sidenav-navitem-icon-size) +
      var(--ld-sidenav-navitem-indicator-additional-border-radius)
  );
  transform-origin: left;

  .ld-sidenav-navitem--collapsed & {
    transform: scaleX(0);
  }
}

/*
Using z-index -1 on .ld-sidenav-navitem__bg results
in .ld-sidenav-navitem__bg not being clickable.
That's why we set z-index 0 on the following elements.
*/
.ld-sidenav-navitem__dot,
.ld-sidenav-navitem__slot-container,
.ld-sidenav-navitem__slot-container-icon {
  position: relative;
  z-index: 0;
}

.ld-sidenav-navitem__dot {
  align-self: center;
  flex-shrink: 0;
  display: none;
  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-navitem--collapsed & {
    transition:
      opacity var(--ld-sidenav-transition-duration-collapse-expand) linear,
      transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
    opacity: 0;
    transform: translateX(var(--ld-sidenav-translate-x-delta));
  }

  .ld-sidenav-navitem--secondary &,
  .ld-sidenav-navitem--tertiary & {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ld-sp-8) 0;

    &::before {
      content: '';
      display: block;
      width: var(--ld-sp-8);
      aspect-ratio: 1;
      background-color: var(
        --ld-sidenav-navitem-icon-bg-col,
        var(--ld-thm-primary)
      );
      border-radius: var(--ld-br-s);
    }
  }

  .ld-sidenav-navitem--rounded.ld-sidenav-navitem--secondary &,
  .ld-sidenav-navitem--rounded.ld-sidenav-navitem--tertiary & {
    &::before {
      border-radius: var(--ld-br-full);
    }
  }

  .ld-sidenav-navitem--secondary & {
    width: var(--ld-sidenav-navitem-icon-size);
  }
  .ld-sidenav-navitem--tertiary & {
    width: calc(var(--ld-sidenav-navitem-icon-size) - var(--ld-sp-8));

    &::before {
      background-color: transparent;
      box-shadow: inset 0 0 0 var(--ld-sp-2)
        var(--ld-sidenav-navitem-icon-bg-col, var(--ld-thm-primary));
    }
  }
}

.ld-sidenav-navitem__slot-container-icon {
  flex-shrink: 0;
  background-color: var(
    --ld-sidenav-navitem-icon-bg-col,
    var(--ld-thm-primary)
  );
  color: var(--ld-sidenav-navitem-icon-col, var(--ld-thm-secondary-focus));
  border-radius: var(--ld-sidenav-navitem-border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--ld-sidenav-navitem-icon-size);
  height: var(--ld-sidenav-navitem-icon-size);
  transition: transform var(--ld-sidenav-transition-duration-collapse-expand)
    ease;
  position: relative;
  z-index: 1;

  .ld-sidenav-navitem--secondary &,
  .ld-sidenav-navitem--tertiary & {
    display: none;
  }

  .ld-sidenav-navitem--collapsed & {
    transform: translateX(var(--ld-sidenav-translate-x-delta));
  }

  > ::slotted(*) {
    width: 100%;
    height: 100%;
    border-radius: calc(var(--ld-sidenav-navitem-border-radius));
    transform: scale(1.01); /* removes weird outline */
  }
}

.ld-sidenav-navitem__tooltip {
  position: absolute;
  inset: calc(-1 * var(--ld-sidenav-navitem-bg-inset));
  z-index: 1;
  pointer-events: all; /* overwrites pointer-events set on sidenav accordion */
}
.ld-sidenav-navitem__tooltip-trigger {
  position: relative;
  cursor: pointer;
  width: calc(
    var(--ld-sidenav-navitem-icon-size) + 2 * var(--ld-sidenav-navitem-bg-inset)
  );
  aspect-ratio: 1;
  border-radius: var(--ld-sidenav-navitem-border-radius);

  .ld-sidenav-navitem--rounded & {
    border-radius: var(--ld-br-full);
  }
}

.ld-sidenav-navitem__slot-container {
  margin-left: var(--ld-sp-12);
  margin-right: auto;
  max-height: var(--ld-sidenav-navitem-height); /* required in Safari */
  line-height: var(--ld-sidenav-line-height);
  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;
  padding-right: var(--ld-sp-4);

  .ld-sidenav-navitem--secondary-icon & {
    padding-right: var(--ld-sp-12);
  }

  .ld-sidenav-navitem--collapsed & {
    opacity: 0;
    transform: translateX(var(--ld-sidenav-translate-x-delta));
    transition:
      opacity var(--ld-sidenav-transition-duration-collapse-expand) linear,
      transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
  }

  .ld-sidenav-navitem--secondary &,
  .ld-sidenav-navitem--tertiary & {
    padding-left: 0;
  }
}

.ld-sidenav-navitem__mainline,
.ld-sidenav-navitem__subline {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
}

.ld-sidenav-navitem--subline .ld-sidenav-navitem__mainline,
.ld-sidenav-navitem__subline {
  -webkit-line-clamp: 1;
}

.ld-sidenav-navitem__subline {
  font: var(--ld-typo-body-s);
  line-height: var(--ld-sidenav-line-height);
  color: var(--ld-col-neutral-700);
}

.ld-sidenav-navitem__slot-icon-secondary-container {
  position: relative;
  display: flex;
  flex-shrink: 0;
  margin-right: var(--ld-sp-12);
  color: var(--ld-sidenav-navitem-secondary-icon-color);
  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-navitem--collapsed & {
    opacity: 0;
    transform: translateX(var(--ld-sidenav-translate-x-delta));
    transition:
      opacity var(--ld-sidenav-transition-duration-collapse-expand) linear,
      transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
  }

  .ld-sidenav-navitem--in-accordion & {
    margin-right: var(--ld-sp-4);
  }
}

.ld-sidenav-navitem__abbr {
  font: var(--ld-typo-cap-m);
  font-size: var(--ld-sidenav-navitem-icon-font-size);
  text-transform: uppercase;
}

.ld-sidenav-navitem__icon-to {
  transform: translateX(var(--ld-sp-6));
}
