.horizontal-scroll {
  position: relative;
  width: 100%;
  --wds-internal-horizontal-scroll-button-area: calc(
    var(--wds-button-size-tiny, var(--wds-space-400, 24px)) + 2 *
      var(--wds-space-100, 6px)
  );
  --horizontal-scroll-fade-end: calc(
    var(--wds-internal-horizontal-scroll-button-area) +
      var(--wds-horizontal-scroll-edge-width, var(--wds-space-600, 48px))
  );

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

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

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

  &__scroll-container {
    height: 100%;
    width: 100%;
    overflow-x: auto;
    /* stylelint-disable-next-line plugin/use-baseline */
    scrollbar-width: none;
    overflow-y: hidden;
    scroll-behavior: smooth;
    will-change: scroll-position;
    touch-action: pan-x;
  }

  @media (prefers-reduced-motion) {
    &__scroll-container {
      scroll-behavior: initial;
    }
  }

  &__scroll-container:focus {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  @supports (mask-image: linear-gradient(black, transparent)) {
    &--can-scroll-left &__scroll-container {
      mask-image: linear-gradient(
        to right,
        transparent var(--wds-internal-horizontal-scroll-button-area),
        black var(--horizontal-scroll-fade-end)
      );
    }

    &--can-scroll-right &__scroll-container {
      mask-image: linear-gradient(
        to left,
        transparent var(--wds-internal-horizontal-scroll-button-area),
        black var(--horizontal-scroll-fade-end)
      );
    }

    &--can-scroll-left#{&}--can-scroll-right &__scroll-container {
      mask-image: linear-gradient(
        to right,
        transparent var(--wds-internal-horizontal-scroll-button-area),
        black var(--horizontal-scroll-fade-end),
        black calc(100% - var(--horizontal-scroll-fade-end)),
        transparent
          calc(100% - var(--wds-internal-horizontal-scroll-button-area))
      );
    }
  }

  &__start-scroll,
  &__end-scroll {
    position: absolute;
    height: 100%;
    display: flex;
    top: 0;
    z-index: 1;
  }

  &__start-scroll {
    left: 0;
    padding-right: var(
      --wds-horizontal-scroll-edge-width,
      var(--wds-space-600, 48px)
    );
  }

  &__end-scroll {
    right: 0;
    padding-left: var(
      --wds-horizontal-scroll-edge-width,
      var(--wds-space-600, 48px)
    );
  }

  &__start-scroll-button,
  &__end-scroll-button {
    height: 100%;
    display: flex;
    align-items: center;
    padding-inline: var(--wds-space-100, 6px);
  }

  &__blur {
    z-index: -1;
    --progressive-blur-width: var(
      --wds-horizontal-scroll-edge-width,
      var(--wds-space-600, 48px)
    );
    width: var(--wds-horizontal-scroll-edge-width, var(--wds-space-600, 48px));
  }

  &__start-scroll &__blur {
    inset: 0 0 0 auto;
  }

  &__end-scroll &__blur {
    inset: 0 auto 0 0;
  }

  &--button-variant-secondary &__scroll-button#{&}__scroll-button#{&}__scroll-button {
    border: none;
    border-radius: var(--wds-border-radius-full, 1000px);
    background: var(
      --wds-horizontal-scroll-button-fill,
      var(--wsr-color-D80, #ffffff)
    );
    color: var(
      --wds-horizontal-scroll-button-text,
      var(--wsr-color-D10, #000624)
    );
  }

  @media (hover: hover) {
    &--button-variant-secondary &__scroll-button#{&}__scroll-button#{&}__scroll-button:hover {
      background: var(
        --wds-horizontal-scroll-button-fill,
        var(--wsr-color-D80, #ffffff)
      );
      color: var(
        --wds-horizontal-scroll-button-text,
        var(--wsr-color-D10, #000624)
      );
      box-shadow: var(
        --wds-horizontal-scroll-button-shadow,
        var(
          --wsr-shadow20,
          0 2px 4px 0 rgba(22, 45, 61, 0.12),
          0 0 6px 0 rgba(22, 45, 61, 0.12)
        )
      );
    }
  }

  &--button-variant-secondary &__scroll-button#{&}__scroll-button#{&}__scroll-button:active {
    background: var(
      --wds-horizontal-scroll-button-fill-active,
      var(--wsr-color-D55, #cfd1dc)
    );
    color: var(
      --wds-horizontal-scroll-button-text,
      var(--wsr-color-D10, #000624)
    );
    box-shadow: var(
      --wds-horizontal-scroll-button-shadow,
      var(
        --wsr-shadow20,
        0 2px 4px 0 rgba(22, 45, 61, 0.12),
        0 0 6px 0 rgba(22, 45, 61, 0.12)
      )
    );
  }
}