$divider: var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));

.composer-sidebar {
  max-width: 240px;

  &__section-container {
    border-right: var(--wds-composer-sidebar-border-width, 1px) solid #{$divider};
    background: var(
      --wds-composer-sidebar-fill,
      var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF))
    );
    padding: 12px 0;
    overflow: auto;
    display: flex;
    flex-direction: column;

    &::-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, var(--wsr-color-B30, #A8CAFF))
      );
      background-clip: content-box;
      border-radius: var(--wds-border-radius-full, calc(3px * 2));
      border: calc((12px - var(--wds-scrollbar-width, 6px)) / 2) solid transparent;
      height: 72px;
    }

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

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

  &__section-container--label-placement-bottom {
    width: 90px;
  }

  &__section-container--with-sections {
    padding: 6px 0;
  }

  &__section-container--size-small,
  &__section-container--size-medium#{&}__section-container--label-placement-tooltip {
    padding: 6px 0;
  }

  &__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-100, 6px)
    );
    padding-bottom: var(
      --wds-composer-sidebar-tooltip-container-padding-vertical,
      var(--wds-space-100, 6px)
    );
  }

  &__section {
    display: flex;
    flex-direction: column;
  }

  &__items-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    list-style-type: none;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }

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

  &__title {
    display: block;
    padding: 12px 12px 12px 15px;
    box-sizing: border-box;
  }

  &__item--label-placement-end {
    padding: 9px 15px;
  }

  &__item--label-placement-end#{&}__item--size-small {
    padding: 6px 15px;
  }

  &__item--label-placement-bottom {
    display: flex;
    justify-content: center;
    padding: 12px 6px;
  }

  &__item--label-placement-bottom#{&}__item--size-small {
    padding: 9px 6px;
  }

  &__item--label-placement-tooltip {
    display: flex;
    justify-content: center;
    padding: var(
        --wds-composer-sidebar-item-tooltip-padding-vertical-medium,
        var(--wds-space-200, 12px)
      )
      var(
        --wds-composer-sidebar-item-tooltip-padding-horizontal-medium,
        var(--wds-space-200, 12px)
      );
  }

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

  &__item--label-placement-tooltip#{&}__item--size-small {
    padding: var(
        --wds-composer-sidebar-item-tooltip-padding-vertical-small,
        var(--wds-space-100, 6px)
      )
      var(
        --wds-composer-sidebar-item-tooltip-padding-horizontal-small,
        var(--wds-space-200, 12px)
      );
  }

  &__sidebar-item-button .toggle-button__label-container {
    text-align: left;
    max-width: 100%;
  }

  &__sidebar-item-button .toggle-button__label {
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D10, #000624)
    );
  }

  /* ToggleButton's own round-shape radius rule carries three classes; the
     doubled item + slot classes keep this override above it on specificity
     rather than on bundle order. */
  &__item &__sidebar-item-button.toggle-button--shape-round
    .toggle-button__icon {
    border-radius: var(
      --wds-composer-sidebar-item-border-radius,
      var(--wds-border-radius-full, 100px)
    );
  }

  /* ToggleButton's own `--label-placement-bottom:not(--shape-pill) __label` margin
     rule carries three classes and sorts after this sheet in the bundle; the
     doubled slot class keeps this override above it, as the Stylable
     `.sidebarItemButton:labelPlacement(bottom):size(small)::label` was. */
  &__sidebar-item-button#{&}__sidebar-item-button--label-placement-bottom#{&}__sidebar-item-button--size-small
    .toggle-button__label {
    margin-top: var(--wds-space-50, 3px);
  }
}