/* Aniyab UI — Stepper
 * From Figma: Components / stepper
 *
 * Usage:
 *   <ol class="ay-stepper">
 *     <li class="ay-stepper__step is-active">
 *       <span class="ay-stepper__indicator" aria-hidden="true"></span>
 *       <span class="ay-stepper__label">مشخصات</span>
 *     </li>
 *     <li class="ay-stepper__step is-done">…</li>
 *     <li class="ay-stepper__step">…</li>
 *   </ol>
 *
 * States on .ay-stepper__step: default | .is-active | .is-done
 */

.ay-stepper {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 336px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ay-font-family, dana, IRANSansfanum, Tahoma, sans-serif);
}

.ay-stepper__step {
  --ay-step-color: var(--ay-text-disable, #BBBAB9);
  --ay-step-line: var(--ay-text-disable, #BBBAB9);
  --ay-step-indicator-bg: transparent;
  --ay-step-indicator-border: var(--ay-text-disable, #BBBAB9);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  color: var(--ay-step-color);
}

/* Connector line between steps (drawn before each step except first in DOM order).
   In RTL flex, first visual step is the first list item on the right. */
.ay-stepper__step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 7px;
  inset-inline-end: calc(50% + 12px);
  width: calc(100% - 24px);
  height: 2px;
  background: var(--ay-step-line);
  pointer-events: none;
}

.ay-stepper__indicator {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: block;
  width: 16px;
  height: 16px;
  background: var(--ay-step-indicator-bg);
  border: 2px solid var(--ay-step-indicator-border);
  border-radius: 50%;
}

.ay-stepper__label {
  display: block;
  max-width: 100%;
  font-weight: 500;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}

.ay-stepper__step.is-active {
  --ay-step-color: var(--ay-brand-primary, #002D71);
  --ay-step-indicator-bg: var(--ay-surface-white, #FFFFFF);
  --ay-step-indicator-border: var(--ay-brand-primary, #002D71);
}

.ay-stepper__step.is-done {
  --ay-step-color: var(--ay-brand-primary, #002D71);
  --ay-step-line: var(--ay-brand-primary, #002D71);
  --ay-step-indicator-bg: var(--ay-brand-primary, #002D71);
  --ay-step-indicator-border: var(--ay-brand-primary, #002D71);
}

.ay-stepper__step.is-done .ay-stepper__indicator::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 4px;
  height: 7px;
  border: solid var(--ay-surface-white, #FFFFFF);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* When previous step is done, paint the connector leading into this step as done */
.ay-stepper__step.is-done + .ay-stepper__step::before,
.ay-stepper__step.is-done + .ay-stepper__step.is-active::before {
  background: var(--ay-brand-primary, #002D71);
}