/* =========================
   Stepper
   Figma: Number Progress Indicator.
   API kept compatible with gnexus-ui-kit.
========================= */

@use "../kit-deps" as *;

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: $space-3;
  width: 100%;
  max-width: 900px;
  margin: 0;
  padding: 0;
  list-style: none;

  .step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: $space-2;
    min-height: 120px;
    padding: $space-4;
    border: $border-width-base $border-style-base $border-color-muted;
    border-left-width: $border-width-accent;
    border-radius: $radius-md;
    background: $surface-panel-muted;
  }

  .step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: $control-height-sm;
    height: $control-height-sm;
    color: $neutral-700;
    background: $neutral-0;
    border: $border-width-base $border-style-base $border-color-muted;
    border-radius: $radius-full;
    font-family: $font-family-base;
    font-size: 14px;
    font-weight: $font-weight-bold;
    line-height: 1;
  }

  .step-title {
    margin: 0;
    color: $neutral-900;
    font-family: $font-family-base;
    font-size: 16px;
    font-weight: $font-weight-bold;
    line-height: 1.3;
  }

  .step-text {
    margin: 0;
    color: $neutral-600;
    font-family: $font-family-base;
    font-size: 14px;
    line-height: 1.4;
  }

  .step-complete {
    border-color: $success-text;

    .step-marker {
      color: $neutral-0;
      background: $success-text;
      border-color: $success-text;
    }

    .step-title {
      color: $success-text;
    }
  }

  .step-current {
    border-color: $yellow-500;

    .step-marker {
      color: $neutral-900;
      background: $yellow-300;
      border-color: $yellow-500;
    }

    .step-title {
      color: $neutral-900;
    }
  }

  .step-disabled {
    opacity: 0.5;

    .step-marker {
      color: $neutral-400;
      background: $neutral-100;
    }
  }

  &.steps-vertical {
    grid-template-columns: 1fr;
    max-width: 520px;
    gap: 0;

    .step {
      min-height: auto;
      border-bottom-width: 0;
      border-radius: 0;

      &:first-child {
        border-radius: $radius-md $radius-md 0 0;
      }

      &:last-child {
        border-bottom-width: $border-width-base;
        border-radius: 0 0 $radius-md $radius-md;
      }
    }
  }
}

@media (max-width: 992px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .steps {
    grid-template-columns: 1fr;
  }
}