// styles/components/stepper.scss
// Stepper component 
// All colors now use CSS variables for theme consistency

@use 'variables' as vars;

.hi-stepper {
    display: flex;
    gap: 0;
    padding: 1rem 0;
}

// Step wrapper
.hi-step {
    display: flex;
    align-items: center;
    position: relative;
    transition: all vars.$hikari-transition-base;
    flex: 1;
}

// Step number circle
.hi-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--hi-text-secondary, var(--hi-text-secondary, rgba(80, 97, 109, 0.65)));
    border: 2px solid var(--hi-color-border, var(--hi-border, #C4D8DA));
    background-color: var(--hi-surface, rgba(255, 255, 255, 0.7));
    box-shadow: var(--hi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    transition:
        all vars.$hikari-transition-base,
        box-shadow vars.$hikari-transition-base;
    z-index: 2;
    flex-shrink: 0;
}

// Step connector (horizontal)
.hi-step-connector {
    flex: 1;
    height: 2px;
    background-color: var(--hi-color-border, var(--hi-border, #C4D8DA));
    transition: background-color vars.$hikari-transition-base;
    margin: 0 12px;
    align-self: center;
}

// Step connector (vertical)
.hi-step-connector-vertical {
    position: absolute;
    width: 2px;
    background-color: var(--hi-color-border, var(--hi-border, #C4D8DA));
    top: 40px;
    left: 20px;
    bottom: -20px;
    transition: background-color vars.$hikari-transition-base;
}

// Step states - Pending (default)
.hi-step-pending .hi-step-number {
    background-color: var(--hi-surface, rgba(255, 255, 255, 0.7));
    border-color: var(--hi-color-border, var(--hi-border, #C4D8DA));
    color: var(--hi-text-secondary, rgba(80, 97, 109, 0.65));
}

// Active state with glow
.hi-step-active .hi-step-number {
    background-color: var(--hi-color-primary, var(--hi-primary, #FFB3A7));
    border-color: var(--hi-color-primary, var(--hi-primary, #FFB3A7));
    color: var(--hi-badge-text, #FFFFFF);
    box-shadow:
        var(--hi-glow-primary-md, 0 0 16px rgba(255, 179, 167, 0.5)),
        var(--hi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    transform: scale(1.08);
}

// Finished / completed state
.hi-step-finished .hi-step-number {
    background-color: var(--hi-success, #0EB840);
    border-color: var(--hi-success, #0EB840);
    color: var(--hi-badge-text, #FFFFFF);
    box-shadow: 0 2px 8px rgba(14, 184, 64, 0.15);
}

// Last step - no connector needed
.hi-step-last {
    padding-right: 0;
}

// Horizontal layout
.hi-stepper-horizontal {
    flex-direction: row;
    align-items: flex-start;
}

.hi-stepper-horizontal .hi-step-connector {
    min-width: 2rem;
}

.hi-stepper-horizontal .hi-step {
    padding-right: 0;
}

.hi-stepper-horizontal .hi-step:last-child {
    padding-right: 0;
}

// Vertical layout
.hi-stepper-vertical {
    flex-direction: column;
    align-items: flex-start;
}

.hi-stepper-vertical .hi-step {
    flex-direction: row;
    padding-bottom: 2rem;
}

.hi-stepper-vertical .hi-step:last-child {
    padding-bottom: 0;
}

//  effects - active pulse animation
.hi-step-active .hi-step-number {
    animation: hi-stepper-pulse 2s ease-in-out infinite;
}

@keyframes hi-stepper-pulse {
    0%, 100% {
        transform: scale(1.08);
        box-shadow:
            var(--hi-glow-primary-md, 0 0 16px rgba(255, 179, 167, 0.5)),
            var(--hi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    }
    50% {
        transform: scale(1.12);
        box-shadow:
            var(--hi-glow-primary-lg, 0 0 24px rgba(255, 179, 167, 0.4)),
            var(--hi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    }
}

// Connector fill for finished steps
.hi-step-finished + .hi-step .hi-step-connector,
.hi-step-finished > .hi-step-connector {
    background-color: var(--hi-success, #0EB840);
}

// Tairitsu dark theme - all using CSS variables
[data-theme="tairitsu"] {
    .hi-step-number {
        background-color: var(--hi-card-bg, rgba(240, 240, 245, 0.06));
        border-color: var(--hi-border, #303448);
        color: var(--hi-text-secondary, #B3B8C7);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .hi-step-pending .hi-step-number {
        background-color: var(--hi-card-bg, rgba(240, 240, 245, 0.06));
        border-color: var(--hi-border, #303448);
        color: var(--hi-text-disabled, #6B7280);
    }

    .hi-step-active .hi-step-number {
        background-color: var(--hi-primary, #144A74);
        border-color: var(--hi-primary, #144A74);
        color: var(--hi-badge-text, #F0F0F5);
        box-shadow:
            0 4px 16px rgba(20, 74, 116, 0.5),
            0 0 24px rgba(20, 74, 116, 0.3);
    }

    .hi-step-finished .hi-step-number {
        background-color: var(--hi-success, #0EB840);
        border-color: var(--hi-success, #0EB840);
        color: var(--hi-badge-text, #F0F0F5);
        box-shadow: 0 2px 8px rgba(14, 184, 64, 0.15);
    }

    .hi-step-connector,
    .hi-step-connector-vertical {
        background-color: var(--hi-border, #303448);
    }

    .hi-step-finished + .hi-step .hi-step-connector,
    .hi-step-finished > .hi-step-connector {
        background-color: var(--hi-success, #0EB840);
    }
}

// Responsive adjustments
@media (max-width: 768px) {
    .hi-stepper-horizontal {
        flex-direction: column;
        align-items: flex-start;
    }

    .hi-stepper-horizontal .hi-step {
        flex-direction: row;
        padding-right: 0;
        padding-bottom: 1.5rem;
    }

    .hi-stepper-horizontal .hi-step:last-child {
        padding-bottom: 0;
    }

    .hi-step-number {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .hi-step-connector-vertical {
        left: 16px;
        top: 32px;
        bottom: -16px;
    }

    .hi-stepper-vertical .hi-step {
        padding-bottom: 1.5rem;
    }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
    .hi-step-number,
    .hi-step,
    .hi-step-connector,
    .hi-step-connector-vertical {
        transition: none;
    }

    .hi-step-active .hi-step-number {
        animation: none;
        transform: scale(1.08);
    }
}
