.sidebar-item-next {
  font-family: var(
    --wds-font-family-default,
    var(
      --wsr-font-family,
      Madefor,
      'Helvetica Neue',
      Helvetica,
      Arial,
      'メイリオ',
      'meiryo',
      'ヒラギノ角ゴ pro w3',
      'hiragino kaku gothic pro',
      sans-serif
    )
  );
  font-size: var(
    --wds-font-size-body-small,
    var(--wsr-text-font-size-small, 14px)
  );
  font-weight: var(
    --wds-font-weight-medium,
    var(--wsr-font-weight-medium, 530)
  );
  line-height: var(
    --wds-font-line-height-body-small,
    var(--wsr-text-line-height-small, 18px)
  );
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border: none;
  text-align: start;
  text-decoration: none;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  padding-inline: 0;
  padding-block: 0;
  padding-right: 18px;
  border-radius: var(--wds-sidebar-item-border-radius, 0);

  &--legacy {
    min-width: 136px;
  }

  &--disabled {
    pointer-events: none;
  }

  &:where(:focus) {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  &:active,
  &--selected {
    cursor: pointer;
  }

  @media (hover: hover) {
    &:hover {
      cursor: pointer;
    }
  }

  &#{&}#{&}--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-400, 24px)
    );
    padding-right: var(
      --wds-sidebar-item-padding-inline-end,
      var(--wds-space-300, 18px)
    );
  }

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

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

  &--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, 9px) 0;
  }

  &--level-1#{&}--has-prefix#{&}--minimized {
    justify-content: center;
  }

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

  &--minimized &__text-wrapper {
    display: none;
  }

  &--minimized:not(#{&}--has-prefix) {
    display: none;
  }

  &--level-2 {
    padding-left: var(
      --wds-sidebar-item-level-2-indent,
      var(--wds-space-500, 30px)
    );
    padding-right: var(
      --wds-sidebar-item-padding-inline-end,
      var(--wds-space-300, 18px)
    );
  }

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

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

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

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

  &--level-3 {
    padding-left: var(
      --wds-sidebar-item-level-3-indent,
      var(--wds-space-500, 30px)
    );
    padding-right: var(
      --wds-sidebar-item-padding-inline-end,
      var(--wds-space-300, 18px)
    );
  }

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

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

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

  &--level-3 &__divider {
    display: var(--wds-sidebar-item-level-3-divider-display, block);
    margin-right: 12px;
  }

  &--level-3#{&}--has-prefix &__divider {
    margin-right: 12px;
  }

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

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

  @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, var(--wsr-color-D80, #ffffff))
    );
  }

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

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

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

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

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

  &--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, var(--wsr-color-D80, #ffffff))
    );
  }

  &#{&}--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, var(--wsr-color-D20, #333853))
    );
  }

  @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-blue-300, var(--wsr-color-B30, #a8caff))
      );
    }
  }

  &--legacy#{&}--skin-light#{&}--selected {
    background-color: var(
      --wds-sidebar-item-level-1-fill-light-active,
      var(--wds-color-blue-300, var(--wsr-color-B30, #a8caff))
    );
    color: var(
      --wds-sidebar-item-text-light-active,
      var(--wds-color-blue-0, var(--wsr-color-B00, #084ebd))
    );
  }

  &#{&}#{&}--legacy#{&}--skin-light#{&}--selected:not(#{&}--disabled) &__text {
    color: var(
      --wds-sidebar-item-text-light-active,
      var(--wds-color-blue-0, var(--wsr-color-B00, #084ebd))
    );
  }

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

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

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

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

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

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

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

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

  &--level-3#{&}--skin-light &__divider {
    background-color: #cfd1dc;
  }

  &__list-item:first-child &--skin-light &__divider {
    background: linear-gradient(to top, #cfd1dc 66%, transparent 0%);
  }

  &__list-item:last-child &--skin-light &__divider {
    background: linear-gradient(to bottom, #cfd1dc 66%, transparent 0%);
  }

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

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

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

  &--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-blue-300, #a8caff)
    );
  }

  &--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-blue-300, #a8caff)
    );
  }

  &#{&}--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-blue-0, #084ebd)
    );
  }

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

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

  &--legacy#{&}--skin-neutral {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-default,
      var(--wds-color-black-700, var(--wsr-color-D70, #eceff3))
    );
  }

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

  &--legacy#{&}--skin-neutral &__prefix {
    color: var(--wds-color-black-200, var(--wsr-color-D20, #333853));
  }

  @media (hover: hover) {
    &--legacy#{&}--skin-neutral:hover {
      background-color: var(
        --wds-sidebar-item-level-1-fill-neutral-hover,
        var(--wds-color-blue-400, var(--wsr-color-B40, #d6e6fe))
      );
    }

    &--legacy#{&}--skin-neutral:hover#{&}--selected {
      background-color: var(
        --wds-sidebar-item-level-1-fill-neutral-active,
        var(--wds-color-blue-300, var(--wsr-color-B40, #d6e6fe))
      );
    }
  }

  &--legacy#{&}--skin-neutral#{&}--selected {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-active,
      var(--wds-color-blue-300, var(--wsr-color-B40, #d6e6fe))
    );
  }

  &#{&}--legacy#{&}--skin-neutral#{&}--selected &__text {
    color: var(
      --wds-sidebar-item-text-neutral-active,
      var(--wds-color-blue-0, var(--wsr-color-B00, #084ebd))
    );
  }

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

  &--level-1#{&}--skin-neutral {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-default,
      var(--wds-color-black-700, var(--wsr-color-D70, #eceff3))
    );
  }

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

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

  &--level-1#{&}--skin-neutral &__prefix,
  &--level-2#{&}--skin-neutral &__prefix,
  &--level-3#{&}--skin-neutral &__prefix {
    color: #000624;
  }

  &--level-3#{&}--skin-neutral &__divider {
    background-color: #cfd1dc;
  }

  &__list-item:first-child &--skin-neutral &__divider {
    background: linear-gradient(to top, #cfd1dc 66%, transparent 0%);
  }

  &__list-item:last-child &--skin-neutral &__divider {
    background: linear-gradient(to bottom, #cfd1dc 66%, transparent 0%);
  }

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

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

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

  &--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-blue-300, #d6e6fe)
    );
  }

  &--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-blue-300, #d6e6fe)
    );
  }

  &#{&}--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-blue-0, var(--wsr-color-B00, #084ebd))
    );
  }

  &#{&}--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-blue-0, var(--wsr-color-B00, #084ebd))
    );
  }

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

  &__divider {
    width: 1px;
    height: 100%;
    border-style: none;
    margin-block-start: 0;
    margin-block-end: 0;
  }

  &__text-wrapper {
    flex: 1;
  }

  &__text#{&}__text {
    display: block;
    flex: 1 1 auto;
    /* stylelint-disable-next-line plugin/use-baseline */
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: var(--wds-sidebar-item-text-line-clamp, 2);
    -webkit-box-orient: vertical;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(
      --wds-sidebar-item-text-line-height,
      var(--wds-space-250, 15px)
    );
    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-space-250, 15px)
    );
  }

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

  &__prefix {
    margin-right: 6px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  &__suffix {
    display: flex;
    flex: 1 0 auto;
    justify-content: flex-end;
    align-items: center;
    min-width: 18px;
    max-width: 100%;
  }

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

  &__suffix-container {
    display: flex;
    justify-content: flex-end;
    min-width: 18px;
    max-width: 30%;
    margin-left: var(--wds-sidebar-item-suffix-gap, var(--wds-space-100, 6px));
  }

  &__list-item {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    list-style-type: none;
    display: flex;
  }

  &__tooltip-wrapper {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    width: 100%;
    display: flex;
    align-items: flex-end;
  }

  &__tooltip {
    width: 100%;
  }

  &__tooltip.popover.popover--skin-dark
    .popover-content__content {
    background-color: var(
      --wds-sidebar-minimize-tooltip-fill-dark-default,
      #1f222b
    );
  }

  @layer wds.composition {
    &__tooltip.tooltip.popover.popover--skin-dark
      .popover-content__content
      .tooltip__text {
      color: var(
        --wds-sidebar-item-text-dark-default,
        var(--wds-color-black-550, #cfd1dc)
      );
      font-size: 12px;
    }
  }

  &__tooltip.popover.popover--skin-dark
    .popover-content__arrow {
    background: var(--wds-sidebar-minimize-tooltip-fill-dark-default, #1f222b);
    border-color: var(
      --wds-sidebar-minimize-tooltip-fill-dark-default,
      #1f222b
    );
  }
}