.side-panel-content {
  padding: var(--wds-side-panel-content-padding-vertical, var(--wds-space-300, 18px))
    var(--wds-side-panel-content-padding-horizontal, var(--wds-space-400, 24px));

  &::-webkit-scrollbar {
    height: 0;
    width: 12px;
  }

  &::-webkit-scrollbar-button {
    display: none;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--wds-scrollbar-fill, var(--wds-color-blue-300, #a8caff));
    background-clip: content-box;
    border-radius: var(--wds-border-radius-full, 6px);
    border: 3px solid transparent;
    height: 72px;
  }

  @media (hover: hover) {
    &::-webkit-scrollbar-thumb:hover {
      background-color: var(--wds-scrollbar-fill-hover, var(--wds-color-blue-200, #5999ff));
    }
  }

  &::-webkit-scrollbar-thumb:active {
    background-color: var(--wds-scrollbar-fill-active, var(--wds-color-blue-100, #116dff));
  }

  &#{&}--no-padding {
    padding: 0;
  }

  &#{&}--stretch-vertically {
    height: 100%;
    flex: 1;
  }
}