.carousel-wip {
  position: relative;

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

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

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

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

  &__carousel {
    cursor: grab;
    display: flex;
    flex-flow: row nowrap;
    overflow-x: hidden;
    position: relative;
    transition: all 0.25s ease-in-quint;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    touch-action: pan-y pinch-zoom;
  }

  &__carousel--dragging {
    cursor: grabbing;
  }

  &__control {
    position: absolute;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    background: transparent;
    top: 50%;
    transform: translate(0, -50%);
    padding: 0;
    border: none;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    align-content: center;
  }

  &__control#{&}__control {
    display: block;
  }

  & &__prev {
    left: 12px;
  }

  &--controls-position-sides &__prev,
  &--controls-position-bottom &__prev {
    left: 0;
  }

  & &__next {
    right: 12px;
  }

  &--controls-position-sides &__next,
  &--controls-position-bottom &__next {
    right: 0;
  }

  &--controls-position-sides &__carousel {
    margin: auto;
  }

  &--controls-position-sides#{&}--controls-size-tiny &__carousel {
    width: calc(
      100% - (2 * var(--wds-internal-carousel-wip-arrow-size)) -
        (2 * var(--wds-space-400, 25px))
    );
  }

  &--controls-position-sides#{&}--controls-size-small &__carousel {
    width: calc(
      100% - (2 * var(--wds-internal-carousel-wip-arrow-size)) -
        (2 * var(--wds-space-300, 25px))
    );
  }

  &--controls-position-sides#{&}--controls-size-medium &__carousel,
  &--controls-position-sides#{&}--controls-size-large &__carousel {
    width: calc(
      100% - (2 * var(--wds-internal-carousel-wip-arrow-size)) -
        (2 * var(--wds-space-200, 25px))
    );
  }

  &--controls-position-sides &__control,
  &--controls-position-overlay &__control,
  &--controls-position-sides#{&}--hide-dots &__control,
  &--controls-position-overlay#{&}--hide-dots &__control {
    top: calc(50% - (var(--wds-internal-carousel-wip-arrow-size) / 2));
    transform: none;
  }

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

  &--controls-position-bottom {
    margin-bottom: var(--wds-internal-carousel-wip-arrow-size);
  }

  &--controls-position-bottom &__control {
    top: calc(100% + ((var(--wds-space-400, 24px) + 4px) / 2));
    transform: none;
  }

  &--show-controls-shadow &__control {
    box-shadow: var(
      --wds-carousel-controls-shadow,
      var(
        --wds-shadow-300,
        var(
          --wsr-shadow30,
          0 6px 6px 0 rgba(22, 45, 61, 0.06),
          0 0 18px 0 rgba(22, 45, 61, 0.12)
        )
      )
    );
  }

  &--show-sides-gradients &__start,
  &--show-sides-gradients &__end {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    width: var(--wds-internal-carousel-wip-arrow-size);
    top: 0;
    height: 100%;
    pointer-events: none;
  }

  &--show-sides-gradients &__start {
    left: 0;
    background: linear-gradient(
      to left,
      rgba(240, 244, 247, 0) 50%,
      var(
        --wds-internal-carousel-wip-sides-gradient-color,
        var(--wds-color-black-700, var(--wsr-color-D70, #eceff3))
      )
    );
  }

  &--show-sides-gradients &__end {
    right: 0;
    background: linear-gradient(
      to right,
      rgba(240, 244, 247, 0) 50%,
      var(
        --wds-internal-carousel-wip-sides-gradient-color,
        var(--wds-color-black-700, var(--wsr-color-D70, #eceff3))
      )
    );
  }

  &__dots {
    display: flex;
    justify-content: center;
    margin-top: var(--wds-space-400, 24px);
  }

  &--controls-position-bottom &__dots {
    margin-top: calc(
      ((var(--wds-space-400, 24px) + -2px / 2)) +
        (var(--wds-internal-carousel-wip-arrow-size) / 2)
    );
  }

  &__dot {
    width: 12px;
    height: 4px;
    margin: 0 var(--wds-space-100, 6px) 2px 0;
    border-radius: 2px;
    background-color: var(--wds-color-blue-300, var(--wsr-color-B30, #a8caff));
    cursor: pointer;
  }

  @media (hover: hover) {
    &__dot:hover {
      background-color: var(
        --wds-color-blue-200,
        var(--wsr-color-B20, #5999ff)
      );
    }
  }

  &__dot--active {
    background-color: var(--wds-color-blue-0, var(--wsr-color-B00, #084ebd));
  }

  &__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;
  }

  &__slide:not(:first-child) {
    margin-inline-start: var(--wds-space-400, 24px);
  }
}