/* Progress Stepper Component */

.progress-stepper {
    /* Sizing Variables */
    --ps-circle-size: 24px;
    --ps-line-height: 8px;
    --ps-font-size: 14px;
    --ps-font-size-sm: 11px;

    /* Color Variables */
    --ps-color-start: #2888d2;
    --ps-color-end: #f3c935;

    --ps-color-completed: #2888d2;
    --ps-color-active: #2888d2;
    --ps-color-pending: #dee2e6;

    --ps-gradient: linear-gradient(90deg, var(--ps-color-start) 0%, var(--ps-color-end) 100%);

    --ps-text-completed: #fff;
    --ps-text-active: #fff;
    --ps-text-pending: #6c757d;

    --ps-tooltip-completed: #2888d2;
    --ps-tooltip-active: #2888d2;
    --ps-tooltip-pending: #6c757d;

    position: relative;
    width: 100%;
}

/* Modifiers for different sizes */
.progress-stepper.stepper-sm {
    --ps-circle-size: 18px;
    --ps-font-size: 12px;
    --ps-font-size-sm: 10px;
}

.progress-stepper.stepper-lg {
    --ps-circle-size: 48px;
    --ps-font-size: 20px;
    --ps-font-size-sm: 13px;
}

.progress-stepper .stepper-line-container {
    position: absolute;
    top: calc(var(--ps-circle-size) / 2.75);
    left: 0;
    z-index: 0;
    width: 100%;
}

.progress-stepper .stepper-line-container .d-flex {
    width: 100%;
}

.progress-stepper .stepper-line {
    height: var(--ps-line-height);
    background: var(--ps-color-pending);
    transition: background 0.3s ease, width 0.3s ease;

    --segment-start-color: color-mix(in srgb, var(--ps-color-end) calc(var(--line-start, 0) * 100%), var(--ps-color-start));
    --segment-end-color: color-mix(in srgb, var(--ps-color-end) calc(var(--line-end, 1) * 100%), var(--ps-color-start));
}

.progress-stepper .stepper-line.is-active {
    background: var(--ps-gradient);
    /* Fallback */
    background: linear-gradient(90deg, var(--segment-start-color) 0%, var(--segment-end-color) 100%);
    background-size: 100% 100%;
}

.progress-stepper .stepper-step {
    text-align: center;
    position: relative;
    z-index: 1;
    --ps-step-color: color-mix(in srgb, var(--ps-color-end) calc(var(--step-progress, 0) * 100%), var(--ps-color-start));
}

.progress-stepper .stepper-circle {
    width: var(--ps-circle-size);
    height: var(--ps-circle-size);
    font-size: var(--ps-font-size);
    background: var(--ps-color-pending);
    color: var(--ps-text-pending);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, color 0.3s ease;
}

.progress-stepper .stepper-step:hover .stepper-circle {
    transform: scale(1.15);
}

/* Status: Completed */
.progress-stepper .step-completed .stepper-circle {
    background: #2888d2;
    /* Fallback */
    background: var(--ps-step-color);
    color: var(--ps-text-completed);
}

.progress-stepper .step-completed .stepper-tooltip {
    color: var(--ps-tooltip-completed);
    /* Fallback */
    color: var(--ps-step-color);
    font-weight: 600;
}

/* Status: Active */
.progress-stepper .step-active .stepper-circle {
    background: #f3c935;
    /* Fallback */
    background: var(--ps-step-color);
    color: var(--ps-text-active);
}

.progress-stepper .step-active .stepper-tooltip {
    color: var(--ps-tooltip-active);
    /* Fallback */
    color: var(--ps-step-color);
    font-weight: 600;
}

/* Tooltip text */
.progress-stepper .stepper-tooltip {
    display: block;
    font-size: var(--ps-font-size-sm);
    color: var(--ps-tooltip-pending);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    transition: color 0.3s ease, max-width 0.2s;
}

.progress-stepper .stepper-step:hover .stepper-tooltip {
    overflow: visible;
    max-width: none;
}

/* Pulse Animation for Active step */
.progress-stepper .stepper-pulse {
    animation: stepperPulse 2s ease-in-out infinite;
    --pulse-color: rgba(40, 136, 210, 0.4);
    /* Fallback */
    --pulse-color: color-mix(in srgb, var(--ps-step-color) 40%, transparent);
    --pulse-color-transparent: rgba(40, 136, 210, 0);
    /* Fallback */
    --pulse-color-transparent: color-mix(in srgb, var(--ps-step-color) 0%, transparent);
}

@keyframes stepperPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 var(--pulse-color);
    }

    50% {
        box-shadow: 0 0 0 8px var(--pulse-color-transparent);
    }
}