.composer-sidebar {
  &__section-container {
    border-right-width: var(--wds-composer-sidebar-border-width, 0px);
    background: var(
      --wds-composer-sidebar-fill,
      var(--wds-color-fill-surface-sunken)
    );

    &::-webkit-scrollbar-thumb {
      background-color: var(--wds-scrollbar-fill, var(--wds-color-black-500));
      border: calc((12px - var(--wds-scrollbar-width, 4px)) / 2) solid
        transparent;
    }

    @media (hover: hover) {
      &::-webkit-scrollbar-thumb:hover {
        background-color: var(
          --wds-scrollbar-fill-hover,
          var(--wds-color-black-400)
        );
      }
    }

    &::-webkit-scrollbar-thumb:active {
      background-color: var(
        --wds-scrollbar-fill-active,
        var(--wds-color-black-400)
      );
    }
  }

  &__section-container--size-small#{&}__section-container--label-placement-tooltip,
  &__section-container--size-medium#{&}__section-container--label-placement-tooltip {
    padding-top: var(
      --wds-composer-sidebar-tooltip-container-padding-vertical,
      var(--wds-space-0)
    );
    padding-bottom: var(
      --wds-composer-sidebar-tooltip-container-padding-vertical,
      var(--wds-space-0)
    );
  }

  &__item--label-placement-tooltip {
    padding: var(
        --wds-composer-sidebar-item-tooltip-padding-vertical-medium,
        var(--wds-space-0)
      )
      var(
        --wds-composer-sidebar-item-tooltip-padding-horizontal-medium,
        var(--wds-space-300)
      );
  }

  &__item--label-placement-tooltip#{&}__item--size-large {
    padding: var(
        --wds-composer-sidebar-item-tooltip-padding-vertical-large,
        var(--wds-space-0)
      )
      var(
        --wds-composer-sidebar-item-tooltip-padding-horizontal-large,
        var(--wds-space-300)
      );
  }

  &__item--label-placement-tooltip#{&}__item--size-small {
    padding: var(
        --wds-composer-sidebar-item-tooltip-padding-vertical-small,
        var(--wds-space-0)
      )
      var(
        --wds-composer-sidebar-item-tooltip-padding-horizontal-small,
        var(--wds-space-300)
      );
  }

  &__section-container--label-placement-tooltip &__items-container {
    row-gap: var(
      --wds-composer-sidebar-tooltip-item-gap,
      var(--wds-space-200)
    );
  }

  &__item &__sidebar-item-button.toggle-button--shape-round
    .toggle-button__icon {
    border-radius: var(
      --wds-composer-sidebar-item-border-radius,
      var(--wds-border-radius-400)
    );
  }
}