$shadow-30: var(
  --wsr-shadow30,
  0 6px 6px 0 rgba(22, 45, 61, 0.06),
  0 0 18px 0 rgba(22, 45, 61, 0.12)
);
$vertical-spacing-size: calc(
  (var(--wds-space-400, 24px) + var(--wds-carousel-dots-height, 4px)) / 2
);

.carousel {
  position: relative;

  &--controls-size-tiny {
    --wds-internal-carousel-arrow-size: var(
      --wds-button-size-tiny,
      var(--wds-space-400, 24px)
    );
  }

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

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

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

  &--show-controls-shadow &__controls#{&}__controls {
    box-shadow: var(
      --wds-carousel-controls-shadow,
      var(--wds-shadow-300, #{$shadow-30})
    );
    border: var(
      --wds-carousel-controls-border,
      solid 1px
        var(
          --wds-icon-button-color-border-standard-secondary,
          var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe))
        )
    );
  }

  &__controls#{&}__controls {
    border-radius: var(
      --wds-carousel-controls-border-radius,
      var(--wds-border-radius-full, 100px)
    );
    width: var(
      --wds-carousel-controls-size-medium,
      var(--wds-button-size-medium, var(--wds-space-600, 36px))
    );
    height: var(
      --wds-carousel-controls-size-medium,
      var(--wds-button-size-medium, var(--wds-space-600, 36px))
    );
  }

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

  @media (forced-colors: active) {
    &__controls:not(&__controls--skin-transparent):not(&__controls--skin-premium)
      svg {
      fill: currentColor;
    }
  }

  &__controls#{&}__controls#{&}__controls--priority-secondary,
  &__controls#{&}__controls#{&}__controls--priority-secondary#{&}__controls--skin-inverted {
    border: var(
      --wds-carousel-controls-border,
      solid 1px
        var(
          --wds-icon-button-color-border-standard-secondary,
          var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe))
        )
    );
  }

  &__controls#{&}__controls#{&}__controls--size-small {
    border-radius: var(
      --wds-carousel-controls-border-radius,
      var(--wds-border-radius-full, 100px)
    );
    border: var(
      --wds-carousel-controls-border,
      solid 1px
        var(
          --wds-icon-button-color-border-standard-secondary,
          var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe))
        )
    );
    width: var(
      --wds-carousel-controls-size-small,
      var(--wds-button-size-small, var(--wds-space-500, 30px))
    );
    height: var(
      --wds-carousel-controls-size-small,
      var(--wds-button-size-small, var(--wds-space-500, 30px))
    );
  }

  &__controls#{&}__controls#{&}__controls--size-tiny {
    border-radius: var(
      --wds-carousel-controls-border-radius,
      var(--wds-border-radius-full, 100px)
    );
    border: var(
      --wds-carousel-controls-border,
      solid 1px
        var(
          --wds-icon-button-color-border-standard-secondary,
          var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe))
        )
    );
    width: var(
      --wds-carousel-controls-size-tiny,
      var(--wds-button-size-tiny, var(--wds-space-400, 24px))
    );
    height: var(
      --wds-carousel-controls-size-tiny,
      var(--wds-button-size-tiny, var(--wds-space-400, 24px))
    );
  }

  &: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, none);
  }

  @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-icon-button-color-fill-standard-secondary-hover,
          var(--wds-color-fill-standard-primary-hover, var(--wsr-color-B05, #0f62e6))
        )
      );
      color: var(
        --wds-carousel-controls-icon-fill-hover,
        var(
          --wds-icon-button-color-text-standard-secondary-hover,
          var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff))
        )
      );
    }

    &: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, none);
    }

    &__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-icon-button-color-text-standard-secondary-hover,
          var(
            --wds-color-text-standard-primary-light,
            var(
              --wds-carousel-controls-icon-fill,
              var(
                --wds-icon-button-color-text-standard-secondary,
                var(--wds-color-text-primary, currentColor)
              )
            )
          )
        )
      );
    }
  }

  &__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-icon-button-color-fill-standard-secondary-active,
        var(--wds-color-fill-standard-primary-active, var(--wsr-color-B00, #084ebd))
      )
    );
    color: var(
      --wds-carousel-controls-icon-fill-active,
      var(
        --wds-icon-button-color-text-standard-secondary-active,
        var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff))
      )
    );
  }

  &: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, none);
  }

  &__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-icon-button-color-text-standard-secondary-active,
        var(
          --wds-color-text-standard-primary-light,
          var(
            --wds-carousel-controls-icon-fill,
            var(
              --wds-icon-button-color-text-standard-secondary,
              var(--wds-color-text-primary, currentColor)
            )
          )
        )
      )
    );
  }

  @media (forced-colors: active) and (hover: hover) {
    &__controls#{&}__controls--priority-secondary:hover:not(&__controls--disabled)
      svg,
    &__controls#{&}__controls--skin-inverted:hover:not(&__controls--disabled)
      svg {
      fill: currentColor;
    }
  }

  @media (forced-colors: active) {
    &__controls#{&}__controls--priority-secondary:active:not(&__controls--disabled)
      svg,
    &__controls#{&}__controls--skin-inverted:active:not(&__controls--disabled)
      svg {
      fill: currentColor;
    }
  }

  &__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,
      solid 1px
        var(
          --wds-icon-button-color-border-standard-secondary-disabled,
          var(--wds-color-border-standard-secondary-disabled, rgba(0, 6, 36, 0.1))
        )
    );
  }

  &__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-text-disabled, currentColor)
      )
    );
  }

  @media (forced-colors: active) {
    &__controls#{&}__controls--disabled:not(&__controls--skin-transparent):not(
        &__controls--skin-premium
      )
      svg {
      fill: currentColor;
    }
  }

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

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

  &__embla-wrapper {
    position: relative;
    display: flow-root;
  }

  & :global(.embla__viewport) {
    position: relative;
    overflow: hidden;
    box-sizing: content-box;
    min-height: var(--wds-internal-carousel-arrow-size);
    padding-top: 34px;
    padding-bottom: 34px;
    margin: -34px auto;
  }

  &--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-400, 25px)) +
        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-300, 25px)) +
        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-200, 25px)) +
        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-200, 25px)) +
        var(--wds-carousel-controls-offset-sides, 0px)
    );
  }

  &--controls-position-sides :global(.embla__viewport) {
    margin-left: var(--wds-internal-carousel-side-inset);
    margin-right: var(--wds-internal-carousel-side-inset);
  }

  & :global(.embla__container) {
    display: flex;
    /* stylelint-disable-next-line plugin/use-baseline */
    user-select: none;
    touch-action: pan-y;
    backface-visibility: hidden;
    margin-left: calc(var(--wds-internal-carousel-slide-spacing, 0px) * -1);
  }

  & :global(.embla__slide) {
    flex: 0 0 100%;
    min-width: 0;
    padding-left: var(--wds-internal-carousel-slide-spacing, 0px);
    box-sizing: border-box;
  }

  & :global(.embla__slide) > * {
    width: 100%;
  }

  &--paged :global(.embla__viewport) {
    padding-left: 34px;
    padding-right: 34px;
    margin-left: calc(var(--wds-internal-carousel-side-inset, 0px) - 34px);
    margin-right: calc(var(--wds-internal-carousel-side-inset, 0px) - 34px);
  }

  &--paged :global(.embla__container) {
    margin-left: -68px;
  }

  &--paged :global(.embla__slide) {
    padding-left: 68px;
  }

  &__page-row {
    display: flex;
    gap: var(--wds-internal-carousel-slide-spacing, 0px);
  }

  &__page-item {
    flex: 0 0
      calc(
        (
            100% -
              (var(--wds-internal-carousel-slides-per-page, 1) - 1) *
              var(--wds-internal-carousel-slide-spacing, 0px)
          ) / var(--wds-internal-carousel-slides-per-page, 1)
      );
    min-width: 0;
  }

  &__page-item > * {
    width: 100%;
  }

  &--variable-width :global(.embla__slide) {
    flex: 0 0 auto;
  }

  &--variable-width :global(.embla__slide) > * {
    width: auto;
  }

  &__arrow-wrapper {
    position: absolute;
    display: block;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    width: fit-content;
    z-index: 2;
  }

  &__arrow-wrapper--disabled {
    cursor: default;
  }

  &--controls-position-sides &__arrow-wrapper,
  &--controls-position-sides#{&}--dots &__arrow-wrapper,
  &--controls-position-overlay &__arrow-wrapper,
  &--controls-position-overlay#{&}--dots &__arrow-wrapper {
    top: 50%;
    transform: translateY(-50%);
  }

  &--controls-position-overlay &__arrow-wrapper {
    z-index: 3;
  }

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

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

  &__arrow-wrapper--direction-prev {
    left: 0;
  }

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

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

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

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

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

  &__arrow-wrapper--direction-next {
    right: 0;
  }

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

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

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

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

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

  &__arrow-prev-background,
  &__arrow-next-background {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__image-container {
    display: flex;
    height: 100%;
  }

  &__image-container--is-loading {
    display: none;
  }

  &__image {
    width: 100%;
  }

  &__loader {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(
      --wds-color-fill-surface-neutral,
      var(--wsr-color-B50, #e7f0ff)
    );
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__pagination {
    margin-top: var(--wds-carousel-dots-gap, var(--wds-space-400, 24px));
  }

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

  &__page-navigation {
    color: transparent;
    cursor: pointer;
  }

  &--gradient :global(.embla__viewport)::before,
  &--gradient :global(.embla__viewport)::after {
    position: absolute;
    display: block;
    content: '';
    top: 34px;
    bottom: 34px;
    opacity: var(--wds-carousel-gradient-opacity, 50%);
    z-index: 1;
    width: var(
      --wds-carousel-gradient-width,
      var(
        --wds-button-size-medium,
        var(--wds-space-600, var(--wds-internal-carousel-arrow-size))
      )
    );
    pointer-events: none;
  }

  &--gradient :global(.embla__viewport)::before {
    background: linear-gradient(
      90deg,
      var(--wds-internal-carousel-gradient-color, var(--wsr-color-D80, #ffffff)),
      transparent
    );
    left: 0;
  }

  &--gradient#{&}--custom-gradient :global(.embla__viewport)::before {
    background: linear-gradient(
      90deg,
      var(
        --wds-internal-carousel-gradient-color,
        var(--wds-color-white, var(--wsr-color-D80, #ffffff))
      ),
      transparent
    );
  }

  &--gradient :global(.embla__viewport)::after {
    background: linear-gradient(
      90deg,
      transparent,
      var(--wds-internal-carousel-gradient-color, var(--wsr-color-D80, #ffffff))
    );
    right: 0;
  }

  &--gradient#{&}--custom-gradient :global(.embla__viewport)::after {
    background: linear-gradient(
      90deg,
      transparent,
      var(
        --wds-internal-carousel-gradient-color,
        var(--wds-color-white, var(--wsr-color-D80, #ffffff))
      )
    );
  }

  &--paged#{&}--gradient :global(.embla__viewport)::before {
    left: 34px;
  }

  &--paged#{&}--gradient :global(.embla__viewport)::after {
    right: 34px;
  }

  :global([dir='rtl']) & :global(.embla__container) {
    direction: rtl;
  }
}