// ============================================================================
// Imports
// ============================================================================
@use "sass:map";
@use "sass:math";
@use "../soul_type" as *;
@use "../body_atoms" as *;
@use "../../dev" as *;
@use "../../variables" as *;
@use "../soul_object" as *;

// ============================================================================
// Sidebar Control Button
// ============================================================================
@mixin sidebar__control {
    @include reset_bleed;
    position: relative;
    width: q(20);
    height: q(20);
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    pointer-events: auto;
    overflow: visible;
}

// ============================================================================
// Sidebar Menu Panel
// ============================================================================
@mixin sidebar__menu {
    position: relative;
    transition: width 0.3s ease;
    width: 0;
    display: none;
    visibility: hidden;
    overflow: visible;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    @include sizing--border;

    &.active {
        display: block;
        visibility: visible;
        width: q(200);
    }

    .sidebar__control {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateX(-100%) translateY(-50%);
        z-index: 9999;

        .flipper--right {
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
            position: relative;
            z-index: 9999;

            .flipper__icon {
                display: block;
                width: 100%;
                height: 100%;
                background-color: red; // for visibility/debug
                position: relative;
            }
        }
    }
}

// ============================================================================
// Sidebar Base
// ============================================================================

@mixin sidebar--base {
    position: relative;
    display: flex;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    .sidebar__menu {
        @include sidebar__menu;
    }

    .flipper--left,
    .flipper--right {
        @include sidebar__control;
    }
}

// ============================================================================
// Left Sidebar Layout (menu on left)
// ============================================================================

@mixin sidebar--left {
    @include sidebar--base;
    flex-direction: row;
    // overflow: hidden;
    transition: width 0.3s ease;
    .sidebar__menu {
        border-right: q(1) solid var(--color_text_primary);
    }
}

// ============================================================================
// Right Sidebar Layout (menu on right)
// ============================================================================
@mixin sidebar--right {
    @include sidebar--base;
    flex-direction: row-reverse;
    // overflow: hidden;
    transition: width 0.3s ease;
    .sidebar__menu {
        border-left: q(1) solid var(--color_text_primary);
    }
}