@use "sass:math";

$grid: $prefix + "grid";

$grid-column-width: math.div(100%, 12);

$grid-breakpoint: (
    small: 0,
    medium: 768px,
    large: 1200px
);

$grid-items: (
    start,
    end,
    center,
    baseline,
    stretch
);

$grid-gutter: (
    small: 0.25em,
    medium: 0.5em,
    large: 1em
);

$grid-justify: (
    normal,
    start,
    end,
    center,
    between,
    around,
    evenly,
    stretch
);

$grid-item-column: (
    one: 1,
    two: 2,
    three: 3,
    four: 4,
    five: 5,
    six: 6,
    seven: 7,
    eight: 8,
    nine: 9,
    ten: 10,
    eleven: 11,
    twelve: 12
);

.#{$grid} {
    --grid-gutter-x: 0;
    --grid-gutter-y: 0;

    @each $gutter, $value in $grid-gutter {
        @each $key in (x, y) {
            &-gutter-#{$gutter} {
                --grid-gutter-#{$key}: #{$value};
            }
        }
    }

    @each $gutter, $value in $grid-gutter {
        @each $key in (x, y) {
            &-gutter-#{$key}-#{$gutter} {
                --grid-gutter-#{$key}: #{$value};
            }
        }
    }

    @each $breakpoint, $value in $grid-breakpoint {
        @media (min-width: $value) {
            @each $key in $grid-items {
                &-items-#{$breakpoint}-#{$key}>div {
                    @apply items-#{$key};
                }
            }

            @each $key in $grid-justify {
                &-justify-#{$breakpoint}-#{$key}>div {
                    @apply justify-#{$key};
                }
            }
        }
    }

    &>div {
        @apply flex flex-wrap h-full;
        margin-top: calc(var(--grid-gutter-y) * -1);
        margin-left: calc(var(--grid-gutter-x) * -1);
    }

    &-no-wrap-true>div {
        @apply flex-nowrap;
    }
}

.#{$grid}-item {
    @apply grow-0 basis-auto max-w-none box-border;

    & {
        @apply pt-[var(--grid-gutter-y)] ps-[var(--grid-gutter-x)];
    }

    @each $breakpoint, $value in $grid-breakpoint {
        @media (min-width: $value) {
            &-#{$breakpoint}-auto {
                @apply basis-auto max-w-none;
            }

            &-#{$breakpoint}-grow {
                @apply grow basis-0 max-w-full;
            }

            @each $key, $value in $grid-item-column {
                &-#{$breakpoint}-#{$key} {
                    flex-basis: $value * $grid-column-width;
                    max-width: $value * $grid-column-width;
                }
            }
        }
    }

    @media (min-width: 0) and (max-width: 767px) {
        &-hide-small-true {
            display: none;
        }
    }

    @media (min-width: 768px) and (max-width: 1199px) {
        &-hide-medium-true {
            display: none;
        }
    }

    @media (min-width: 1200px) {
        &-hide-large-true {
            display: none;
        }
    }
}