.sidebar-next {
  & &__section {
    &--skin-light {
      background-color: var(
        --wds-sidebar-fill-light,
        var(
          --wds-color-fill-surface-stage,
          var(--wds-sidebar-item-level-1-fill-light-default, transparent)
        )
      );
      border-right: 1px solid
        var(
          --wds-sidebar-border-outer-fill,
          var(--wds-sidebar-divider-fill-light-default, #eeeeee)
        );
      box-shadow: inset -1px 0 0 0 var(--wds-sidebar-border-inner-fill, #ffffff);
    }

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

  & &__header,
  & &__footer {
    padding-inline-start: var(--wds-sidebar-padding-start, var(--wds-space-300));
    padding-inline-end: var(--wds-sidebar-padding-end, var(--wds-space-350));
  }

  & &__header {
    padding-top: var(--wds-sidebar-padding-top, var(--wds-space-600));
  }

  & &__footer {
    padding-bottom: var(--wds-sidebar-padding-bottom, var(--wds-space-600));

    &::before {
      height: var(--wds-sidebar-footer-fade-height, var(--wds-space-1500));
    }
  }

  & &__section--skin-light &__footer {
    --wds-internal-sidebar-footer-fade-fill: var(
      --wds-sidebar-fill-light,
      var(
        --wds-color-fill-surface-stage,
        var(--wds-sidebar-item-level-1-fill-light-default, transparent)
      )
    );
  }

  & &__section--skin-neutral &__footer {
    --wds-internal-sidebar-footer-fade-fill: var(
      --wds-sidebar-fill-neutral,
      var(
        --wds-color-fill-surface-stage,
        var(--wds-sidebar-item-level-1-fill-neutral-default, transparent)
      )
    );
  }

  & &__section--minimized &__header,
  & &__section--minimized &__footer,
  & &__section--minimized &__scroll-area {
    padding-inline-start: var(--wds-sidebar-minimized-padding-inline, var(--wds-space-400));
    padding-inline-end: var(--wds-sidebar-minimized-padding-inline, var(--wds-space-400));
  }

  & &__scroll-area {
    padding-top: var(--wds-sidebar-header-margin-bottom, var(--wds-space-400));
    padding-bottom: var(--wds-sidebar-footer-fade-height, var(--wds-space-1500));
    padding-inline-start: var(--wds-sidebar-padding-start, var(--wds-space-300));
    padding-inline-end: var(--wds-sidebar-padding-end, var(--wds-space-350));

    &--skin-light::-webkit-scrollbar-thumb {
      background-color: var(
        --wds-sidebar-scrollbar-fill-light-default,
        var(--wds-color-black-550)
      );
    }

    &--skin-neutral::-webkit-scrollbar-thumb {
      background-color: var(
        --wds-sidebar-scrollbar-fill-neutral-default,
        var(--wds-color-black-550)
      );
    }

    @media (hover: hover) {
      &--skin-dark::-webkit-scrollbar-thumb:hover {
        background: var(--wds-sidebar-scrollbar-fill-dark-hover, #9c9ea6);
      }

      &--skin-light::-webkit-scrollbar-thumb:hover {
        background: var(
          --wds-sidebar-scrollbar-fill-light-hover,
          var(--wds-color-black-500)
        );
      }

      &--skin-neutral::-webkit-scrollbar-thumb:hover {
        background-color: var(
          --wds-sidebar-scrollbar-fill-neutral-hover,
          var(--wds-color-black-500)
        );
      }
    }
  }

  /* stylelint-disable-next-line plugin/use-baseline */
  @container style(--wds-internal-theme: odeditor) {
    & &__header {
      padding-bottom: var(--wds-sidebar-header-margin-bottom, var(--wds-space-400));
    }

    /* re-assert the base sheet's own runtime override: the odeditor bundle's
       unconditional &__scroll-area padding-top above would otherwise outrank
       it, since both load after the base bundle's container query */
    & &__scroll-area {
      padding-top: 0;
    }
  }
}