////
///
/// Responsive Stacked Table Mixins
/// ===========================================================================
///
/// Foundation-style responsive stacked table mixins that transform tables
/// into card-style stacked layouts on mobile devices.
///
/// @group Mixins.BodyMolecules.Table
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

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

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

// ============================================================================
// Stacked Table Base Mixin
// ============================================================================

/// Transform table into stacked card layout on mobile
/// @param {String} $breakpoint [q(768)] - Breakpoint below which table stacks
/// @group Table.Responsive
@mixin table--stacked($breakpoint: q(768)) {
    width: 100%;

    @media screen and (max-width: $breakpoint) {
        // Hide table header on mobile
        thead {
            display: none;
        }

        // Make each row a card
        tbody tr {
            display: block;
            margin-bottom: q(16);
            border: q(1) solid var(--color_line_secondary);
            border-radius: var(--primitive-corner-radius-xs);
            background-color: var(--color_fill_primary);

            &:last-child {
                margin-bottom: 0;
            }
        }

        // Stack each cell
        tbody td {
            display: block;
            padding: q(12) q(16);
            text-align: right;
            border-bottom: q(1) solid var(--color_line_secondary);

            &:last-child {
                border-bottom: none;
            }

            // Show data-label as pseudo-element
            &::before {
                content: attr(data-label);
                float: left;
                font-weight: 600;
                color: var(--color_text_primary);
                text-transform: none;
            }

            // Empty cell handling
            &:empty {
                display: none;
            }
        }

        // Remove colgroup styling
        colgroup {
            display: none;
        }
    }
}

// ============================================================================
// Stacked Table Variants
// ============================================================================

/// Stacked table with left-aligned values
/// @param {String} $breakpoint [q(768)] - Breakpoint below which table stacks
/// @group Table.Responsive
@mixin table--stacked-left($breakpoint: q(768)) {
    @include table--stacked($breakpoint);

    @media screen and (max-width: $breakpoint) {
        tbody td {
            text-align: left;

            &::before {
                display: block;
                float: none;
                margin-bottom: q(4);
                font-size: q(11);
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: var(--color_text_tertiary);
            }
        }
    }
}

/// Stacked table with block-style labels
/// @param {String} $breakpoint [q(768)] - Breakpoint below which table stacks
/// @group Table.Responsive
@mixin table--stacked-block($breakpoint: q(768)) {
    @include table--stacked($breakpoint);

    @media screen and (max-width: $breakpoint) {
        tbody td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: right;

            &::before {
                float: none;
                flex-shrink: 0;
                margin-right: q(16);
            }
        }
    }
}

// ============================================================================
// Horizontal Scroll Fallback
// ============================================================================

/// Wrapper for horizontal scrolling tables
/// @group Table.Responsive
@mixin table-scroll-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    // Scroll indicator shadow
    background:
        linear-gradient(to right, var(--color_fill_primary) 30%, transparent),
        linear-gradient(to right, transparent, var(--color_fill_primary) 70%)
            100% 0,
        radial-gradient(
            farthest-side at 0 50%,
            rgba(0, 0, 0, 0.15),
            transparent
        ),
        radial-gradient(
                farthest-side at 100% 50%,
                rgba(0, 0, 0, 0.15),
                transparent
            )
            100% 0;
    background-repeat: no-repeat;
    background-size:
        40px 100%,
        40px 100%,
        14px 100%,
        14px 100%;
    background-attachment: local, local, scroll, scroll;

    table {
        width: max-content;
        min-width: 100%;
    }
}

/// Minimal scroll container without shadows
/// @group Table.Responsive
@mixin table-scroll-container--minimal {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    table {
        width: max-content;
        min-width: 100%;
    }
}

// ============================================================================
// Responsive Table with Scroll Indicator
// ============================================================================

/// Table with scroll indicator on mobile
/// @param {String} $breakpoint [q(768)] - Breakpoint below which indicator shows
/// @group Table.Responsive
@mixin table--with-scroll-indicator($breakpoint: q(768)) {
    position: relative;

    @media screen and (max-width: $breakpoint) {
        &::after {
            content: "← Scroll →";
            display: block;
            text-align: center;
            padding: q(8);
            font-size: q(12);
            color: var(--color_text_tertiary);
            background-color: var(--color_fill_secondary);
            border-radius: var(--primitive-corner-radius-xs);
            margin-top: q(8);
        }

        &.has-scrolled::after {
            display: none;
        }
    }
}

// ============================================================================
// Responsive Table Density Variants
// ============================================================================

/// Compact stacked table
/// @param {String} $breakpoint [q(768)] - Breakpoint below which table stacks
/// @group Table.Responsive
@mixin table--stacked-compact($breakpoint: q(768)) {
    @include table--stacked($breakpoint);

    @media screen and (max-width: $breakpoint) {
        tbody tr {
            margin-bottom: q(8);
        }

        tbody td {
            padding: q(8) q(12);
            font-size: q(13);

            &::before {
                font-size: q(12);
            }
        }
    }
}

/// Comfortable stacked table with more spacing
/// @param {String} $breakpoint [q(768)] - Breakpoint below which table stacks
/// @group Table.Responsive
@mixin table--stacked-comfortable($breakpoint: q(768)) {
    @include table--stacked($breakpoint);

    @media screen and (max-width: $breakpoint) {
        tbody tr {
            margin-bottom: q(24);
            padding: q(8);
        }

        tbody td {
            padding: q(16) q(20);

            &::before {
                font-size: q(14);
            }
        }
    }
}

// ============================================================================
// Stacked Table with Header Row
// ============================================================================

/// Stacked table that keeps first column as card header
/// @param {String} $breakpoint [q(768)] - Breakpoint below which table stacks
/// @group Table.Responsive
@mixin table--stacked-header($breakpoint: q(768)) {
    @include table--stacked($breakpoint);

    @media screen and (max-width: $breakpoint) {
        tbody td:first-child {
            background-color: var(--color_fill_secondary);
            font-weight: 600;
            text-align: left;
            border-bottom: q(2) solid var(--color_line_primary);

            &::before {
                display: none;
            }
        }
    }
}