/**
 * Flow Public Styles
 * Lightweight CSS for scroll progress indicators
 */

 :root {
    --flow-transition: width 0.1s ease-out, stroke-dashoffset 0.1s ease-out;
    --flow-z-index: 99999;
    --flow-color: #0073aa;
    --flow-bg: #e2e4e7;
}

.flow-progress-container {
    opacity: var(--flow-opacity, 1);
    mix-blend-mode: var(--flow-blend, normal);
}

/* Linear Progress Bar */
.flow-progress-container.flow-type-linear {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: var(--flow-z-index);
    pointer-events: none;
    background-color: transparent; /* Updated dynamically via JS */
}

.flow-progress-container.flow-type-linear.flow-pos-top {
    top: 0;
}

.flow-progress-container.flow-type-linear.flow-pos-bottom {
    bottom: 0;
}

.flow-progress-container.flow-type-linear .flow-bar {
    height: 100%;
    width: 0%;
    transition: var(--flow-transition);
    background-color: var(--flow-color, #0073aa);
}

/* Circular Progress */
.flow-progress-container.flow-type-circular {
    position: fixed;
    z-index: var(--flow-z-index);
    bottom: 20px;
    right: 20px;
    pointer-events: none;
}

.flow-progress-container.flow-type-circular svg {
    transform: rotate(-90deg);
}

.flow-progress-container.flow-type-circular circle {
    fill: none;
    stroke-width: 5;
    transition: var(--flow-transition);
}

.flow-progress-container.flow-type-circular .flow-bg {
    stroke: var(--flow-bg, #e2e4e7);
}

.flow-progress-container.flow-type-circular .flow-fg {
    stroke: var(--flow-color, #0073aa);
    stroke-linecap: round;
}

/* Dots Navigation */
.flow-progress-container.flow-type-dots {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--flow-z-index);
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    pointer-events: none;
}

.flow-progress-container.flow-type-dots.flow-pos-right {
    right: 15px;
}

.flow-progress-container.flow-type-dots.flow-pos-left {
    left: 15px;
}

.flow-progress-container.flow-type-dots .flow-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--flow-bg, #e2e4e7);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.flow-progress-container.flow-type-dots .flow-dot.active {
    background-color: var(--flow-color, #0073aa);
    transform: scale(1.3);
}

/* Dark Mode Support (Optional if theme overrides) */
@media (prefers-color-scheme: dark) {
    .flow-progress-container[data-flow-dark="true"] .flow-bg {
        stroke: #333 !important;
    }
    .flow-floating-circle {
        background-color: rgba(255,255,255,0.2) !important;
    }
}

/* Floating Capsule */
.flow-progress-container.flow-type-floating_text {
    position: fixed !important;
    z-index: var(--flow-z-index);
    top: 50% !important;
    transform: translateY(-50%) !important;
    background-color: var(--flow-bg, #e2e4e7);
    padding: 10px;
    border-radius: var(--flow-radius, 30px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    /* Default Right if nothing mapped */
    right: 20px;
}

.flow-floating-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.flow-floating-circle.active {
    background-color: var(--flow-color, #0073aa);
    transform: scale(1.2);
}

/* Position Overrides */
.flow-progress-container.flow-type-floating_text.flow-pos-left { left: 20px !important; right: auto !important; }
.flow-progress-container.flow-type-floating_text.flow-pos-right { right: 20px !important; left: auto !important; }