// Configuração

// Largura base das colunas
$base--xs = 100 / $grid--total-xs;
$base--sm = 100 / $grid--total-sm;
$base--md = 100 / $grid--total-md;
$base--lg = 100 / $grid--total-lg;
$base--xl = 100 / $grid--total-xl;

// Calcula largura das colunas
col-width(index, base) {
    return (lookup('$base--' + base) * index)%;
}

// Alterar aqui as propriedades das colunas
col-properties(breakpoint, index) {
    &--{index}\\@{breakpoint} {
        flex: 0 1 col-width(index, breakpoint);
        max-width: col-width(index, breakpoint);
    }
}

// Offset

col-offset(direction = left) {
    &--offset {
        for bp in sm md lg xl {
            @media (min-width: lookup('$screen--' + bp)) {
                for i in (0..($grid--total-xl - 1)) {
                    if bp == sm {
                        &-{i} {
                            margin-{direction}: col-width(i, xl);

                            if direction == right {
                                margin-left: 0;
                            }
                        }
                    }

                    &-{i}\\@{bp} {
                        margin-{direction}: col-width(i, xl);

                        if direction == right {
                            margin-left: 0;
                        }
                    }
                }
            }
        }
    }
}

// Ordenação

col-order(num, breakpoint = false) {
    if !breakpoint {
        &-{num} {
            order: num;
        }
    }
    else {
        &-{num}\\@{breakpoint} {
            order: num;
        }
    }
}


// CSS

.o-grid {
    $margin-v = -($vertical--element-sm);
    $margin-h = -(half-margin(lookup('$gutter--' + xs)));
    $margin   = $margin-v $margin-h 0;

    flexbox();
    flex-wrap: wrap;
    margin-left: $margin-h;
    margin-right: $margin-h;
    padding-top: ($vertical--element-sm / 2);

    for bp in sm md lg xl {
        @media (min-width: lookup('$screen--' + bp)) {
            margin-left: -(half-margin(lookup('$gutter--' + bp)));
            margin-right: @margin-left;
        }
    }

    // alinhamento

    // centralizado na horizontal
    &--center {
        justify-content: center;
    }

    // alinhamento vertical

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

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

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

    &--reverse {
        flex-direction: row-reverse;

        &-reset {
            flex-direction: row;
        }

        for bp in sm md lg xl {

            @media (min-width: lookup('$screen--' + bp)) {
                &\\@{bp} {
                    flex-direction: row-reverse;
                }

                &-reset\\@{bp} {
                    flex-direction: row;
                }
            }
        }

        /[class*="o-grid--reverse"] {
            .o-col {
                col-offset(right);
            }
        }
    }
}

.o-col {
    $order--default = 10000;

    flex: 1 0 0;
    order: $order--default;
    max-width: 100%;
    min-width: 1px;
    padding-left: half-margin($gutter--xs);
    padding-right: @padding-left;
    padding-top: ($vertical--element-sm / 2);
    padding-bottom: @padding-top;

    // garante que no menor breakpoint só haja no máximo 2 colunas e que cada
    // coluna sem definição de tamanho ocupe 100%
    @media (max-width: ($screen--sm - 1)) {
        flex: 0 1 100%;
    }

    // Colunas para todos os breakpoints
    &-1 {
        flex-basis: 50%;
        max-width: @flex-basis;
    }

    @media (min-width: $screen--sm) {
        for i in (1..$grid--total-xl) {
            &--{i} {
                flex: 0 1 col-width(i, xl);
                max-width: col-width(i, xl);
            }
        }
    }

    // definindo os paddings laterais das colunas em cada breakpoint
    for bp in sm md lg xl {
        @media (min-width: lookup('$screen--' + bp)) {
            padding-left: half-margin(lookup('$gutter--' + bp));
            padding-right: @padding-left;
        }
    }


    // Colunas responsivas

    // monta o css das colunas com as classes responsivas e breakpoints

    for bp in xs sm md lg xl {
        if bp == xs {
            for col in (1..lookup('$grid--total-' + bp)) {
                col-properties(bp, col);
            }
        }
        else {
            @media (min-width: lookup('$screen--' + bp)) {
                &\\@{bp} {
                    flex: 1 1 0;
                    max-width: 100%;
                }
                for col in (1..lookup('$grid--total-' + bp)) {
                    col-properties(bp, col);
                }
            }
        }
    }

    // Offset

    // monta o css dos offsets das colunas por tamanho e breakpoint

    col-offset(left);


    // Ordenação das colunas

    &--order {
        for num in (1..20) {
            col-order(num);
        }

        &-last {
            order: $order--default + 1;
        }

        for bp in sm md lg xl {

            @media (min-width: lookup('$screen--' + bp)) {
                
                for num in (1..20) {
                    col-order(num, bp);
                }

                &-last\\@{bp} {
                    order: $order--default + 1;
                }
            }
        }
    }
}