// ============================================================================
// Imports
// ============================================================================
@use "sass:map";

@use "../soul_type" as *;
@use "../body_atoms" as *;
@use "../../dev" as *;
@use "../../variables" as *;
@use "../soul_object" as *;

// ============================================================================
// rail Base Styles
// ============================================================================
/// Rail | Scrollable
/// ---------------------------------------------------------------------------
/// Ensures the rail is scrollable without pushing siblings off screen.
///
/// @group Layout
@mixin rail--base {
    position: relative;
    // overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    // overflow: auto;
    // overflow-y: scroll;
    // -ms-overflow-style: none; // Internet Explorer 10+
    // scrollbar-width: none; // Firefox

    // Prevent growing beyond its container
    max-height: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;

    // In flex or grid layouts, this avoids overflow pushing others
    flex-shrink: 1;
    flex-grow: 1;

    // Reset box sizing for accurate layout calculation
    @include sizing--border;

    // Keep scrolling enabled, just hide the bar
    -ms-overflow-style: none; // IE/Edge Legacy
    scrollbar-width: none; // Firefox
    &::-webkit-scrollbar {
        // Chrome/Safari/Edge (Blink/WebKit)
        width: 0;
        height: 0;
        display: none;
    }

    // 2) Placeholder — for @extend patterns
    %scrollbar-hidden {
        -ms-overflow-style: none;
        scrollbar-width: none;
        &::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }
    }
}

// ============================================================================
// ============================================================================
// ============================================================================
// ============================================================================
// ============================================================================
// ============================================================================
// ============================================================================
// ============================================================================
// ============================================================================
// ============================================================================

/// frame | Scrollable Center
/// ---------------------------------------------------------------------------
/// Makes the center area scrollable.
///
// @mixin frame_main__area--center {
//     // @include frame__area(middle_center);
//     overflow-y: auto;
//     // overflow-y: scroll;
//     overflow-x: hidden;
//     -webkit-overflow-scrolling: touch;
// }

/// Base rail Style
/// ---------------------------------------------------------------------------
/// Shared styles for all rails regardless of side.
///
@mixin rail_base {
    // Grid
    display: grid;
    gap: 0;

    @include sizing--border;
    pointer-events: all;

    background-color: var(--color_text_primary);
    color: var(--color_fill_primary);

    // Typography: Uniform text styling
    font-size: basepoint(3); // or a fixed value like q(16)
    line-height: baseline(3); // consistent vertical rhythm

    // Layering and boundary
    // z-index: z("rail");
    // overflow: hidden;

    // Ensure safe scroll context for dropdowns
    position: relative;

    // align-items: stretch;
}

@mixin rail--inverted {
    background-color: var(--color_fill_primary);
    color: var(--color_text_primary);
}

// @include font--size('03');

// ============================================================================
// rail | Horizontal (Top/Bottom)
// ============================================================================

///
/// Horizontal rail (Top or Bottom)
/// ---------------------------------------------------------------------------
///
/// A layout container rail with fixed height and shadow, using CSS Grid.
/// Three columns: left, center, right
///
@mixin rail--horizontal {
    @include rail_base;

    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: calc(q(40));
    grid-template-areas: "rail_area--horizontal_left rail_area--horizontal_center rail_area--horizontal_right";

    // Layout
    width: 100%;
    height: calc(q(40));
    padding-left: calc(q(4));
    padding-right: calc(q(4));
    align-items: center;
}

/// Top rail
@mixin rail--top {
    @include rail--horizontal;
    border-bottom: q(1) solid var(--color_text_primary);
}

/// Bottom rail
@mixin rail--bottom {
    @include rail--horizontal;
    border-top: $q solid var(--color_text_primary);
}

// ============================================================================
// rail | Vertical (Left/Right)
// ============================================================================

///
/// Vertical rail (Left or Right)
/// ---------------------------------------------------------------------------
/// Three rows: top, center, bottom
///
@mixin rail--vertical {
    grid-area: rail;

    // @include rail_base;

    grid-template-columns: calc(q(40));
    // grid-template-rows: 1fr auto 1fr;
    grid-template-areas:
        "rail_area--vertical_top"
        "rail_area--vertical_center"
        "rail_area--vertical_bottom";
    max-height: 100%;
    height: 100%;

    display: none;
    visibility: hidden;
    width: 0;
    overflow: auto;
    overflow-y: scroll;
    -ms-overflow-style: none; // Internet Explorer 10+
    scrollbar-width: none; // Firefox
    ::-webkit-scrollbar {
        display: none; // Safari and Chrome
    }
    &.active {
        display: block;
        // display: unset;
        visibility: visible;
        width: q(200);
    }
}

// .rail--inverted {
//     @include rail--inverted;
// }

// .rail--inside {
//     @include rail--inside;
// }