// Creds to https://github.com/kristoferjoseph/flexboxgrid
// No gutters
// No text alignment with justified container classes (center-xs, for example)

.core-row {
    @include row();

    &.reverse {
        @include row-reverse();
    }

    &.natural-height {
        @include row-natural-height();
    }

    &.flex-column {
        @include row-flex-column();
    }
}

.core-col {
    @include col();

    &.reverse {
        @include col-reverse();
    }
}

.first {
    order: -1;
}

.last {
    order: 1;
}

.align-start {
    align-self: flex-start;
}

.align-end {
    align-self: flex-end;
}

.align-center {
    align-self: center;
}

.align-baseline {
    align-self: baseline;
}

.align-stretch {
    align-self: stretch;
}

// Mixin to run inside of for loop - creates col/breakpoint classes * Not for developer use *
@mixin col-factory($thisPrefix) {
    .core-col-#{$thisPrefix} {
        box-sizing: border-box;
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
        padding: $gutter;
    }
    @for $i from 1 through $grid-columns {
        .core-col-#{$thisPrefix}-#{$i} {
            box-sizing: border-box;
            flex-basis: 100% / $grid-columns * $i;
            max-width: 100% / $grid-columns * $i;
            padding: $gutter;
        }
        .core-col-#{$thisPrefix}-offset-#{$i} {
            margin-left: 100% / $grid-columns * $i;
        }
    }
    .core-row.start-#{$thisPrefix} {
        justify-content: flex-start;
    }
    .core-row.center-#{$thisPrefix} {
        justify-content: center;
    }
    .core-row.end-#{$thisPrefix} {
        justify-content: flex-end;
    }
    .core-row.top-#{$thisPrefix} {
        align-items: flex-start;
    }
    .core-row.middle-#{$thisPrefix} {
        align-items: center;
    }
    .core-row.bottom-#{$thisPrefix} {
        align-items: flex-end;
    }
    .core-row.around-#{$thisPrefix} {
        justify-content: space-around;
    }
    .core-row.between-#{$thisPrefix} {
        justify-content: space-between;
    }
    .first-#{$thisPrefix} {
        order: -1;
    }
    .last-#{$thisPrefix} {
        order: 1;
    }
}

// Mixin to run inside of for loop - creates col/breakpoint classes

@for $i from 1 through length($breakpoint-up-prefixes) {
    $thisPrefix: nth($breakpoint-up-prefixes, $i);
    @if $thisPrefix == "xs" {
        @include col-factory($thisPrefix);
    } @else if $thisPrefix == "sm" {
        @media #{$breakpoint-sm-up} {
            @include col-factory($thisPrefix);
        }
    } @else if $thisPrefix == "md" {
        @media #{$breakpoint-md-up} {
            @include col-factory($thisPrefix);
        }
    } @else if $thisPrefix == "lg" {
        @media #{$breakpoint-lg-up} {
            @include col-factory($thisPrefix);
        }
    } @else if $thisPrefix == "xl" {
        @media #{$breakpoint-xl-up} {
            @include col-factory($thisPrefix);
        }
    }
}

.core-col-gutter-lr {
    padding: 0 $gutter;
}

.core-col-no-gutter {
    padding: 0;
}