.ld-sidenav-accordion__accordion {
  --ld-accordion-bg-col: transparent;
  --ld-accordion-bg-col-active: var(--ld-thm-primary-alpha-low);
  --ld-accordion-bg-col-disabled: transparent;
  --ld-accordion-bg-col-focus: var(--ld-thm-primary-alpha-low);
  --ld-accordion-panel-border-top-col: transparent;
  --ld-accordion-padding-x: var(--ld-sidenav-padding-x);
  --ld-accordion-padding-y: 0;
  --ld-accordion-toggle-indicator-bg-col: transparent;
  --ld-accordion-toggle-indicator-bg-col-active: var(--ld-thm-primary);
  --ld-accordion-toggle-indicator-bg-col-hover: var(--ld-col-neutral-100);
  --ld-accordion-toggle-indicator-bg-col-focus: var(--ld-thm-primary-focus);
  --ld-accordion-toggle-size: var(--ld-sidenav-navitem-icon-size);

  --ld-sidenav-navitem-tertiary-indent: calc(2 * var(--ld-sp-16) + 0.3125rem);

  transform: translateY(
    var(
      --ld-sidenav-navitem-move-up-closable,
      var(--ld-sidenav-navitem-move-up, 0)
    )
  );
  transition: var(--ld-sidenav-stack-to-top-transition);

  :host(.ld-sidenav-accordion--collapsed) & {
    pointer-events: none;
    transition: transform var(--ld-sidenav-transition-duration-collapse-expand)
      ease;
  }

  :host(.ld-sidenav-accordion--in-accordion) & {
    --ld-accordion-padding-x: 0;
    margin: var(--ld-sp-6) calc(-1 * var(--ld-sidenav-padding-x)) var(--ld-sp-6)
      0;

    .ld-sidenav-accordion__accordion-panel {
      padding: 0 var(--ld-sidenav-padding-x) 0 0;
    }
  }

  :host(:not(.ld-sidenav-accordion--transitions-enabled)) & {
    .ld-sidenav-accordion__accordion-panel {
      --ld-accordion-panel-transition-duration: var(
        --ld-transition-duration-instant
      );
    }
  }
}

.ld-sidenav-accordion__accordion-panel {
  padding: 0 var(--ld-sidenav-padding-x);

  &::part(content) {
    padding: var(--ld-sidenav-navitem-bg-inset) 0;
  }
}

.ld-sidenav-accordion__accordion-toggle {
  pointer-events: none;

  &::part(toggle) {
    &::before {
      display: none;
    }
  }

  &::part(label) {
    --ld-accordion-bg-col-hover: transparent;
    padding-right: var(--ld-sidenav-padding-x);

    &::before {
      display: none;
    }
  }

  @media (hover: hover) {
    &:where(:hover) {
      --ld-accordion-toggle-indicator-bg-col: var(--ld-col-neutral-100);
    }
  }

  &::part(trigger) {
    --ld-accordion-bg-col-hover: var(
      --ld-sidenav-accordion-bg-col-hover,
      var(--ld-col-neutral-050)
    );
    right: var(--ld-sidenav-padding-x);
    pointer-events: none;
    border-radius: var(--ld-sidenav-navitem-border-radius);
    outline: none;
    transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
        linear,
      transform var(--ld-sidenav-transition-duration-collapse-expand) ease;

    &::before {
      inset: 0;
      border-radius: inherit;
      background-color: var(--ld-accordion-toggle-indicator-bg-col);
      z-index: 1;
    }

    &::after {
      content: '';
      position: absolute;
      border-radius: inherit;
      inset: 0;
      background-color: var(--ld-col-wht);
      visibility: hidden;
    }

    &:active {
      --ld-accordion-toggle-indicator-bg-col: var(
        --ld-accordion-toggle-indicator-bg-col-active
      );

      &::before {
        opacity: 0.3;
      }
    }

    @media (hover: hover) {
      &:where(:hover) {
        --ld-accordion-toggle-indicator-bg-col: var(
          --ld-accordion-toggle-indicator-bg-col-hover
        );

        &::after {
          visibility: inherit;
        }
      }
    }

    &:focus:focus-visible {
      --ld-accordion-toggle-indicator-bg-col: var(
        --ld-accordion-toggle-indicator-bg-col-focus
      );

      &::before {
        opacity: 0.3;
      }

      &::after {
        visibility: inherit;
      }

      &:active {
        --ld-accordion-toggle-indicator-bg-col: var(
          --ld-accordion-toggle-indicator-bg-col-active
        );

        &::before {
          opacity: 0.3;
        }
      }
    }
  }

  :host(.ld-sidenav-accordion--rounded) & {
    &::part(trigger) {
      border-radius: var(--ld-br-full);
    }
  }

  :host(.ld-sidenav-accordion--no-icon) & {
    &::part(trigger) {
      &::before,
      &::after {
        transform: scale(0.8);
      }
    }
  }

  &::part(trigger-content) {
    transform: none;
    z-index: 2;
  }

  :host(.ld-sidenav-accordion--collapsed) & {
    &::part(trigger) {
      transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
          linear,
        visibility 0s var(--ld-sidenav-transition-duration-collapse-expand)
          linear,
        transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
      visibility: hidden;
      opacity: 0;
      transform: translateX(var(--ld-sidenav-translate-x-delta));
    }
  }
}

:host(.ld-sidenav-accordion--split) {
  .ld-sidenav-accordion__accordion-toggle {
    &::part(trigger) {
      pointer-events: auto;
    }
  }
}

::slotted(ld-sidenav-navitem) {
  --ld-sidenav-navitem-bg-right-x-delta: var(--ld-accordion-toggle-size);
  --ld-sidenav-navitem-bg-width: calc(
    100% + var(--ld-accordion-toggle-size) + var(--ld-sidenav-navitem-bg-inset) *
      2
  );

  position: relative;
  z-index: 1;
}
::slotted(ld-sidenav-navitem:not(:first-of-type)) {
  margin: var(--ld-sp-16) 0;
}
::slotted(ld-sidenav-navitem:last-of-type) {
  margin-bottom: 0;
}
