$popover-content: '.popover-content__content';
$popover-arrow: '.popover-content__arrow';
$popover-content-dark: '.popover-content__content.popover-content__content--skin-dark';
$popover-arrow-dark: '.popover-content__arrow.popover-content__arrow--skin-dark';

.sidebar-sub-menu-next {
  &#{&}--skin-dark &__sub-menu#{&}__sub-menu--selected,
  &--skin-dark &__sub-menu-items {
    background: var(--wds-sidebar-item-level-2-fill-dark-default, #1f222b);
  }

  &#{&}--skin-dark &__sub-menu#{&}__sub-menu--selected#{&}__sub-menu--minimized {
    background: var(--wds-sidebar-item-level-1-fill-dark-active, #42454c);
  }

  &#{&}--skin-light &__sub-menu#{&}__sub-menu--selected#{&}__sub-menu--minimized {
    background: var(
      --wds-sidebar-item-level-1-fill-light-active,
      var(--wds-color-black-550)
    );
  }

  &#{&}--skin-neutral &__sub-menu#{&}__sub-menu--selected,
  &--skin-neutral &__sub-menu-items {
    background: var(--wds-sidebar-item-level-2-fill-neutral-default, transparent);
  }

  &#{&}--skin-neutral &__sub-menu#{&}__sub-menu--selected#{&}__sub-menu--minimized {
    background: var(
      --wds-sidebar-item-level-1-fill-neutral-hover,
      var(--wds-color-black-700)
    );
  }

  &__sub-menu-items--expanded#{&}__sub-menu-items--level-2 {
    padding-bottom: var(--wds-sidebar-submenu-level-2-padding-bottom, 0px);
  }

  &__navigation-popover-root #{$popover-content} {
    padding: 12px var(--wds-sidebar-item-context-menu-padding-inline, var(--wds-space-200));
  }

  &#{&}--skin-neutral &__navigation-popover-root #{$popover-arrow} {
    border-color: var(--wds-sidebar-navigation-arrow-fill-neutral, var(--wds-color-white));
  }

  &__navigation-popover-root #{$popover-content-dark} {
    background: var(--wds-sidebar-item-level-2-fill-dark-default, #1f222b);
  }

  &__navigation-popover-root #{$popover-arrow-dark} {
    border-color: var(--wds-sidebar-item-level-2-fill-dark-default, #1f222b);
  }
}