/*
  Stepper component

  Structure:
  .a-stepper                  - Base stepper container (ol)
    .a-stepper-step           - Individual step (li)
      .a-stepper-icon         - Step icon/number indicator
      .a-stepper-label        - Step label text
    .a-stepper-connector      - Line connecting steps

  Orientation:
  .a-stepper--vertical        - Vertical layout (horizontal default)

  Step states:
  .a-stepper-step--active     - Current/active step
  .a-stepper-step--completed  - Completed step
  .a-stepper-step--locked     - Locked/disabled step
  .a-stepper-step--interactive - Interactive/clickable step (shows pointer cursor)
*/

.a-stepper {
  --padding-top: var(--a-stepper-padding-top, var(--lens-core-spacing-0-5));
  --padding-bottom: var(--a-stepper-padding-bottom, var(--lens-core-spacing-0-5));
  --gap: var(--a-stepper-gap, var(--lens-semantic-spacing-desktop-gap-1-5));

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap);
  padding-block-start: var(--padding-top);
  padding-block-end: var(--padding-bottom);
  margin: 0;
  list-style: none;

  &.a-stepper--vertical {
    --gap: var(--lens-semantic-spacing-desktop-gap-0-5);
    flex-direction: column;
    align-items: flex-start;
  }
}

.a-stepper-step {
  --step-gap: var(--a-stepper-step-gap, var(--lens-semantic-spacing-desktop-gap-1-5));

  display: flex;
  align-items: center;
  gap: var(--step-gap);
  padding: 0;

  &.a-stepper-step--interactive:not(.a-stepper-step--locked) {
    cursor: pointer;
  }
}

.a-stepper-icon {
  --icon-width: var(--a-stepper-icon-width, var(--lens-core-spacing-4));
  --icon-height: var(--a-stepper-icon-height, var(--lens-core-spacing-4));

  /* Default state colors */
  --icon-bg-default: var(--a-stepper-icon-bg-default, var(--lens-core-color-gray-200));
  --icon-color-default: var(--a-stepper-icon-color-default, var(--lens-core-color-gray-900));

  /* Active state colors */
  --icon-bg-active: var(--a-stepper-icon-bg-active, var(--lens-core-color-gray-950));
  --icon-color-active: var(--a-stepper-icon-color-active, var(--lens-core-color-gray-0));

  /* Completed state colors */
  --icon-bg-completed: var(--a-stepper-icon-bg-completed, var(--lens-core-color-green-95));
  --icon-color-completed: var(--a-stepper-icon-color-completed, var(--lens-core-color-green-40));

  --icon-font-size: var(--a-stepper-icon-font-size, var(--lens-semantic-font-number-md-font-size));
  --icon-line-height: var(
    --a-stepper-icon-line-height,
    var(--lens-semantic-font-number-md-line-height)
  );
  --icon-letter-spacing: var(
    --a-stepper-icon-letter-spacing,
    var(--lens-semantic-font-number-md-letter-spacing)
  );
  --icon-font-weight: var(--a-stepper-icon-font-weight, var(--lens-semantic-font-weight-emphasis));
  --svg-width: var(--a-stepper-svg-width, var(--lens-semantic-icon-size-lg));
  --svg-height: var(--a-stepper-svg-height, var(--lens-semantic-icon-size-lg));

  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--icon-width);
  height: var(--icon-height);
  background: var(--icon-bg-default);
  color: var(--icon-color-default);
  border-radius: var(--lens-semantic-radius-full);
  font-size: var(--icon-font-size);
  line-height: var(--icon-line-height);
  letter-spacing: var(--icon-letter-spacing);
  font-weight: var(--icon-font-weight);
  user-select: none;
  -webkit-user-select: none;

  & svg {
    width: var(--svg-width);
    height: var(--svg-height);
    fill: currentColor;
  }

  .a-stepper-step--active & {
    background: var(--icon-bg-active);
    color: var(--icon-color-active);
  }

  .a-stepper-step--completed & {
    background: var(--icon-bg-completed);
    color: var(--icon-color-completed);
  }
}

.a-stepper-label {
  --label-font-size: var(--a-stepper-label-font-size, var(--lens-semantic-font-text-md-font-size));
  --label-line-height: var(
    --a-stepper-label-line-height,
    var(--lens-semantic-font-text-md-line-height)
  );
  --label-letter-spacing: var(
    --a-stepper-label-letter-spacing,
    var(--lens-semantic-font-text-md-letter-spacing)
  );
  --label-color: var(--a-stepper-label-color, var(--lens-semantic-color-type-default));
  --label-font-weight: var(--a-stepper-label-font-weight, var(--lens-semantic-font-weight-regular));

  font-size: var(--label-font-size);
  line-height: var(--label-line-height);
  letter-spacing: var(--label-letter-spacing);
  color: var(--label-color);
  font-weight: var(--label-font-weight);

  .a-stepper-step--active & {
    --label-font-weight: var(--lens-semantic-font-weight-emphasis);
  }
}

.a-stepper-connector {
  --connector-color: var(--a-stepper-connector-color, var(--lens-semantic-color-ui-divider-default));
  --connector-width: var(--a-stepper-connector-width, var(--lens-core-spacing-3));
  --connector-height: var(--a-stepper-connector-height, var(--lens-core-spacing-px));

  flex: 1;
  min-width: var(--connector-width);
  height: var(--connector-height);
  background: var(--connector-color);

  .a-stepper--vertical & {
    --connector-width: var(--lens-core-spacing-px);
    --connector-height: var(--lens-core-spacing-2-5);
    width: var(--connector-width);
    min-height: var(--connector-height);
    margin-inline-start: calc(var(--icon-width, var(--lens-core-spacing-4)) / 2);
    transform: translateX(calc(-1 * var(--connector-width) / 2));
  }
}

/* Atlas Light & Dark theme shared size overrides */
.atlas-light-tokens .a-stepper-icon,
.atlas-dark-tokens .a-stepper-icon {
  --icon-width: var(--lens-core-spacing-3);
  --icon-height: var(--lens-core-spacing-3);
  --svg-width: var(--lens-semantic-icon-size-md);
  --svg-height: var(--lens-semantic-icon-size-md);
}

.atlas-light-tokens .a-stepper--vertical .a-stepper-connector,
.atlas-dark-tokens .a-stepper--vertical .a-stepper-connector {
  margin-inline-start: calc(var(--lens-core-spacing-3) / 2);
}

/* Atlas Light theme color overrides */
.atlas-light-tokens .a-stepper-icon {
  --icon-bg-default: var(--lens-core-color-concrete-95);
  --icon-color-default: var(--lens-core-color-concrete-80);
  --icon-bg-active: var(--lens-core-color-indigo-95);
  --icon-color-active: var(--lens-core-color-indigo-35);
  --icon-bg-completed: var(--lens-core-color-indigo-35);
  --icon-color-completed: var(--lens-core-color-concrete-99);
}

/* Atlas Dark theme color overrides */
.atlas-dark-tokens .a-stepper-icon {
  --icon-bg-default: var(--lens-core-color-storm-30);
  --icon-color-default: var(--lens-core-color-storm-80);
  --icon-bg-active: var(--lens-core-color-sky-95);
  --icon-color-active: var(--lens-core-color-sky-15);
  --icon-bg-completed: var(--lens-core-color-moss-25);
  --icon-color-completed: var(--lens-core-color-moss-95);
}