$scrollbar-track-width: 12px;

.message-box-functional-layout {
  & &__content--scrollable {
    &::-webkit-scrollbar-thumb {
      background-color: var(--wds-scrollbar-fill, var(--wds-color-black-550));
      border: calc(
          (#{$scrollbar-track-width} - 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)
      );
    }
  }
}