/* UI Stepper Component - Multi-step progression indicator */

.ui-stepper {
    display: flex;
    width: 100%;
}

/* Horizontal variant (default) */
.ui-stepper--horizontal {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.ui-stepper--horizontal .ui-stepper__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}

.ui-stepper--horizontal .ui-stepper__connector {
    position: absolute;
    top: calc(var(--indicator-size) / 2);
    left: calc(50% + var(--indicator-size) / 2 + 8px);
    right: calc(-50% + var(--indicator-size) / 2 + 8px);
    height: 2px;
    background: var(--color-border-default);
    transition: background 0.3s ease;
}

/* Vertical variant */
.ui-stepper--vertical {
    flex-direction: column;
}

.ui-stepper--vertical .ui-stepper__step {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    padding-bottom: var(--space-4);
}

.ui-stepper--vertical .ui-stepper__connector {
    position: absolute;
    top: calc(var(--indicator-size) + 8px);
    left: calc(var(--indicator-size) / 2);
    bottom: 0;
    width: 2px;
    background: var(--color-border-default);
    transition: background 0.3s ease;
}

.ui-stepper--vertical .ui-stepper__step-label {
    margin-left: var(--space-3);
    margin-top: calc(var(--indicator-size) / 4);
}

/* Size variants */
.ui-stepper--small {
    --indicator-size: 28px;
    --font-size: 0.875rem;
}

.ui-stepper--default {
    --indicator-size: 36px;
    --font-size: 1rem;
}

/* Step indicator */
.ui-stepper__step-indicator {
    width: var(--indicator-size);
    height: var(--indicator-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size);
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border-default);
    color: var(--color-text-muted);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Step states */
.ui-stepper__step--pending .ui-stepper__step-indicator {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-default);
    color: var(--color-text-muted);
}

.ui-stepper__step--active .ui-stepper__step-indicator {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: white;
    animation: ui-stepper-pulse 2s ease-in-out infinite;
}

.ui-stepper__step--completed .ui-stepper__step-indicator {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

/* Only completed steps should have green connectors */
.ui-stepper__step--completed .ui-stepper__connector {
    background: var(--color-success);
}

@keyframes ui-stepper-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-brand-primary) 0%, transparent);
    }
}

/* Step icon (checkmark) */
.ui-stepper__step-icon {
    width: calc(var(--indicator-size) * 0.6);
    height: calc(var(--indicator-size) * 0.6);
}

/* Step label */
.ui-stepper__step-label {
    margin-top: var(--space-2);
    font-size: var(--font-size);
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: center;
    transition: color 0.3s ease;
}

.ui-stepper__step--active .ui-stepper__step-label {
    color: var(--color-brand-primary);
    font-weight: 600;
}

.ui-stepper__step--completed .ui-stepper__step-label {
    color: var(--color-text-primary);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .ui-stepper--horizontal {
        flex-direction: column;
    }

    .ui-stepper--horizontal .ui-stepper__step {
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        padding-bottom: var(--space-4);
    }

    .ui-stepper--horizontal .ui-stepper__connector {
        position: absolute;
        top: calc(var(--indicator-size) + 8px);
        left: calc(var(--indicator-size) / 2);
        right: auto;
        bottom: 0;
        width: 2px;
        height: auto;
    }

    .ui-stepper--horizontal .ui-stepper__step-label {
        margin-left: var(--space-3);
        margin-top: calc(var(--indicator-size) / 4);
        text-align: left;
    }
}