<commit_before>// LAYOUT
// ========================================================================== //

// Horizontal

layout,
[layout] {
    @extend %flex;

    // Structure

    &,
    &[orientation="horizontal"],
    &[orientation="auto-vertical"] {
        flex-direction: row;
    }

    &[orientation="reverse"],
    &[orientation="reverse-horizontal"] {
        flex-direction: row-reverse;
    }

    &[orientation="vertical"] {
        flex-direction: column;
    }

    &[orientation="reverse-vertical"] {
        flex-direction: column-reverse;
    }

    // Sizing

    &[limited] {
        layout,
        [layout] {
            margin: 0 auto;
            max-width: $limit;
            width: 100%;
        }
    }

    &[size="flex"] {
        // -ms-flex: 1 1 .000000001px;
        flex: 1;
        flex-basis: .000000001px;
    }

    &[size="none"] {
        flex: none;
    }

    &[size="auto"] {
        @include auto-sizing;
    }

    &[size="1"] { flex: 1; }
    &[size="2"] { flex: 2; }
    &[size="3"] { flex: 3; }
    &[size="4"] { flex: 4; }
    &[size="5"] { flex: 5; }
    &[size="6"] { flex: 6; }
    &[size="7"] { flex: 7; }
    &[size="8"] { flex: 8; }
    &[size="9"] { flex: 9; }
    &[size="10"] { flex: 10; }
    &[size="11"] { flex: 11; }
    &[size="12"] { flex: 12; }

    // Alignment

    &:not([orientation]),
    &[orientation="horizontal"],
    &[orientation="reverse"],
    &[orientation="reverse-horizontal"] {

        // Alignment in main axis

        &[align~="left"] {
            -ms-flex-pack: start;
            justify-content: flex-start;
        }

        &[align~="center"] {
            -ms-flex-pack: center;
            justify-content: center;
        }

        &[align~="right"] {
            -ms-flex-pack: end;
            justify-content: flex-end;
        }

        // Alignment in cross axis

        &[align~="top"] {
            align-items: flex-start;
            -ms-flex-align: start;
        }

        &[align~="middle"] {
            align-items: center;
            -ms-flex-align: center;
        }

        &[align~="bottom"] {
            align-items: flex-end;
            -ms-flex-align: end;
        }
    }

    &[orientation="vertical"],
    &[orientation="reverse-vertical"] {

        // Alignment in main axis

        &[align~="top"] {
            -ms-flex-pack: start;
            justify-content: flex-start;
        }

        &[align~="middle"] {
            -ms-flex-pack: center;
            justify-content: center;
        }

        &[align~="bottom"] {
            -ms-flex-pack: end;
            justify-content: flex-end;
        }

        // Alignment in cross axis

        &[align~="left"] {
            align-items: flex-start;
            -ms-flex-align: start;
        }

        &[align~="center"] {
            align-items: center;
            -ms-flex-align: center;
        }

        &[align~="right"] {
            align-items: flex-end;
            -ms-flex-align: end;
        }
    }

    // Space Alignment

    &[align~="spaced"] {
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    &[align~="surrounded"] {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    // Wrap

    &[wrap] {
        flex-wrap: wrap;

        &[orientation="reverse"],
        &[orientation="reverse-horizontal"],
        &[orientation="reverse-vertical"] {
            flex-wrap: wrap-reverse;
        }
    }
}

@media #{$break-small} {

    layout,
    [layout] {
        &[orientation="auto-vertical"] {<commit_msg>UPDATED to avoid the necessity of align="center". It needs to center the content all the time.<commit_after>// LAYOUT
// ========================================================================== //

// Horizontal

layout,
[layout] {
    @extend %flex;

    // Structure

    &,
    &[orientation="horizontal"],
    &[orientation="auto-vertical"] {
        flex-direction: row;
    }

    &[orientation="reverse"],
    &[orientation="reverse-horizontal"] {
        flex-direction: row-reverse;
    }

    &[orientation="vertical"] {
        flex-direction: column;
    }

    &[orientation="reverse-vertical"] {
        flex-direction: column-reverse;
    }

    // Sizing

    &[size="flex"] {
        // -ms-flex: 1 1 .000000001px;
        flex: 1;
        flex-basis: .000000001px;
    }

    &[size="none"] {
        flex: none;
    }

    &[size="auto"] {
        @include auto-sizing;
    }

    &[size="1"] { flex: 1; }
    &[size="2"] { flex: 2; }
    &[size="3"] { flex: 3; }
    &[size="4"] { flex: 4; }
    &[size="5"] { flex: 5; }
    &[size="6"] { flex: 6; }
    &[size="7"] { flex: 7; }
    &[size="8"] { flex: 8; }
    &[size="9"] { flex: 9; }
    &[size="10"] { flex: 10; }
    &[size="11"] { flex: 11; }
    &[size="12"] { flex: 12; }

    // Alignment

    &:not([orientation]),
    &[orientation="horizontal"],
    &[orientation="reverse"],
    &[orientation="reverse-horizontal"] {

        // Alignment in main axis

        &[align~="left"] {
            -ms-flex-pack: start;
            justify-content: flex-start;
        }

        &[align~="center"] {
            -ms-flex-pack: center;
            justify-content: center;
        }

        &[align~="right"] {
            -ms-flex-pack: end;
            justify-content: flex-end;
        }

        // Alignment in cross axis

        &[align~="top"] {
            align-items: flex-start;
            -ms-flex-align: start;
        }

        &[align~="middle"] {
            align-items: center;
            -ms-flex-align: center;
        }

        &[align~="bottom"] {
            align-items: flex-end;
            -ms-flex-align: end;
        }
    }

    &[orientation="vertical"],
    &[orientation="reverse-vertical"] {

        // Alignment in main axis

        &[align~="top"] {
            -ms-flex-pack: start;
            justify-content: flex-start;
        }

        &[align~="middle"] {
            -ms-flex-pack: center;
            justify-content: center;
        }

        &[align~="bottom"] {
            -ms-flex-pack: end;
            justify-content: flex-end;
        }

        // Alignment in cross axis

        &[align~="left"] {
            align-items: flex-start;
            -ms-flex-align: start;
        }

        &[align~="center"] {
            align-items: center;
            -ms-flex-align: center;
        }

        &[align~="right"] {
            align-items: flex-end;
            -ms-flex-align: end;
        }
    }

    // Space Alignment

    &[align~="spaced"] {
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    &[align~="surrounded"] {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    // Wrap

    &[wrap] {
        flex-wrap: wrap;

        &[orientation="reverse"],
        &[orientation="reverse-horizontal"],
        &[orientation="reverse-vertical"] {
            flex-wrap: wrap-reverse;
        }
    }

    // Limits

    &[limited] {
        -ms-flex-pack: center;
        justify-content: center;

        layout,
        [layout] {
            margin: 0 auto;
            max-width: $limit;
            width: 100%;
        }
    }
}

@media #{$break-small} {

    layout,
    [layout] {
        &[orientation="auto-vertical"] {
{'fraction_non_alphanumeric': 0.194599754534297, 'fraction_numerical': 0.015000681849174963, 'mean_word_length': 1.5769501054111033, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 4, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5369892', 'n_tokens_mistral': 2497, 'n_tokens_neox': 2309, 'n_words': 406}