$button-fill: var(
  --wds-horizontal-scroll-button-fill,
  var(--wds-color-fill-dark-secondary)
) !default;
$button-fill-active: var(
  --wds-horizontal-scroll-button-fill-active,
  var(--wds-color-fill-dark-secondary-active)
) !default;
$button-text: var(
  --wds-horizontal-scroll-button-text,
  var(--wds-color-text-standard-primary)
) !default;

.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 {
    background: #{$button-fill};
    color: #{$button-text};
  }

  @media (hover: hover) {
    &--button-variant-secondary &__scroll-button#{&}__scroll-button#{&}__scroll-button:hover {
      background: #{$button-fill};
      color: #{$button-text};
    }
  }

  &--button-variant-secondary &__scroll-button#{&}__scroll-button#{&}__scroll-button:active {
    background: #{$button-fill-active};
    color: #{$button-text};
  }
}