////
///
/// Dropdown Component Mixins
/// ===========================================================================
///
/// Dropdown menu mixins for creating accessible dropdown menus.
///
/// @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 *;
@use "../../head_layout" as *;

// ============================================================================
// Dropdown Mixins
// ============================================================================

/// Base dropdown button styling
/// @group Dropdown
@mixin dropdown-menu-button--base {
    display: inline-flex;
    align-items: center;
    padding: q(12) q(16);
    font-size: q(16);
    font-weight: 500;
    color: var(--color_text_primary);
    background-color: var(--color_fill_secondary);
    border: q(1) solid var(--color_line_primary);
    border-radius: q(4);
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover,
    &:focus {
        background-color: var(--color_fill_tertiary);
    }
}

/// Dropdown container positioning
/// @group Dropdown
@mixin dropdown-menu--container {
    position: relative;
    display: inline-block;
}

/// Dropdown content styling (hidden by default)
/// @group Dropdown
@mixin dropdown-menu--content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: q(160);
    padding: q(4) 0;
    background-color: var(--color_fill_primary);
    border: q(1) solid var(--color_line_primary);
    border-radius: q(4);
    box-shadow:
        0 q(4) q(8) rgba(0, 0, 0, 0.1),
        0 q(2) q(4) rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

/// Dropdown content when shown
/// @group Dropdown
@mixin dropdown-menu--content-show {
    display: block;
}

/// Dropdown item styling
/// @group Dropdown
@mixin dropdown-menu--item {
    display: block;
    padding: q(10) q(16);
    color: var(--color_text_primary);
    text-decoration: none;
    transition: background-color 0.15s ease;

    &:hover {
        background-color: var(--color_fill_secondary);
    }
}

/// Dropdown divider
/// @group Dropdown
@mixin dropdown-menu--divider {
    height: 0;
    margin: q(4) 0;
    border-top: q(1) solid var(--color_line_primary);
}

// ============================================================================
// Dropdown Variant Mixins
// ============================================================================

/// Dropdown with hover trigger (CSS-only)
/// @group Dropdown
@mixin dropdown-menu--hover {
    &:hover .dropdown-content,
    &:focus-within .dropdown-content {
        display: block;
    }
}

/// Right-aligned dropdown content
/// @group Dropdown
@mixin dropdown-menu--content-right {
    left: auto;
    right: 0;
}

/// Dropdown content above trigger (dropup)
/// @group Dropdown
@mixin dropdown-menu--content-up {
    top: auto;
    bottom: 100%;
}
// ============================================================================
// Additional Dropdown Direction Mixins (Bootstrap-style)
// ============================================================================

/// Dropdown to the right (dropend)
/// @group Dropdown
@mixin dropdown-menu--content-end {
    top: 0;
    left: 100%;
    right: auto;
    margin-top: 0;
    margin-left: q(2);
}

/// Dropdown to the left (dropstart)
/// @group Dropdown
@mixin dropdown-menu--content-start {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: q(2);
}

/// Centered dropdown
/// @group Dropdown
@mixin dropdown-menu--content-center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

// ============================================================================
// Dropdown Menu Enhancements
// ============================================================================

/// Dropdown header
/// @group Dropdown
@mixin dropdown-menu--header {
    display: block;
    padding: q(8) q(16);
    margin-bottom: 0;
    font-size: calc(var(--typescale-base) * 0.875);
    color: var(--color_text_secondary);
    white-space: nowrap;
}

/// Dropdown text (non-interactive text)
/// @group Dropdown
@mixin dropdown-menu--text {
    display: block;
    padding: q(4) q(16);
    color: var(--color_text_primary);
}

/// Dropdown item active state
/// @group Dropdown
@mixin dropdown-menu--item-active {
    color: var(--color_text_inverted, #fff);
    background-color: var(--color_accent_primary);

    &:hover {
        background-color: var(--color_accent_primary);
    }
}

/// Dropdown item disabled state
/// @group Dropdown
@mixin dropdown-menu--item-disabled {
    color: var(--color_text_tertiary);
    pointer-events: none;
    background-color: transparent;
}

/// Dark dropdown variant
/// @group Dropdown
@mixin dropdown-menu--dark {
    background-color: var(--color_fill_04);
    border-color: var(--color_fill_04);

    .dropdown-item {
        color: var(--color_fill_01);

        &:hover,
        &:focus {
            background-color: rgba(255, 255, 255, 0.1);
        }
    }

    .dropdown-divider {
        border-color: var(--color_fill_03);
    }

    .dropdown-header {
        color: var(--color_text_tertiary);
    }
}

/// Auto-close dropdown option (data attribute helper)
/// @group Dropdown
/// For JS implementation, use data-auto-close="true|false|inside|outside"

/// Dropdown menu with icons
/// @group Dropdown
@mixin dropdown-menu--item-icon {
    display: flex;
    align-items: center;
    gap: q(8);

    .icon {
        width: q(16);
        height: q(16);
        flex-shrink: 0;
    }
}