$level-1-fill-light-default: var(
  --wds-sidebar-item-level-1-fill-light-default,
  var(--wds-color-white)
) !default;
$level-1-fill-neutral-active: var(
  --wds-sidebar-item-level-1-fill-neutral-active,
  var(--wds-color-blue-300)
) !default;
$level-1-fill-neutral-default: var(
  --wds-sidebar-item-level-1-fill-neutral-default,
  var(--wds-color-black-700)
) !default;
$level-1-fill-neutral-hover: var(
  --wds-sidebar-item-level-1-fill-neutral-hover,
  var(--wds-color-blue-400)
) !default;
$text-dark-default: var(
  --wds-sidebar-item-text-dark-default,
  var(--wds-color-text-standard-primary)
) !default;
$text-light-active: var(
  --wds-sidebar-item-text-light-active,
  var(--wds-color-blue-0)
) !default;
$text-neutral-active: var(
  --wds-sidebar-item-text-neutral-active,
  var(--wds-color-blue-0)
) !default;

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

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

  &--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;
  }

  &--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-top: var(--wds-space-150);
    margin-bottom: var(--wds-space-150);
  }

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

  &--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-space-200);
    padding-right: var(--wds-space-200);
  }

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

  &--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-space-200);
    padding-right: 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
    );
    color: $text-dark-default;
  }

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

  &#{&}#{&}--legacy#{&}--skin-dark:not(#{&}--disabled) &__text {
    color: $text-dark-default;
  }

  @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: $text-dark-default;
  }

  &--level-1#{&}--skin-dark &__prefix,
  &--level-2#{&}--skin-dark &__prefix,
  &--level-3#{&}--skin-dark &__prefix {
    color: $text-dark-default;
  }

  &--level-1#{&}--skin-dark &__suffix,
  &--level-2#{&}--skin-dark &__suffix,
  &--level-3#{&}--skin-dark &__suffix {
    color: $text-dark-default;
  }

  &--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: $text-light-active;
  }

  &#{&}#{&}--legacy#{&}--skin-light#{&}--selected:not(#{&}--disabled) &__text {
    color: $text-light-active;
  }

  &#{&}--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: $level-1-fill-light-default;
  }

  &--level-2#{&}--skin-light {
    background-color: $level-1-fill-light-default;
  }

  &--level-3#{&}--skin-light {
    background-color: $level-1-fill-light-default;
  }

  &#{&}--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: $text-light-active;
  }

  &#{&}--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: $level-1-fill-neutral-default;
  }

  &--legacy#{&}--level-2#{&}--skin-neutral {
    background-color: $level-1-fill-neutral-default;
  }

  @media (hover: hover) {
    &--legacy#{&}--skin-neutral:hover {
      background-color: $level-1-fill-neutral-hover;
    }

    &--legacy#{&}--skin-neutral:hover#{&}--selected {
      background-color: $level-1-fill-neutral-active;
    }
  }

  &--legacy#{&}--skin-neutral#{&}--selected {
    background-color: $level-1-fill-neutral-active;
  }

  &#{&}--legacy#{&}--skin-neutral#{&}--selected &__text {
    color: $text-neutral-active;
  }

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

  &--level-1#{&}--skin-neutral {
    background-color: $level-1-fill-neutral-default;
  }

  &--level-2#{&}--skin-neutral {
    background-color: $level-1-fill-neutral-default;
  }

  &--level-3#{&}--skin-neutral {
    background-color: $level-1-fill-neutral-default;
  }

  @media (hover: hover) {
    &--level-1#{&}--skin-neutral:hover {
      background-color: $level-1-fill-neutral-hover;
    }

    &--level-2#{&}--skin-neutral:hover {
      background-color: $level-1-fill-neutral-hover;
    }

    &--level-3#{&}--skin-neutral:hover {
      background-color: $level-1-fill-neutral-hover;
    }
  }

  &--level-1#{&}--skin-neutral:active,
  &--level-2#{&}--skin-neutral:active,
  &--level-3#{&}--skin-neutral:active {
    background-color: $level-1-fill-neutral-active;
  }

  &--level-1#{&}--skin-neutral#{&}--selected,
  &--level-2#{&}--skin-neutral#{&}--selected,
  &--level-3#{&}--skin-neutral#{&}--selected {
    background-color: $level-1-fill-neutral-active;
  }

  &#{&}--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: $text-neutral-active;
  }

  &#{&}--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: $text-neutral-active;
  }

  &__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)
    );
  }

  &#{&}#{&}#{&}--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)
    );
  }

  &__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));
  }

  @layer wds.composition {
    &__tooltip.tooltip.popover.popover--skin-dark
      .popover-content__content
      .tooltip__text {
      color: $text-dark-default;
    }
  }
}