////
///
/// Scrollspy Utility Mixins
/// ===========================================================================
///
/// CSS support for Bootstrap-style scrollspy navigation highlighting.
/// The actual scrollspy behavior requires JavaScript, but these styles
/// support the active state management.
///
/// @group Mixins.BodyMolecules.Navigation
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Use
// ============================================================================

@use "../../../dev" as *;
@use "../../../variables" as *;

// ============================================================================
// Scrollspy Container
// ============================================================================

/// Scrollspy container - enables scroll behavior tracking
/// @group Scrollspy
@mixin scrollspy--container {
    position: relative;
    height: 100%;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/// Scrollspy navbar - navigation that highlights based on scroll position
/// @group Scrollspy
@mixin scrollspy--nav {
    .nav_link {
        transition:
            color 0.15s ease-in-out,
            background-color 0.15s ease-in-out;

        &.active {
            color: var(--color_accent_primary);
        }
    }
}

/// Scrollspy list navigation variant
/// @group Scrollspy
@mixin scrollspy--list-nav {
    .nav_link {
        padding: q(8) q(12);
        border-left: q(2) solid transparent;

        &.active {
            color: var(--color_accent_primary);
            border-left-color: var(--color_accent_primary);
            background-color: var(--color_fill_secondary);
        }

        &:hover:not(.active) {
            border-left-color: var(--color_line_primary);
        }
    }
}

/// Scrollspy nested navigation (for table of contents)
/// @group Scrollspy
@mixin scrollspy--nested {
    nav {
        nav {
            padding-left: q(16);

            .nav_link {
                font-size: calc(var(--typescale-base) * 0.875);
            }
        }
    }
}

// ============================================================================
// Smooth Scroll Support
// ============================================================================

/// Apply to html/body for smooth scrolling
/// @group Scrollspy
@mixin smooth-scroll {
    scroll-behavior: smooth;

    @media (prefers-reduced-motion: reduce) {
        scroll-behavior: auto;
    }
}

/// Scroll padding for fixed header compensation
/// @group Scrollspy
@mixin scroll-padding($offset: q(80)) {
    scroll-padding-top: $offset;
}

// ============================================================================
// Scroll Position Indicators
// ============================================================================

/// Progress bar showing scroll position
/// @group Scrollspy
@mixin scroll-progress--bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: q(3);
    background-color: var(--color_accent_primary);
    z-index: 9999;
    transition: width 0.1s ease;
}

/// Scroll indicator dots
/// @group Scrollspy
@mixin scroll-progress--dots {
    position: fixed;
    right: q(16);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: q(8);
    z-index: 1000;

    .scroll_dot {
        width: q(10);
        height: q(10);
        border-radius: 50%;
        background-color: var(--color_fill_tertiary);
        border: q(2) solid var(--color_line_primary);
        cursor: pointer;
        transition: all 0.2s ease;

        &.active,
        &:hover {
            background-color: var(--color_accent_primary);
            border-color: var(--color_accent_primary);
            transform: scale(1.2);
        }
    }
}

// ============================================================================
// Utility Classes are defined in:
// src/scss/classes/body_molecules/navigation/_scrollspy.scss
// ============================================================================