@import "../variables/variables";

// Recursive Mixin to build repetative class declarations for explicit dev overrides for various breakpoints
@mixin layout-grid-templates($breakpoint, $repeatTo, $i: 1) {
    @if $i <= $repeatTo {
        .layout-grid[data-columns-#{$breakpoint}="#{$i}"] > ul {
            grid-template-columns: repeat($i, 1fr);
        }

        @include layout-grid-templates($breakpoint, $repeatTo, ($i + 1));
    }
}

.layout-grid {
    --layout-grid-cell-height-min: 0;
    --layout-grid-cell-gap: var(--spacing-100);
    --layout-grid-columns-min: 1;
    --layout-grid-columns-xs: 2;
    --layout-grid-columns-sm: 3;
    --layout-grid-columns-md: 4;
    --layout-grid-columns-lg: 6;
    --layout-grid-columns-xl: 8;
    --layout-grid-columns-xl2: 10;
    --layout-grid-columns-xl3: 12;
    --layout-grid-columns-xl4: 14;

    container: layout-grid-container / inline-size;
}

// smallest explicit dev display rule overrides
// for default (any screen size) in the rules
.layout-grid[data-columns-min="1"] > ul {
    grid-template-columns: repeat(1, 1fr);
}

.layout-grid[data-columns-min="2"] > ul {
    grid-template-columns: repeat(2, 1fr);
}

.layout-grid[data-columns-min="3"] > ul {
    grid-template-columns: repeat(3, 1fr);
}

.layout-grid[data-columns-min="4"] > ul {
    grid-template-columns: repeat(4, 1fr);
}

// smallest explicit dev display rule overrides
// for when container queries are supported
// to use the container sizes in the rules
@container layout-grid-container (inline-size < #{$_screen-size-XS}) {
    .layout-grid[data-columns-min="1"] > ul {
        grid-template-columns: repeat(1, 1fr);
    }

    .layout-grid[data-columns-min="2"] > ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .layout-grid[data-columns-min="3"] > ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .layout-grid[data-columns-min="4"] > ul {
        grid-template-columns: repeat(4, 1fr);
    }
}

.layout-grid > ul {
    display: grid;
    gap: var(--layout-grid-cell-gap);
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(var(--layout-grid-columns-min), 1fr);
    margin: 0;
    padding: 0;
    width: 100%;
}

.layout-grid > ul > li {
    display: inline-block;
    min-height: var(--layout-grid-cell-height-min);
    width: 100%;
}

.layout-grid > ul > li::marker {
    content: "";
    font-size: 0;
}

/* Responsive Layouts */
// first, we define media queries as a fallback for browsers not supporting container queries
@supports not (contain: inline-size) {
    @media (min-width: $_screen-size-XS) {
        // Responsive columns based on XS breakpoint per button type
        .layout-grid > ul {
            grid-template-columns: repeat(var(--layout-grid-columns-xs), 1fr);
        }

        // Explicit developer overrides for XS breakpoint for exception cases
        @include layout-grid-templates(xs, 16);
    }

    @media (min-width: $_screen-size-SM) {
        // Responsive columns based on SM breakpoint per button type
        .layout-grid > ul {
            grid-template-columns: repeat(var(--layout-grid-columns-sm), 1fr);
        }

        // Explicit developer overrides for SM breakpoint for exception cases
        @include layout-grid-templates(sm, 16);
    }

    @media (min-width: $_screen-size-MD) {
        // Responsive columns based on MD breakpoint per button type
        .layout-grid > ul {
            grid-template-columns: repeat(var(--layout-grid-columns-md), 1fr);
        }

        // Explicit developer overrides for MD breakpoint for exception cases
        @include layout-grid-templates(md, 16);
    }

    @media (min-width: $_screen-size-LG) {
        // Responsive columns based on LG breakpoint per button type
        .layout-grid > ul {
            grid-template-columns: repeat(var(--layout-grid-columns-lg), 1fr);
        }

        // Explicit developer overrides for LG breakpoint for exception cases
        @include layout-grid-templates(lg, 16);
    }

    @media (min-width: $_screen-size-XL) {
        // Responsive columns based on XL breakpoint per button type
        .layout-grid > ul {
            grid-template-columns: repeat(var(--layout-grid-columns-xl), 1fr);
        }

        // Explicit developer overrides for XL breakpoint for exception cases
        @include layout-grid-templates(xl, 16);
    }

    @media (min-width: $_screen-size-XL2) {
        // Responsive columns based on XL2 breakpoint per button type
        .layout-grid > ul {
            grid-template-columns: repeat(var(--layout-grid-columns-xl2), 1fr);
        }

        // Explicit developer overrides for XL2 breakpoint for exception cases
        @include layout-grid-templates(xl2, 16);
    }

    @media (min-width: $_screen-size-XL3) {
        // Responsive columns based on XL3 breakpoint per button type
        .layout-grid > ul {
            grid-template-columns: repeat(var(--layout-grid-columns-xl3), 1fr);
        }

        // Explicit developer overrides for XL3 breakpoint for exception cases
        @include layout-grid-templates(xl3, 16);
    }

    @media (min-width: $_screen-size-XL4) {
        // Responsive columns based on XL4 breakpoint per button type
        .layout-grid > ul {
            grid-template-columns: repeat(var(--layout-grid-columns-xl4), 1fr);
        }

        // Explicit developer overrides for XL4 breakpoint for exception cases
        @include layout-grid-templates(xl4, 16);
    }
}

// For browsers that DO support container queries
@container layout-grid-container (inline-size >= #{$_screen-size-XS}) {
    // Responsive columns based on XS breakpoint per button type
    .layout-grid > ul {
        grid-template-columns: repeat(var(--layout-grid-columns-xs), 1fr);
    }

    // Explicit developer overrides for XS breakpoint for exception cases
    @include layout-grid-templates(xs, 16);
}

@container layout-grid-container (inline-size >= #{$_screen-size-SM}) {
    // Responsive columns based on SM breakpoint per button type
    .layout-grid > ul {
        grid-template-columns: repeat(var(--layout-grid-columns-sm), 1fr);
    }

    // Explicit developer overrides for SM breakpoint for exception cases
    @include layout-grid-templates(sm, 16);
}

@container layout-grid-container (inline-size >= #{$_screen-size-MD}) {
    // Responsive columns based on MD breakpoint per button type
    .layout-grid > ul {
        grid-template-columns: repeat(var(--layout-grid-columns-md), 1fr);
    }

    // Explicit developer overrides for MD breakpoint for exception cases
    @include layout-grid-templates(md, 16);
}

@container layout-grid-container (inline-size >= #{$_screen-size-LG}) {
    // Responsive columns based on LG breakpoint per button type
    .layout-grid > ul {
        grid-template-columns: repeat(var(--layout-grid-columns-lg), 1fr);
    }

    // Explicit developer overrides for LG breakpoint for exception cases
    @include layout-grid-templates(lg, 16);
}

@container layout-grid-container (inline-size >= #{$_screen-size-XL}) {
    // Responsive columns based on XL breakpoint per button type
    .layout-grid > ul {
        grid-template-columns: repeat(var(--layout-grid-columns-xl), 1fr);
    }

    // Explicit developer overrides for XL breakpoint for exception cases
    @include layout-grid-templates(xl, 16);
}

@container layout-grid-container (inline-size >= #{$_screen-size-XL2}) {
    // Responsive columns based on XL2 breakpoint per button type
    .layout-grid > ul {
        grid-template-columns: repeat(var(--layout-grid-columns-xl), 1fr);
    }

    // Explicit developer overrides for XL2 breakpoint for exception cases
    @include layout-grid-templates(xl2, 16);
}

@container layout-grid-container (inline-size >= #{$_screen-size-XL3}) {
    // Responsive columns based on XL3 breakpoint per button type
    .layout-grid > ul {
        grid-template-columns: repeat(var(--layout-grid-columns-xl3), 1fr);
    }

    // Explicit developer overrides for XL3 breakpoint for exception cases
    @include layout-grid-templates(xl3, 16);
}

@container layout-grid-container (inline-size >= #{$_screen-size-XL4}) {
    // Responsive columns based on XL4 breakpoint per button type
    .layout-grid > ul {
        grid-template-columns: repeat(var(--layout-grid-columns-xl4), 1fr);
    }

    // Explicit developer overrides for XL4 breakpoint for exception cases
    @include layout-grid-templates(xl4, 16);
}
