$modal-shadow: 0 var(--wds-shadow-y-primary-modal)
  var(--wds-shadow-blur-primary-modal) var(--wds-shadow-fill-primary-modal),
  0 var(--wds-shadow-blur-secondary-modal)
    var(--wds-shadow-y-secondary-modal) var(--wds-shadow-fill-secondary-modal);

.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-750)
    );
  }

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

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

  &--show-controls-shadow &__controls#{&}__controls {
    box-shadow: var(--wds-carousel-controls-shadow, #{$modal-shadow});
    border: var(--wds-carousel-controls-border, none);
    border-color: var(
      --wds-icon-button-color-border-standard-secondary,
      var(--wds-color-border-standard-primary)
    );
  }

  &__controls#{&}__controls {
    border-radius: var(--wds-carousel-controls-border-radius, 100px);
    width: var(--wds-carousel-controls-size-medium, 32px);
    height: var(--wds-carousel-controls-size-medium, 32px);
  }

  &__controls:not(&__controls--skin-transparent):not(&__controls--skin-premium)
    svg {
    fill: var(
      --wds-carousel-controls-icon-fill,
      var(--wds-color-text-standard-primary)
    );
  }

  &__controls#{&}__controls#{&}__controls--priority-secondary,
  &__controls#{&}__controls#{&}__controls--priority-secondary#{&}__controls--skin-inverted {
    border: var(--wds-carousel-controls-border, none);
    border-color: var(
      --wds-icon-button-color-border-standard-secondary,
      var(--wds-color-border-standard-primary)
    );
  }

  &__controls#{&}__controls#{&}__controls--size-small {
    border-radius: var(--wds-carousel-controls-border-radius, 100px);
    border: var(--wds-carousel-controls-border, none);
    width: var(--wds-carousel-controls-size-small, 24px);
    height: var(--wds-carousel-controls-size-small, 24px);
  }

  &__controls#{&}__controls#{&}__controls--size-tiny {
    border-radius: var(--wds-carousel-controls-border-radius, 100px);
    border: var(--wds-carousel-controls-border, none);
    width: var(--wds-carousel-controls-size-tiny, 18px);
    height: var(--wds-carousel-controls-size-tiny, 18px);
  }

  &:not(&--show-controls-shadow)
    &__controls#{&}__controls#{&}__controls--priority-secondary:not(&__controls--disabled):not(
      :focus-visible
    ),
  &:not(&--show-controls-shadow)
    &__controls#{&}__controls#{&}__controls--skin-inverted:not(&__controls--disabled):not(
      :focus-visible
    ) {
    box-shadow: var(
      --wds-carousel-controls-shadow-default,
      -8px 5px 15px 0 rgba(0, 0, 0, 0.08),
      1px 4px 2px 0 rgba(0, 0, 0, 0.05)
    );
  }

  @media (hover: hover) {
    &__controls#{&}__controls#{&}__controls--priority-secondary:hover:not(&__controls--disabled),
    &__controls#{&}__controls#{&}__controls--skin-inverted:hover:not(&__controls--disabled) {
      background-color: var(
        --wds-carousel-controls-fill-hover,
        var(
          --wds-horizontal-scroll-button-fill,
          var(
            --wds-icon-button-color-fill-standard-secondary-hover,
            var(--wds-color-fill-standard-tertiary-hover)
          )
        )
      );
      color: var(
        --wds-carousel-controls-icon-fill-hover,
        var(
          --wds-horizontal-scroll-button-text,
          var(
            --wds-icon-button-color-text-standard-secondary-hover,
            var(--wds-color-fill-standard-primary-active)
          )
        )
      );
    }

    &:not(&--show-controls-shadow)
      &__controls#{&}__controls#{&}__controls--priority-secondary:hover:not(
        &__controls--disabled
      ):not(:focus-visible),
    &:not(&--show-controls-shadow)
      &__controls#{&}__controls#{&}__controls--skin-inverted:hover:not(
        &__controls--disabled
      ):not(:focus-visible) {
      box-shadow: var(
        --wds-carousel-controls-shadow-hover,
        0 2px 4px 0 rgba(22, 45, 61, 0.12),
        0 0 6px 0 rgba(22, 45, 61, 0.12)
      );
    }

    &__controls#{&}__controls--priority-secondary:hover:not(&__controls--disabled)
      svg,
    &__controls#{&}__controls--skin-inverted:hover:not(&__controls--disabled)
      svg {
      fill: var(
        --wds-carousel-controls-icon-fill-hover,
        var(
          --wds-horizontal-scroll-button-text,
          var(
            --wds-icon-button-color-text-standard-secondary-hover,
            var(--wds-color-fill-standard-primary-active)
          )
        )
      );
    }
  }

  &__controls#{&}__controls#{&}__controls--priority-secondary:active:not(&__controls--disabled),
  &__controls#{&}__controls#{&}__controls--skin-inverted:active:not(&__controls--disabled) {
    background-color: var(
      --wds-carousel-controls-fill-active,
      var(
        --wds-horizontal-scroll-button-fill-active,
        var(
          --wds-icon-button-color-fill-standard-secondary-active,
          var(--wds-color-fill-standard-tertiary-active)
        )
      )
    );
    color: var(
      --wds-carousel-controls-icon-fill-active,
      var(
        --wds-horizontal-scroll-button-text,
        var(
          --wds-icon-button-color-text-standard-secondary-active,
          var(--wds-color-fill-standard-primary-active)
        )
      )
    );
  }

  &:not(&--show-controls-shadow)
    &__controls#{&}__controls#{&}__controls--priority-secondary:active:not(
      &__controls--disabled
    ):not(:focus-visible),
  &:not(&--show-controls-shadow)
    &__controls#{&}__controls#{&}__controls--skin-inverted:active:not(
      &__controls--disabled
    ):not(:focus-visible) {
    box-shadow: var(
      --wds-carousel-controls-shadow-active,
      0 2px 4px 0 rgba(22, 45, 61, 0.12),
      0 0 6px 0 rgba(22, 45, 61, 0.12)
    );
  }

  &__controls#{&}__controls--priority-secondary:active:not(&__controls--disabled)
    svg,
  &__controls#{&}__controls--skin-inverted:active:not(&__controls--disabled)
    svg {
    fill: var(
      --wds-carousel-controls-icon-fill-active,
      var(
        --wds-horizontal-scroll-button-text,
        var(
          --wds-icon-button-color-text-standard-secondary-active,
          var(--wds-color-fill-standard-primary-active)
        )
      )
    );
  }

  &__controls#{&}__controls#{&}__controls--disabled,
  &__controls#{&}__controls#{&}__controls--disabled#{&}__controls--priority-secondary,
  &__controls#{&}__controls#{&}__controls--disabled#{&}__controls--priority-secondary#{&}__controls--skin-inverted,
  &__controls#{&}__controls#{&}__controls--disabled#{&}__controls--size-small,
  &__controls#{&}__controls#{&}__controls--disabled#{&}__controls--size-tiny {
    border: var(--wds-carousel-controls-border-disabled, none);
    border-color: var(
      --wds-icon-button-color-border-standard-secondary-disabled,
      var(--wds-color-black-700)
    );
  }

  &__controls#{&}__controls--disabled:not(&__controls--skin-transparent):not(
      &__controls--skin-premium
    )
    svg {
    fill: var(
      --wds-carousel-controls-icon-fill-disabled,
      var(
        --wds-icon-button-color-text-standard-secondary-disabled,
        var(--wds-color-black-500)
      )
    );
  }

  &--show-controls-shadow &__controls#{&}__controls--disabled {
    box-shadow: var(--wds-carousel-controls-shadow-disabled, none);
  }

  &--show-controls-shadow &__controls#{&}__controls:focus-visible {
    box-shadow: var(--wds-carousel-controls-shadow, #{$modal-shadow});
  }

  &--controls-position-sides#{&}--controls-size-tiny {
    --wds-internal-carousel-side-inset: calc(
      var(--wds-internal-carousel-arrow-size) +
        var(--wds-carousel-controls-gap-tiny, var(--wds-space-800)) +
        var(--wds-carousel-controls-offset-sides, 0px)
    );
  }

  &--controls-position-sides#{&}--controls-size-small {
    --wds-internal-carousel-side-inset: calc(
      var(--wds-internal-carousel-arrow-size) +
        var(--wds-carousel-controls-gap-small, var(--wds-space-800)) +
        var(--wds-carousel-controls-offset-sides, 0px)
    );
  }

  &--controls-position-sides#{&}--controls-size-medium {
    --wds-internal-carousel-side-inset: calc(
      var(--wds-internal-carousel-arrow-size) +
        var(--wds-carousel-controls-gap-medium, var(--wds-space-800)) +
        var(--wds-carousel-controls-offset-sides, 0px)
    );
  }

  &--controls-position-sides#{&}--controls-size-large {
    --wds-internal-carousel-side-inset: calc(
      var(--wds-internal-carousel-arrow-size) +
        var(--wds-carousel-controls-gap-large, var(--wds-space-800)) +
        var(--wds-carousel-controls-offset-sides, 0px)
    );
  }

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

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

  &--gradient#{&}--controls-position-sides &__arrow-wrapper--direction-prev {
    left: var(--wds-carousel-controls-offset-sides-gradient, 0px);
  }

  &--controls-position-overlay &__arrow-wrapper--direction-prev {
    left: var(--wds-carousel-controls-offset-overlay, -16px);
  }

  &--gradient#{&}--controls-position-bottom &__arrow-wrapper--direction-prev {
    left: var(--wds-carousel-controls-offset-bottom-gradient, 0px);
  }

  &--gradient#{&}--controls-position-sides &__arrow-wrapper--direction-next {
    right: var(--wds-carousel-controls-offset-sides-gradient, 0px);
  }

  &--controls-position-overlay &__arrow-wrapper--direction-next {
    right: var(--wds-carousel-controls-offset-overlay, -16px);
  }

  &--gradient#{&}--controls-position-bottom &__arrow-wrapper--direction-next {
    right: var(--wds-carousel-controls-offset-bottom-gradient, 0px);
  }

  &__pagination {
    margin-top: calc(
      var(--wds-carousel-dots-gap, var(--wds-space-850)) +
        (var(--wds-carousel-dots-height, 6px) * 0)
    );
  }

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

  &--gradient :global(.embla__viewport)::before,
  &--gradient :global(.embla__viewport)::after {
    opacity: var(--wds-carousel-gradient-opacity, 100%);
    width: var(--wds-carousel-gradient-width, 30px);
  }
}