@use "sass:math";

$grid-columns: 12;
$base-grid-gap: 0.5rem;

$grid-gaps: (
    "0": 0,
    "1": 0.5rem,
    "2": 1rem,
    "3": 1.5rem,
    "4": 2rem,
);

// base layout classes
.container-fluid{
    width: 100%;
    padding: 0 $base-padding;
    box-sizing: border-box;
}
.container{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 $base-padding;
    box-sizing: border-box;
}

.row{
    display: flex;
    flex-flow: row wrap;
}

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

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

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

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

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

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