@use "sass:map";
@use "sass:math";
@use "../../mixins/breakpoints";
@use "../../config-variables";

@mixin grid-column-factory($name) {
    @for $size from 1 through config-variables.$f-grid-columns {
        &.col--#{$name}-#{$size} {
            width: 100%;
        }
    }

    @include breakpoints.breakpoint-up($name) {
        @for $size from 1 through config-variables.$f-grid-columns {
            &.col--#{$name}-#{$size} {
                flex: 0 0 math.percentage(math.div($size, config-variables.$f-grid-columns));
                max-width: math.percentage(math.div($size, config-variables.$f-grid-columns));
            }

            &.col--#{$name}-order-#{$size} {
                order: $size;
            }
        }
    }
}

@mixin internal-width-factory($name) {
    @include breakpoints.breakpoint-up($name) {
        @for $size from 1 through config-variables.$f-grid-columns {
            .i-width-#{$name}-#{$size} {
                width: math.percentage(math.div($size, config-variables.$f-grid-columns));
            }
        }
    }
}

@mixin container-max-width-factory() {
    @each $breakpoint, $container-max-width in config-variables.$f-container-max-widths {
        @include breakpoints.breakpoint-up($breakpoint) {
            max-width: $container-max-width;
        }
    }
}

.container-fluid {
    width: 100%;
    padding-right: config-variables.$f-container-spacing;
    padding-left: config-variables.$f-container-spacing;
    margin-right: auto;
    margin-left: auto;
}

.container {
    width: 100%;
    padding-right: config-variables.$f-container-spacing;
    padding-left: config-variables.$f-container-spacing;
    margin-right: auto;
    margin-left: auto;
    @include container-max-width-factory;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -(math.div(config-variables.$f-gutter-width, 2));
    margin-left: -(math.div(config-variables.$f-gutter-width, 2));

    &--align-end {
        justify-content: flex-end;
    }

    &--align-center {
        justify-content: center;
    }

    &--align-justify {
        justify-content: space-between;
    }

    &--align-spaced {
        justify-content: space-around;
    }

    &--align-middle {
        align-items: center;
    }

    &--align-bottom {
        align-items: flex-end;
    }

    &--align-top {
        align-items: flex-start;
    }
}

.col {
    position: relative;
    min-height: 1px;
    box-sizing: border-box;
    padding-right: math.div(config-variables.$f-gutter-width, 2);
    padding-left: math.div(config-variables.$f-gutter-width, 2);
    width: auto;
    max-width: none;

    &--align-bottom {
        align-self: flex-end;
    }

    &--align-middle {
        align-self: center;
    }

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

    &--align-top {
        align-self: flex-start;
    }

    @for $size from 1 through config-variables.$f-grid-columns {
        &.col--order-#{$size} {
            order: $size;
        }
    }

    @each $breakpoint in map.keys(config-variables.$f-breakpoints) {
        @include grid-column-factory($breakpoint);
    }
}

@each $breakpoint in map.keys(config-variables.$f-breakpoints) {
    @include internal-width-factory($breakpoint);
}