.carousel {
  &--controls-size-tiny {
    --wds-internal-carousel-arrow-size: var(
      --wds-button-size-tiny,
      var(--wds-space-600)
    );
  }

  &--controls-size-small {
    --wds-internal-carousel-arrow-size: var(
      --wds-button-size-small,
      var(--wds-space-700)
    );
  }

  &--controls-size-medium {
    --wds-internal-carousel-arrow-size: var(
      --wds-button-size-medium,
      var(--wds-space-800)
    );
  }

  &--controls-size-large {
    --wds-internal-carousel-arrow-size: var(
      --wds-button-size-large,
      var(--wds-space-900)
    );
  }

  &__controls#{&}__controls,
  &__controls#{&}__controls#{&}__controls--size-small,
  &__controls#{&}__controls#{&}__controls--size-tiny {
    border-radius: var(
      --wds-carousel-controls-border-radius,
      var(--wds-border-radius-200)
    );
  }

  &--controls-position-bottom#{&}--dots &__arrow-wrapper {
    top: calc(
      100% + var(--wds-carousel-controls-bottom-offset-dots, 10px) +
        (
          var(--wds-carousel-controls-bottom-shift, 0) *
            var(--wds-internal-carousel-arrow-size)
        )
    );
  }

  &__pagination--controls-position-bottom {
    margin-top: calc(
      var(--wds-carousel-dots-gap-bottom, 10px) +
        (
          var(--wds-carousel-dots-gap-bottom-shift, 0.5) *
            var(--wds-internal-carousel-arrow-size)
        )
    );
  }
}