.sidebar-item-next {
  padding-inline: 0;
  padding-block: 0;
  padding-right: 18px;
  border-radius: var(
    --wds-sidebar-item-border-radius,
    var(--wds-border-radius-400)
  );

  &#{&}#{&}--in-context-menu:not(#{&}--disabled) &__text {
    line-height: 15px;
    margin: 6px 0 6px 0;
  }

  &--legacy#{&}--level-1 {
    padding: 0 20px;
  }

  &--legacy#{&}--level-2 {
    padding-left: 24px;
  }

  &--legacy#{&}--has-prefix {
    padding: 0 16px 0 16px;
  }

  &#{&}--legacy#{&}--in-context-menu#{&}--level-2 &__text {
    -webkit-line-clamp: 1;
  }

  &#{&}#{&}--legacy:not(#{&}--disabled) &__text,
  &#{&}--legacy#{&}--in-context-menu:not(#{&}--disabled) &__text {
    margin: 6px 0 7px 0;
  }

  &--level-1 {
    padding-left: var(--wds-sidebar-item-level-1-indent, var(--wds-space-350));
    padding-right: var(
      --wds-sidebar-item-padding-inline-end,
      var(--wds-space-200)
    );
  }

  &--level-1#{&}--has-prefix {
    padding-left: var(
      --wds-sidebar-item-level-1-indent-with-prefix,
      var(--wds-space-200)
    );
  }

  &--level-1#{&}--has-prefix &__prefix {
    margin-right: var(--wds-sidebar-item-prefix-gap, var(--wds-space-200));
    margin-top: var(
      --wds-sidebar-item-prefix-margin-block,
      var(--wds-space-150)
    );
    margin-bottom: var(
      --wds-sidebar-item-prefix-margin-block,
      var(--wds-space-150)
    );
  }

  &--level-1#{&}--has-prefix#{&}--legacy &__prefix {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  &#{&}#{&}--level-1 &__text {
    line-height: 18px;
    margin: var(--wds-sidebar-item-text-margin-block, var(--wds-space-150)) 0;
  }

  &--level-1#{&}--has-prefix#{&}--minimized &__prefix {
    margin-right: 0px;
  }

  &--level-2 {
    padding-left: var(--wds-sidebar-item-level-2-indent, var(--wds-space-1050));
    padding-right: var(
      --wds-sidebar-item-padding-inline-end,
      var(--wds-space-200)
    );
  }

  &--level-2#{&}--is-first-level-with-prefix {
    padding-left: var(
      --wds-sidebar-item-level-2-indent-first-level-with-prefix,
      var(--wds-space-1050)
    );
  }

  &--in-context-menu#{&}--level-2 {
    padding-left: var(
      --wds-sidebar-item-context-menu-padding-inline,
      var(--wds-space-200)
    );
    padding-right: var(
      --wds-sidebar-item-context-menu-padding-inline,
      var(--wds-space-200)
    );
  }

  &--level-2#{&}--has-prefix {
    padding-left: var(
      --wds-sidebar-item-level-2-indent-with-prefix,
      var(--wds-space-1050)
    );
  }

  &--level-2#{&}--has-prefix &__prefix {
    margin-right: 12px;
  }

  &--level-3 {
    padding-left: var(--wds-sidebar-item-level-3-indent, var(--wds-space-1300));
    padding-right: var(
      --wds-sidebar-item-padding-inline-end,
      var(--wds-space-200)
    );
  }

  &--level-3#{&}--is-first-level-with-prefix {
    padding-left: var(
      --wds-sidebar-item-level-3-indent-first-level-with-prefix,
      var(--wds-space-1300)
    );
  }

  &--in-context-menu#{&}--level-3 {
    padding-left: var(
      --wds-sidebar-item-context-menu-padding-inline,
      var(--wds-space-200)
    );
    padding-right: var(
      --wds-sidebar-item-context-menu-padding-inline,
      var(--wds-space-200)
    );
  }

  &--level-3#{&}--has-prefix {
    padding-left: var(
      --wds-sidebar-item-level-3-indent-with-prefix,
      var(--wds-space-1300)
    );
  }

  &--level-3 &__divider {
    display: var(--wds-sidebar-item-level-3-divider-display, none);
  }

  &--legacy#{&}--skin-dark {
    background-color: var(
      --wds-sidebar-item-level-1-fill-dark-default,
      #131720
    );
  }

  &--legacy#{&}--level-2#{&}--skin-dark {
    background-color: var(
      --wds-sidebar-item-level-2-fill-dark-default,
      #1f222b
    );
  }

  &#{&}#{&}--legacy#{&}--skin-dark:not(#{&}--disabled) &__text {
    color: var(
      --wds-sidebar-item-text-dark-default,
      var(--wds-color-black-550)
    );
  }

  @media (hover: hover) {
    &--legacy#{&}--skin-dark:hover {
      background-color: var(
        --wds-sidebar-item-level-1-fill-dark-active,
        #42454c
      );
    }
  }

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

  &#{&}--legacy#{&}--skin-dark#{&}--selected &__text {
    color: var(--wds-sidebar-item-text-dark-active, var(--wds-color-white));
  }

  &#{&}--legacy#{&}--skin-dark#{&}--disabled &__text {
    color: var(--wds-sidebar-item-text-dark-disabled, #898b8f);
  }

  &--legacy#{&}--skin-dark#{&}--level-2#{&}--in-context-menu {
    background-color: var(--wds-sidebar-item-level-1-fill-dark-hover, #2b2e36);
  }

  &--legacy#{&}--level-2#{&}--skin-dark:not(:hover):not(#{&}--selected) {
    background: transparent;
  }

  @media (hover: hover) {
    &--legacy#{&}--skin-dark#{&}--level-2#{&}--in-context-menu:hover {
      background-color: var(
        --wds-sidebar-item-level-1-fill-dark-active,
        #42454c
      );
    }
  }

  &--level-1#{&}--skin-dark {
    background-color: var(
      --wds-sidebar-item-level-1-fill-dark-default,
      #131720
    );
  }

  &--level-2#{&}--skin-dark {
    background-color: var(
      --wds-sidebar-item-level-2-fill-dark-default,
      #1f222b
    );
  }

  &--in-context-menu#{&}--level-2#{&}--skin-dark {
    background-color: var(
      --wds-sidebar-item-level-2-fill-dark-default,
      #1f222b
    );
  }

  &--level-3#{&}--skin-dark {
    background-color: var(
      --wds-sidebar-item-level-2-fill-dark-default,
      #1f222b
    );
  }

  &--in-context-menu#{&}--level-3#{&}--skin-dark {
    background-color: var(
      --wds-sidebar-item-level-2-fill-dark-default,
      #1f222b
    );
  }

  &#{&}#{&}--level-1#{&}--skin-dark:not(#{&}--disabled) &__text,
  &#{&}#{&}--level-2#{&}--skin-dark:not(#{&}--disabled) &__text,
  &#{&}#{&}--level-3#{&}--skin-dark:not(#{&}--disabled) &__text {
    color: var(
      --wds-sidebar-item-text-dark-default,
      var(--wds-color-black-550)
    );
  }

  &--level-1#{&}--skin-dark &__prefix,
  &--level-2#{&}--skin-dark &__prefix,
  &--level-3#{&}--skin-dark &__prefix {
    color: var(
      --wds-sidebar-item-text-dark-default,
      var(--wds-color-black-550)
    );
  }

  &--level-3#{&}--skin-dark &__divider {
    background-color: var(--wds-sidebar-divider-fill-dark-default, #42454c);
  }

  &__list-item:first-child &--skin-dark &__divider {
    background: linear-gradient(
      to top,
      var(--wds-sidebar-divider-fill-dark-default, #42454c) 66%,
      transparent 0%
    );
  }

  &__list-item:last-child &--skin-dark &__divider {
    background: linear-gradient(
      to bottom,
      var(--wds-sidebar-divider-fill-dark-default, #42454c) 66%,
      transparent 0%
    );
  }

  @media (hover: hover) {
    &--level-1#{&}--skin-dark:hover {
      background-color: var(
        --wds-sidebar-item-level-1-fill-dark-hover,
        #2b2e36
      );
    }

    &--level-2#{&}--skin-dark:hover {
      background-color: var(
        --wds-sidebar-item-level-1-fill-dark-hover,
        #2b2e36
      );
    }

    &--level-3#{&}--skin-dark:hover {
      background-color: var(
        --wds-sidebar-item-level-1-fill-dark-hover,
        #2b2e36
      );
    }
  }

  &--level-1#{&}--skin-dark:active,
  &--level-2#{&}--skin-dark:active,
  &--level-3#{&}--skin-dark:active {
    background-color: var(--wds-sidebar-item-level-1-fill-dark-active, #42454c);
  }

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

  &#{&}--level-1#{&}--selected &__text,
  &#{&}--level-2#{&}--selected &__text,
  &#{&}--level-3#{&}--selected &__text {
    color: var(--wds-sidebar-item-text-dark-active, var(--wds-color-white));
  }

  &#{&}--level-1#{&}--skin-dark#{&}--disabled &__text,
  &#{&}--level-2#{&}--skin-dark#{&}--disabled &__text,
  &#{&}--level-3#{&}--skin-dark#{&}--disabled &__text {
    color: var(--wds-sidebar-item-text-dark-disabled, #898b8f);
  }

  &--level-1#{&}--skin-dark#{&}--disabled &__prefix,
  &--level-2#{&}--skin-dark#{&}--disabled &__prefix,
  &--level-3#{&}--skin-dark#{&}--disabled &__prefix {
    color: var(--wds-sidebar-item-text-dark-disabled, #898b8f);
  }

  &--legacy#{&}--skin-light {
    background-color: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
    color: var(--wds-color-black-200, var(--wsr-color-D20, #333853));
  }

  &#{&}#{&}--legacy#{&}--skin-light:not(#{&}--disabled) &__text {
    color: var(
      --wds-sidebar-item-text-light-default,
      var(--wds-color-text-standard-secondary)
    );
  }

  @media (hover: hover) {
    &--legacy#{&}--skin-light:hover {
      background-color: var(
        --wds-color-blue-400,
        var(--wsr-color-B40, #d6e6fe)
      );
    }

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

  &--legacy#{&}--skin-light#{&}--selected {
    background-color: var(
      --wds-sidebar-item-level-1-fill-light-active,
      var(--wds-color-black-550)
    );
    color: var(
      --wds-sidebar-item-text-light-active,
      var(--wds-color-text-standard-primary)
    );
  }

  &#{&}#{&}--legacy#{&}--skin-light#{&}--selected:not(#{&}--disabled) &__text {
    color: var(
      --wds-sidebar-item-text-light-active,
      var(--wds-color-text-standard-primary)
    );
  }

  &#{&}--legacy#{&}--skin-light#{&}--disabled &__text {
    color: var(
      --wds-sidebar-item-text-light-disabled,
      var(--wds-color-text-disabled)
    );
  }

  &--legacy#{&}--level-2#{&}--skin-light {
    background: transparent;
  }

  &--level-1#{&}--skin-light {
    background-color: var(
      --wds-sidebar-item-level-1-fill-light-default,
      transparent
    );
  }

  &--level-2#{&}--skin-light {
    background-color: var(
      --wds-sidebar-item-level-1-fill-light-default,
      transparent
    );
  }

  &--level-3#{&}--skin-light {
    background-color: var(
      --wds-sidebar-item-level-1-fill-light-default,
      transparent
    );
  }

  &#{&}--level-1#{&}--skin-light:not(#{&}--disabled) &__text,
  &#{&}--level-2#{&}--skin-light:not(#{&}--disabled) &__text,
  &#{&}--level-3#{&}--skin-light:not(#{&}--disabled) &__text {
    color: var(
      --wds-sidebar-item-text-light-default,
      var(--wds-color-text-standard-secondary)
    );
  }

  @media (hover: hover) {
    &--level-1#{&}--skin-light:hover {
      background-color: var(
        --wds-sidebar-item-level-1-fill-light-hover,
        var(--wds-color-black-600)
      );
    }

    &--level-2#{&}--skin-light:hover {
      background-color: var(
        --wds-sidebar-item-level-1-fill-light-hover,
        var(--wds-color-black-600)
      );
    }

    &--level-3#{&}--skin-light:hover {
      background-color: var(
        --wds-sidebar-item-level-1-fill-light-hover,
        var(--wds-color-black-600)
      );
    }
  }

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

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

  &#{&}--level-1#{&}--skin-light#{&}--selected:not(#{&}--disabled) &__text,
  &#{&}--level-2#{&}--skin-light#{&}--selected:not(#{&}--disabled) &__text,
  &#{&}--level-3#{&}--skin-light#{&}--selected:not(#{&}--disabled) &__text {
    color: var(
      --wds-sidebar-item-text-light-active,
      var(--wds-color-text-standard-primary)
    );
  }

  &#{&}--level-1#{&}--skin-light#{&}--disabled &__text,
  &#{&}--level-2#{&}--skin-light#{&}--disabled &__text,
  &#{&}--level-3#{&}--skin-light#{&}--disabled &__text {
    color: var(
      --wds-sidebar-item-text-light-disabled,
      var(--wds-color-text-disabled)
    );
  }

  &--legacy#{&}--skin-neutral {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-default,
      transparent
    );
  }

  &--legacy#{&}--level-2#{&}--skin-neutral {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-default,
      transparent
    );
  }

  @media (hover: hover) {
    &--legacy#{&}--skin-neutral:hover {
      background-color: var(
        --wds-sidebar-item-level-1-fill-neutral-hover,
        var(--wds-color-black-700)
      );
    }

    &--legacy#{&}--skin-neutral:hover#{&}--selected {
      background-color: var(
        --wds-sidebar-item-level-1-fill-neutral-active,
        var(--wds-color-black-600)
      );
    }
  }

  &--legacy#{&}--skin-neutral#{&}--selected {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-active,
      var(--wds-color-black-600)
    );
  }

  &#{&}--legacy#{&}--skin-neutral#{&}--selected &__text {
    color: var(
      --wds-sidebar-item-text-neutral-active,
      var(--wds-color-text-standard-primary)
    );
  }

  &#{&}--legacy#{&}--skin-neutral#{&}--disabled &__text {
    color: var(
      --wds-sidebar-item-text-neutral-disabled,
      var(--wds-color-text-disabled)
    );
  }

  &--level-1#{&}--skin-neutral {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-default,
      transparent
    );
  }

  &--level-2#{&}--skin-neutral {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-default,
      transparent
    );
  }

  &--level-3#{&}--skin-neutral {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-default,
      transparent
    );
  }

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

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

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

  &--level-1#{&}--skin-neutral:active,
  &--level-2#{&}--skin-neutral:active,
  &--level-3#{&}--skin-neutral:active {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-active,
      var(--wds-color-black-600)
    );
  }

  &--level-1#{&}--skin-neutral#{&}--selected,
  &--level-2#{&}--skin-neutral#{&}--selected,
  &--level-3#{&}--skin-neutral#{&}--selected {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-active,
      var(--wds-color-black-600)
    );
  }

  &#{&}--level-1#{&}--skin-neutral:active:not(#{&}--disabled) &__text,
  &#{&}--level-2#{&}--skin-neutral:active:not(#{&}--disabled) &__text,
  &#{&}--level-3#{&}--skin-neutral:active:not(#{&}--disabled) &__text {
    color: var(
      --wds-sidebar-item-text-neutral-active,
      var(--wds-color-text-standard-primary)
    );
  }

  &#{&}--level-1#{&}--skin-neutral#{&}--selected:not(#{&}--disabled) &__text,
  &#{&}--level-2#{&}--skin-neutral#{&}--selected:not(#{&}--disabled) &__text,
  &#{&}--level-3#{&}--skin-neutral#{&}--selected:not(#{&}--disabled) &__text {
    color: var(
      --wds-sidebar-item-text-neutral-active,
      var(--wds-color-text-standard-primary)
    );
  }

  &__text#{&}__text {
    -webkit-line-clamp: var(--wds-sidebar-item-text-line-clamp, 1);
    word-break: break-all;
    line-height: var(
      --wds-sidebar-item-text-line-height,
      var(--wds-font-line-height-body-small)
    );
    margin: 6px 0 6px 0;
  }

  &#{&}#{&}#{&}--skin-dark:not(#{&}--level-1) &__text,
  &#{&}#{&}#{&}--skin-neutral:not(#{&}--level-1) &__text,
  &#{&}#{&}#{&}--skin-light:not(#{&}--level-1) &__text {
    line-height: var(
      --wds-sidebar-item-text-line-height,
      var(--wds-font-line-height-body-small)
    );
  }

  &#{&}#{&}--level-2 &__text,
  &#{&}#{&}--level-3 &__text {
    font-size: var(
      --wds-sidebar-item-text-font-size,
      var(--wds-font-size-body-small)
    );
  }

  &__prefix {
    margin-right: 6px;
  }

  &__suffix + &__suffix {
    margin-left: var(--wds-sidebar-item-suffix-gap, var(--wds-space-250));
  }

  &__suffix-container {
    margin-left: var(--wds-sidebar-item-suffix-gap, var(--wds-space-250));
  }

  &__tooltip.popover.popover--skin-dark
    .popover-content__content {
    background-color: var(
      --wds-tooltip-background-fill,
      var(--wds-color-fill-surface-overlay-dark)
    );
  }

  @layer wds.composition {
    &__tooltip.tooltip.popover.popover--skin-dark
      .popover-content__content
      .tooltip__text {
      color: var(
        --wds-tooltip-text-fill,
        var(--wds-color-text-standard-primary-light)
      );
      font-size: var(
        --wds-tooltip-label-font-size-medium,
        var(--wds-font-size-body-tiny)
      );
    }
  }

  &__tooltip.popover.popover--skin-dark
    .popover-content__arrow {
    background: transparent;
    border-color: transparent
      var(--wds-tooltip-border-fill, var(--wds-color-black-100-transparent-0))
      var(--wds-tooltip-border-fill, var(--wds-color-black-100-transparent-0))
      transparent;
  }
}