.horizontal-scroll {
  --wds-internal-horizontal-scroll-button-area: calc(
    var(--wds-button-size-tiny, var(--wds-space-600)) + 2 *
      var(--wds-space-100, 6px)
  );

  &--button-size-small {
    --wds-internal-horizontal-scroll-button-area: calc(
      var(--wds-button-size-small, var(--wds-space-750)) + 2 *
        var(--wds-space-100, 6px)
    );
  }

  &--button-size-medium {
    --wds-internal-horizontal-scroll-button-area: calc(
      var(--wds-button-size-medium, var(--wds-space-950)) + 2 *
        var(--wds-space-100, 6px)
    );
  }

  &--button-size-large {
    --wds-internal-horizontal-scroll-button-area: calc(
      var(--wds-button-size-large, var(--wds-space-1150)) + 2 *
        var(--wds-space-100, 6px)
    );
  }

  &--button-variant-secondary &__scroll-button#{&}__scroll-button#{&}__scroll-button:active {
    background: var(--wds-horizontal-scroll-button-fill-active, #f8f6f6);
  }
}