$font-family: var(
  --wds-font-family-default,
  var(
    --wsr-font-family,
    Madefor,
    'Helvetica Neue',
    Helvetica,
    Arial,
    'メイリオ',
    'meiryo',
    'ヒラギノ角ゴ pro w3',
    'hiragino kaku gothic pro',
    sans-serif
  )
);
$prefix-size-circle: var(
  --wds-stepper-prefix-size-circle,
  var(--wds-space-500, 30px)
);
$prefix-size-number: var(
  --wds-stepper-prefix-size-number,
  var(--wds-space-400, 24px)
);
$mobile-fade-width: 20px;
$mobile-active-step-offset: 70px;
$mobile-min-target-size: 24px;
$mobile-ring-space: 4px;
$mobile-snap-release-delay: 500ms;
$mobile-title-duration: 250ms;
$mobile-title-easing: cubic-bezier(0.33, 1, 0.68, 1);

@property --wds-internal-stepper-fade-start {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@keyframes stepper-fade-start {
  from {
    --wds-internal-stepper-fade-start: 0;
  }

  to {
    --wds-internal-stepper-fade-start: 1;
  }
}

@keyframes stepper-mount {
  from,
  to {
    scroll-behavior: auto;
  }
}

@keyframes stepper-release-snap {
  to {
    scroll-snap-align: none;
  }
}

.stepper {
  display: flex;
  min-width: 0;

  &--fit-stretched {
    flex-grow: 1;
    justify-content: space-between;
  }

  &--fit-stretched::after {
    content: '';
  }

  &__step {
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width: 0;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    border: none;
    padding: 0;
    background: none;
    text-align: left;
    flex-shrink: 1;
    transition: flex-shrink 200ms ease-out;
  }

  &__step:not(#{&}__step--clickable) {
    cursor: default;
  }

  &__step--selected {
    flex-shrink: 0;
  }

  &__content {
    display: flex;
    align-items: center;
    min-width: 0;
    position: relative;
  }

  &__marker {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  &__marker--style-type-circle {
    border-radius: var(--wds-border-radius-full, 50%);
    border: 1px solid
      var(
        --wds-color-border-standard-primary-active,
        var(--wsr-color-B10, #116dff)
      );
    width: $prefix-size-circle;
    height: $prefix-size-circle;
    margin-right: var(--wds-space-200, 12px);
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
  }

  :global([dir='rtl']) &__marker--style-type-circle {
    margin-right: 0;
    margin-left: var(--wds-space-200, 12px);
  }

  &__marker--style-type-text {
    min-width: $prefix-size-number;
    margin-right: var(--wds-space-50, 3px);
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D10, #000624)
    );
  }

  :global([dir='rtl']) &__marker--style-type-text {
    margin-right: 0;
    margin-left: var(--wds-space-50, 3px);
  }

  &__marker--type-completed#{&}__marker--style-type-text {
    color: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B10, #116dff)
    );
  }

  &__marker--style-type-circle#{&}__marker--hovered {
    background-color: var(
      --wds-color-fill-standard-primary-hover,
      var(--wsr-color-B20, #5999ff)
    );
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
    border: none;
  }

  &__marker--style-type-text#{&}__marker--hovered {
    color: var(
      --wds-color-fill-standard-primary-hover,
      var(--wsr-color-B20, #5999ff)
    );
  }

  &__marker--style-type-circle#{&}__marker--selected {
    background-color: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B10, #116dff)
    );
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
    border: none;
  }

  &__marker--style-type-text#{&}__marker--selected {
    color: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B10, #116dff)
    );
  }

  &__marker--type-error {
    color: var(--wds-color-text-destructive, var(--wsr-color-R10, #e62214));
  }

  &__marker--type-error#{&}__marker--style-type-circle {
    border-color: var(
      --wds-color-border-destructive-primary-active,
      var(--wsr-color-R10, #e62214)
    );
  }

  &__marker--type-error#{&}__marker--style-type-circle#{&}__marker--selected {
    background-color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
    border: none;
  }

  &__marker--type-error#{&}__marker--style-type-text#{&}__marker--selected {
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
  }

  &__marker--type-error#{&}__marker--style-type-circle#{&}__marker--hovered:not(
      #{&}__marker--selected
    ) {
    background-color: var(
      --wds-color-fill-destructive-primary-hover,
      var(--wsr-color-R20, #ff6d63)
    );
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
    border: none;
  }

  &__marker--type-error#{&}__marker--style-type-text#{&}__marker--hovered:not(
      #{&}__marker--selected
    ) {
    color: var(
      --wds-color-fill-destructive-primary-hover,
      var(--wsr-color-R20, #ff6d63)
    );
  }

  &__marker--type-disabled#{&}__marker--style-type-circle {
    background-color: var(
      --wds-color-fill-standard-primary-disabled,
      var(--wsr-color-D55, #cfd1dc)
    );
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80, #ffffff));
    border: none;
  }

  &__marker--type-disabled#{&}__marker--style-type-text {
    color: var(
      --wds-color-fill-standard-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &__step--size-small &__marker {
    font-family: $font-family;
    font-size: var(
      --wds-font-size-body-small,
      var(--wsr-text-font-size-small, 14px)
    );
    font-weight: var(
      --wds-font-weight-regular,
      var(--wsr-font-weight-regular, 400)
    );
    line-height: var(
      --wds-font-line-height-body-small,
      var(--wsr-text-line-height-small, 18px)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
  }

  &__step--size-medium &__marker {
    font-family: $font-family;
    font-size: var(
      --wds-font-size-body-medium,
      var(--wsr-text-font-size-medium, 16px)
    );
    font-weight: var(
      --wds-font-weight-regular,
      var(--wsr-font-weight-regular, 400)
    );
    line-height: var(
      --wds-font-line-height-body-medium,
      var(--wsr-text-line-height-medium, 24px)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
  }

  &__step#{&}__step--style-type-circle &__text {
    color: var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624));
  }

  &__step#{&}__step--style-type-text &__text {
    color: var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624));
  }

  &__step#{&}__step--type-disabled#{&}__step--style-type-circle &__text {
    color: var(
      --wds-color-fill-standard-primary-disabled,
      var(--wsr-color-D40, #868aa5)
    );
  }

  &__step#{&}__step--type-disabled#{&}__step--style-type-text &__text {
    color: var(
      --wds-color-fill-standard-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &__step#{&}__step--selected &__text {
    color: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B10, #116dff)
    );
  }

  &__step#{&}__step--hovered#{&}__step--clickable &__text {
    color: var(
      --wds-color-fill-standard-primary-hover,
      var(--wsr-color-B20, #5999ff)
    );
  }

  &__step#{&}__step--type-error &__text {
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
  }

  &__step#{&}__step--type-error#{&}__step--selected &__text {
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
  }

  &__step--type-error#{&}__step--hovered#{&}__step--clickable &__text {
    color: var(
      --wds-color-fill-destructive-primary-hover,
      var(--wsr-color-R20, #ff6d63)
    );
  }

  &__arrow {
    color: var(
      --wds-color-text-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
    flex-shrink: 0;
  }

  &__step--style-type-text &__arrow {
    margin-right: var(--wds-space-100, 6px);
  }

  :global([dir='rtl']) &__step--style-type-text &__arrow {
    margin-right: 0;
    margin-left: var(--wds-space-100, 6px);
  }

  &--mobile {
    box-sizing: content-box;
    width: 100%;
    flex-grow: 0;
    justify-content: flex-start;
    margin: -$mobile-ring-space;
    padding: $mobile-ring-space;
    overflow-x: auto;
    overflow-y: hidden;
    /* stylelint-disable-next-line plugin/use-baseline */
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: calc(
      #{$mobile-active-step-offset} + #{$mobile-ring-space}
    );
  }

  @supports (animation-timeline: scroll()) {
    &--mobile {
      scroll-behavior: smooth;
      animation:
        stepper-fade-start linear both,
        stepper-mount 1ms;
      /* stylelint-disable-next-line plugin/use-baseline */
      animation-timeline: scroll(self inline), auto;
      /* stylelint-disable-next-line plugin/use-baseline */
      animation-range: 1px $mobile-fade-width, normal;
    }
  }

  &--mobile::-webkit-scrollbar {
    display: none;
  }

  &--mobile::after {
    content: '';
    flex: 0 0 $mobile-fade-width;
  }

  @supports (mask-image: linear-gradient(black, transparent)) {
    &--mobile {
      mask-image: linear-gradient(
        to right,
        transparent
          calc(var(--wds-internal-stepper-fade-start, 0) * #{$mobile-ring-space}),
        black
          calc(
            var(--wds-internal-stepper-fade-start, 0) *
              (#{$mobile-ring-space} + #{$mobile-fade-width})
          ),
        black calc(100% - #{$mobile-ring-space} - #{$mobile-fade-width}),
        transparent calc(100% - #{$mobile-ring-space})
      );
    }

    :global([dir='rtl']) &--mobile {
      mask-image: linear-gradient(
        to left,
        transparent
          calc(var(--wds-internal-stepper-fade-start, 0) * #{$mobile-ring-space}),
        black
          calc(
            var(--wds-internal-stepper-fade-start, 0) *
              (#{$mobile-ring-space} + #{$mobile-fade-width})
          ),
        black calc(100% - #{$mobile-ring-space} - #{$mobile-fade-width}),
        transparent calc(100% - #{$mobile-ring-space})
      );
    }
  }

  &--mobile &__step {
    flex-shrink: 0;
    min-width: $mobile-min-target-size;
    min-height: $mobile-min-target-size;
  }

  &--mobile &__step--selected {
    scroll-snap-align: start;
    animation: stepper-release-snap 1ms $mobile-snap-release-delay forwards;
  }

  &--mobile &__marker {
    margin: 0;
  }

  &__title {
    overflow: hidden;
    width: max-content;
  }

  &__step:not(#{&}__step--selected) &__title {
    width: 0;
  }

  &__title &__text {
    display: block;
    width: max-content;
    white-space: nowrap;
    transition: opacity $mobile-title-duration $mobile-title-easing;
  }

  &__step:not(#{&}__step--selected) &__title &__text {
    opacity: 0;
  }

  @media (prefers-reduced-motion) {
    &--mobile {
      scroll-behavior: auto;
    }

    &__title &__text {
      transition: none;
    }
  }

  &__step--style-type-circle &__title &__text {
    padding-inline-start: var(--wds-space-200, 12px);
  }

  &__step--style-type-text &__title &__text {
    padding-inline-start: var(--wds-space-50, 3px);
  }
}