@use 'pix-design-tokens/typography';
@use 'pix-design-tokens/breakpoints';
@use '../passage';

.stepper {
  &__controls {
    @extend %pix-cta-s;

    display: inline-flex;
    gap: var(--pix-spacing-2x);
    align-items: center;
    margin-bottom: var(--pix-spacing-2x);
    padding: var(--pix-spacing-1x) var(--pix-spacing-4x) var(--pix-spacing-1x) var(--pix-spacing-2x);
    border: 1px solid var(--pix-neutral-100);
    border-radius: 8px;
  }

  &__steps {
    display: flex;
  }
}

.stepper-controls {
  &__position {
    margin: 0;
  }

  &__step-bars {
    display: flex;
    gap: 32px;
    align-items: center;
  }
}

.stepper-controls__step-bar {
  position: relative;
  width: 12px;
  height: 12px;
  background: var(--pix-neutral-500);
  border-radius: 50%;

  &.disable {
    opacity: .3;
  }

  &.active::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid var(--pix-neutral-0);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    content: '';
  }

  &:not(:last-child)::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 4px);
    width: 24px;
    border-bottom: 2px solid var(--pix-neutral-500);
    transform: translateY(-50%);
    content: '';
  }
}

.stepper--vertical {
  display: flex;
  flex-direction: column;

  .stepper__step {
    margin-bottom: var(--pix-spacing-6x);

    &:last-child {
      margin-bottom: 0;
    }

    &--active {
      @extend .auto-scroll;

      outline: none;
    }

    &__position {
      display: inline-block;

      @extend %pix-body-m;

      margin: var(--pix-spacing-1x) 0 var(--pix-spacing-4x) 0;
      padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
      color: var(--pix-neutral-800);
      background: var(--pix-neutral-20);
      border-radius: var(--modulix-radius-l);
    }
  }
}

.stepper--horizontal {
  /* stylelint-disable-next-line no-descending-specificity */
  .stepper__step {
    --stepper-previous-slide-visible-width: 10px;
    --stepper-gap-between-steps: calc(50vw - 50% - var(--stepper-previous-slide-visible-width));
    --stepper-gap-between-steps-with-step-width: calc(var(--stepper-gap-between-steps) + 100%);
    --stepper-gap-between-line-and-step: 14px;

    flex: 0 0 100%;
    align-items: center;
    margin-right: var(--stepper-gap-between-steps);
    padding: var(--pix-spacing-4x);
    border: 1px solid var(--pix-neutral-100);
    border-radius: 8px;
    transform: translateX(calc(-1 * var(--stepper-gap-between-steps-with-step-width) * var(--current-step-index)));

    @media (not (prefers-reduced-motion: reduce)) {
      transition: transform .5s ease-in-out;
    }

    &--from-right {
      /* calcule la position de la slide pour qu'elle apparaisse à droite en désincrémentant son index */
      transform: translateX(calc(-1 * var(--stepper-gap-between-steps-with-step-width) * (var(--current-step-index) - 1)));
    }

    /* Line between steps */
    &:not(.stepper-step--last-step) {
      position: relative;

      &::after {
        position: absolute;
        top: 50%;
        left: calc(100% + var(--stepper-gap-between-line-and-step));
        width: calc(var(--stepper-gap-between-steps) - (2 * var(--stepper-gap-between-line-and-step)));
        border-bottom: 1px solid var(--pix-neutral-500);
        opacity: 0.3;
        content: '';
      }
    }

    /* Fake empty step at the end */
    &:last-child:not(.stepper-step--last-step) {
      position: relative;

      &::before {
        position: absolute;
        top: 0;
        left: var(--stepper-gap-between-steps-with-step-width);
        width: 100%;
        height: 100%;
        border: 1px solid var(--pix-neutral-100);
        border-radius: 8px;
        content: '';
      }
    }
  }
}

.stepper__next-button {
  justify-self: start;
  width: fit-content;
  min-width: 140px;
}

@include breakpoints.device-is('tablet') {
  .stepper--horizontal {
    .stepper__step {
      --stepper-previous-slide-visible-width: 20px;
    }
  }
}

@include breakpoints.device-is('desktop') {
  .stepper--horizontal {
    .stepper__step {
      --stepper-previous-slide-visible-width: 100px;
    }
  }
}
