@use "sass:math";

$grid-columns: 12;
$grid-gaps: (
    "0": 0,
    "1": 10px,
    "2": 20px,
    "3": 30px,
    "4": 40px,
    "5": 50px
);

$layout-values: flex-start, flex-end, center, space-between, space-around;
$align-items-values: flex-start, flex-end, center, stretch, "base-line";
$flex-wrap-values: wrap, nowrap;
$flex-direction: row, column, row-reverse, column-reverse;

// base layout
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.row {
    display: flex;
    flex-flow: row wrap;
}

// grid gaps
/* Grid Gaps */
@each $key, $val in $grid-gaps {
    .gap-#{$key} > * {
        padding: $val;
    }
    .gap-#{$key} {
        margin-left: -$val;
        margin-right: -$val;
    }
}

// justify content
/* Justify Content */
@each $val in $layout-values {
    .justify-#{$val} {
        justify-content: $val;
    }
}

// align items
/* Align Items */
@each $val in $align-items-values {
    .align-items-#{$val} {
        align-items: $val;
    }
}

// flex wrap
/* Flex Wrap */
@each $val in $flex-wrap-values {
    .flex-#{$val} {
        flex-wrap: $val;
    }
}

// flex direction
/* Flex Direction */
@each $val in $flex-direction {
    .flex-direction-#{$val} {
        flex-direction: $val;
    }
}

// gap
/* Gap */
@for $i from 1 through 50 {
    .flex-gap-#{$i} {
        gap: #{$i}px;
    }
}

// cols
/* XS Grid */
@include xs {
    @for $i from 1 through $grid-columns {
        .col-#{$i}-xs {
            box-sizing: border-box;
            flex-grow: 0;
            width: math.div($i * 100%, $grid-columns);
        }
    }
}

/* SM Grid */
@include sm {
    @for $i from 1 through $grid-columns {
        .col-#{$i}-sm {
            box-sizing: border-box;
            flex-grow: 0;
            width: math.div($i * 100%, $grid-columns);
        }
    }
}

/* MD Grid */
@include md {
    @for $i from 1 through $grid-columns {
        .col-#{$i}-md {
            box-sizing: border-box;
            flex-grow: 0;
            width: math.div($i * 100%, $grid-columns);
        }
    }
}

/* LG Grid */
@include lg {
    @for $i from 1 through $grid-columns {
        .col-#{$i}-lg {
            box-sizing: border-box;
            flex-grow: 0;
            width: math.div($i * 100%, $grid-columns);
        }
    }
}

/* XL Grid */
@include xl {
    @for $i from 1 through $grid-columns {
        .col-#{$i}-xl {
            box-sizing: border-box;
            flex-grow: 0;
            width: math.div($i * 100%, $grid-columns);
        }
    }
}