@use "sass:list";
@use "../settings/breakpoints" as *;
// @use "../settings/variables" as *;
// Import the grid only after this override
// Override the default grid settings and remove gutters.
@mixin row-cols($count) {
    > * {
        flex: 0 0 auto;
        width: percentage(divide(1, $count));
    }
}
@mixin make-col($size: false, $columns: $grid-columns) {
    @if $size {
        // flex: 0 0 auto;
        width: percentage(divide($size, $columns));
    } @else {
        flex: 1 1 0;
        max-width: 100%;
    }
}

[class^="col-xs-"],
[class^="col-sm-"],
[class^="col-md-"],
[class^="col-lg-"],
[class^="col-xl-"] {
    flex: 0 0 auto;
}

@mixin make-grid-columns(
    $columns: $grid-columns,
    $gutter: $grid-gutter-width,
    $breakpoints: $grid-breakpoints
) {
    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            // Provide basic `.col-{bp}` classes for equal-width flexbox columns
            .col#{$infix} {
                flex: 1 0 0;
            }

            .row-cols#{$infix}-auto > * {
                @include make-col-auto();
            }

            // @if $grid-row-columns > 0 {
            //     @for $i from 1 through $grid-row-columns {
            //         .row-cols#{$infix}-#{$i} {
            //             @include row-cols($i);
            //         }
            //     }
            // }

            .col#{$infix}-auto {
                @include make-col-auto();
            }

            @if $columns > 0 {
                @for $i from 1 through $columns {
                    .col#{$infix}-#{$i} {
                        @include make-col($i, $columns);
                    }
                }

                // `$columns - 1` because offsetting by the width of an entire row isn't possible
                @for $i from 0 through ($columns - 1) {
                    @if not($infix == "" and $i == 0) {
                        // Avoid emitting useless .offset-0
                        .offset#{$infix}-#{$i} {
                            @include make-col-offset($i, $columns);
                        }
                    }
                }
            }
        }
    }
}

@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            @if $columns > 0 {
                @for $i from 1 through $columns {
                    .g-col#{$infix}-#{$i} {
                        grid-column: auto / span $i;
                    }
                }

                // Start with `1` because `0` is an invalid value.
                // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
                @for $i from 1 through ($columns - 1) {
                    .g-start#{$infix}-#{$i} {
                        grid-column-start: $i;
                    }
                }
            }
        }
    }
}
@import "~bootstrap/scss/grid";

// -----------------------------------------
// Extend the grid with additional columns
@mixin add-on-columns($columns, $gutter, $breakpoints) {
    @each $breakpoint in $breakpoints {
        @include breakpoint($breakpoint) {
            @if $columns > 0 {
                @for $i from 1 through $columns {
                    .col-#{$breakpoint}-#{$i} {
                        @include make-col($i, $columns);
                    }
                }
            }
        }
    }
}
@include add-on-columns(12, 1.5rem, ("mob", "tab", "desk"));

// =========================================
// --> Bring only the require for a layout
$sparkUtil: (
    "border-style": (
        property: border-style,
        class: "-",
        values: (
            dashed: dashed,
            dotted: dotted,
            none: none,
            solid: solid,
        ),
    ),
);

$sparkOptionalUtils: (
    margin: mapMerge(
            map-get-multiple(
                $utilities,
                ("margin", "margin-bottom", "margin-top", "margin-x", "margin-y")
            ),
            (
                "margin-right": (
                    responsive: true,
                    property: margin-right,
                    class: mr,
                    values: map-merge(
                            $spacers,
                            (
                                auto: auto,
                            )
                        ),
                ),
                "margin-left": (
                    responsive: true,
                    property: margin-left,
                    class: ml,
                    values: map-merge(
                            $spacers,
                            (
                                auto: auto,
                            )
                        ),
                ),
            )
        ),
    padding: mapMerge(
            map-get-multiple(
                $utilities,
                ("padding", "padding-bottom", "padding-top", "padding-x", "padding-y")
            ),
            (
                "padding-right": (
                    responsive: true,
                    property: padding-right,
                    class: pr,
                    values: $spacers,
                ),
                "padding-left": (
                    responsive: true,
                    property: padding-left,
                    class: pl,
                    values: $spacers,
                ),
            )
        ),
    width: (
        "width-percent": (
            responsive: true,
            property: width,
            class: w,
            values: $percentSizes,
        ),
    ),
    height: (
        "height-percent": (
            responsive: true,
            property: height,
            class: h,
            values: map-merge(
                    $percentSizes,
                    (
                        vh: 100vh,
                    )
                ),
        ),
    ),
    flex: map-get-multiple(
            $utilities,
            (
                "align-content",
                "align-items",
                "flex",
                "flex-direction",
                "flex-grow",
                "flex-wrap",
                "justify-content",
                "order"
            )
        ),
    float: (
        "float": (
            responsive: true,
            property: float,
            values: (
                left: left,
                right: right,
                none: none,
            ),
        ),
    ),
    display: map-get-multiple($utilities, ("display")),
);

// -----------------------------------------
// Remap to correct or override the utilities
@each $key, $value in $miniUtilsMapping {
    @if $value {
        $sparkUtil: map-merge($sparkUtil, map-get($sparkOptionalUtils, $key));
    }
}

// -----------------------------------------
// Start building the classes
$targetBreakpoints: map-get-multiple($xBreakpoints, $screenSizes);
$responsiveClasses: ();

// produce the standard utility classes
@each $key, $value in $sparkUtil {
    @include generate-utility($value);

    @if (type-of($value) == "map") {
        @if (map-get($value, responsive)) {
            $responsiveClasses: append($responsiveClasses, $value);
        }
    }
}

// produce the responsive utility classes
@if length($responsiveClasses) > 0 {
    @each $breakpoint in map-keys($targetBreakpoints) {
        $suffix: -#{$breakpoint};
        @include breakpoint($breakpoint) {
            @each $value in $responsiveClasses {
                @include generate-utility($value, $suffix);
            }
        }
    }
}

.container,
.container-fluid,
.container-full {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
    max-width: clamp(320px, 100%, 1400px);
}

:root {
    --bs-max-width: 100%;
    --bs-max-width-lg: 1024px;
    --bs-max-width-xl: 1200px;
    --bs-max-width-xxl: 1400px;
    --bs-container-pad-xs: 15px;
    --bs-container-pad-sm: 20px;
    --bs-container-pad-md: 30px;
    --bs-container-pad-lg: 40px;
    --bs-container-pad-xl: 40px;
    --bs-container-pad-xxl: 40px;
}
.container-fluid,
.container-full {
    max-width: 100%;
}

@media (min-width: 0) {
    :root {
        --x-container-max-width: var(--bs-max-width);
        --x-container-pad: var(--bs-container-pad-xs);
    }
}
@media (min-width: 576px) {
    :root {
        --x-container-max-width: var(--bs-max-width);
        --x-container-pad: var(--bs-container-pad-sm);
    }
}
@media (min-width: 768px) {
    :root {
        --x-container-max-width: var(--bs-max-width);
        --x-container-pad: var(--bs-container-pad-md);
    }
}
@media (min-width: 992px) {
    :root {
        --x-container-max-width: var(--bs-max-width-lg);
        --x-container-pad: var(--bs-container-pad-lg);
    }
}
@media (min-width: 1200px) {
    :root {
        --x-container-max-width: var(--bs-max-width-xl);
        --x-container-pad: var(--bs-container-pad-xl);
    }
}
@media (min-width: 1400px) {
    :root {
        --x-container-max-width: var(--bs-max-width-xxl);
        --x-container-pad: var(--bs-container-pad-xxl);
    }
}

.container {
    max-width: var(--x-container-max-width);
    padding-left: var(--x-container-pad);
    padding-right: var(--x-container-pad);
}
// =========================================
// --> Font Sizes
// --------------------------
:root {
    --x-base-font-size: 1;
    --x-base-line-height: 1.5;
    --x-font-size: 15px;
    --x-base-div-width: 1040;
    --x-input-height: 40px;
}
// TABLETS
@include breakpoint(tablet) {
    :root {
        --x-base-font-size: 0.85;
        --x-base-div-width: 740;
    }
}
// MOBILES UNDER 600PX;
@include breakpoint(mobile) {
    :root {
        --x-base-font-size: 0.75;
        --x-base-div-width: 360;
    }
}

hr,
.hr,
.ruler,
.divider {
    margin: 0;
    border-top: 1px dashed var(--x-hr-color, #333333);
    display: block;
    height: 1px;
    width: 100%;
    clear: both;
    &.--semi {
        width: 75%;
    }
    &.--mid,
    &.--half {
        width: 50%;
    }
    &.--small,
    &.--third {
        width: 30%;
    }
}

hr,
.hr {
    border: 0;
    background-color: var(--x-hr-color, #333333);
    margin: 20px 0;
}

$modifiers: 100, 95, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 30, 25, 20, 15, 10, 5;
:root {
    // Define spacer variables dynamically based on modifiers
    @each $modifier in $modifiers {
        --dim-#{$modifier}: calc(#{$modifier}px * var(--x-base-font-size));
    }
}
.spacer {
    display: block;
    width: 100%;
    clear: both;

    // Base modifiers
    @each $modifier in $modifiers {
        &.--#{$modifier} {
            height: var(--dim-#{$modifier});
        }
    }
}