<commit_before>/* ============================================================================
   SIDE-BY-SIDE
   ========================================================================= */

/**
 * Place any two elements side-by-side using Flexbox, typically for an image-
 * and text-like content. Like the "Grid" "Side-by-side" is a "Layout Module"
 * and a workhorse for your UI builds, any layout you need always look to the
 * "Side-by-side" "Layout Module"—including within your "Components", it exists
 * so you don't have to write redundant CSS to construct layouts.
 *
 * Other styles cannot be applied to any "Side-by-side" elements.
 * "Side-by-side" is a "Layout Module" therefore the Single Responsibility
 * Principle and the Open/Close Principle strictly applies. So this would be
 * invalid:
 *
    <div class="l-side-by-side__item  c-card">
        […]
    </div>
 *
 * Here we have wrongly applied a "Component" (`c-card`) to the same element as
 * a "Layout Module", we've mixed concerns, this can result in this part of
 * the UI being prone to breakages. The valid way to approach this would be:
 *
    <div class="l-side-by-side__item">
        <div class="c-card">
            […]
        </div>
    </div>
 *
 * ----------------------------------------------------------------------------
 *
 * "Side-by-side" is namespaced with "l" followed by one hyphen, like this:
 *
   l-side-by-side
 *
 * The "l" stands for "layout" as "Side-by-side" is a "Layout Module".
 *
 * ----------------------------------------------------------------------------
 *
 * @markup
    <div class="l-side-by-side [modifier(s)]">
        <div class="l-side-by-side__item">
            […]
        </div>
        <div class="l-side-by-side__item">
            […]
        </div>
    </div>
 */


/**
 * The container.
 */

.l-side-by-side {
    display: flex;
}


/**
 * Each item, they're only ever two items in a container.
 *
 * N.B. all grid gutter sizes are in "Settings -> Grid (Local)".
 *
 * 1. Provide all values to avoid IE 10 bug with the shorthand `flex`
 *    property: http://git.io/vllC7.
      Use `0%` to avoid bug in IE 10/11 with unitless `flex-basis`:
      http://git.io/vllWx.
 * 2. Apply a gutter.
 */

// The last item
.l-side-by-side__item:last-child {
    flex: 1 1 0%; // [1]
    margin-left: rem($shell-g-spacing); // [2]
}

// Reversing the gutters for the "Reversed" modifier
.l-side-by-side--reversed > .l-side-by-side__item:last-child {
    margin-left: 0;
    margin-right: rem($shell-g-spacing);
}


/**
 * Modifier: gutterless.
 *
 * N.B. includes reversing the gutters for the "Reversed" modifier.
 */

.l-side-by-side--gutterless > .l-side-by-side__item:last-child {
    margin-left: 0;
}

.l-side-by-side--gutterless.l-side-by-side--reversed > .l-side-by-side__item:last-child {
    margin-left: 0;
    margin-right: 0;
}


/**
 * Modifiers: gutter sizes.
 *
 * N.B. includes reversing the gutters for the "Reversed" modifier.
 * N.B. all grid gutter sizes are in "Settings -> Grid (Local)".
 */

// Base
// N.B. having to reinstate the default so that any nested "Side-by-side's"
// that inherit a "Gutterless" modifier can be easily reapplied
.l-side-by-side--gutter-base > .l-side-by-side__item:last-child {
    margin-left: rem($shell-g-spacing);
}

.l-side-by-side--gutter-base.l-side-by-side--reversed > .l-side-by-side__item:last-child {
    margin-left: 0;
    margin-right: rem($shell-g-spacing);
}

// Decrease
.l-side-by-side--gutter-small > .l-side-by-side__item:last-child {
    margin-left: rem($shell-g-spacing-small);
}

.l-side-by-side--gutter-small.l-side-by-side--reversed > .l-side-by-side__item:last-child {
    margin-left: 0;
    margin-right: rem($shell-g-spacing-small);
}

.l-side-by-side--gutter-x-small > .l-side-by-side__item:last-child {
    margin-left: rem($shell-g-spacing-x-small);
}

.l-side-by-side--gutter-x-small.l-side-by-side--reversed > .l-side-by-side__item:last-child {
    margin-left: 0;
    margin-right: rem($shell-g-spacing-x-small);
}

// Increase
.l-side-by-side--gutter-large > .l-side-by-side__item:last-child {<commit_msg>Remove base from gutter names<commit_after>/* ============================================================================
   SIDE-BY-SIDE
   ========================================================================= */

/**
 * Place any two elements side-by-side using Flexbox, typically for an image-
 * and text-like content. Like the "Grid" "Side-by-side" is a "Layout Module"
 * and a workhorse for your UI builds, any layout you need always look to the
 * "Side-by-side" "Layout Module"—including within your "Components", it exists
 * so you don't have to write redundant CSS to construct layouts.
 *
 * Other styles cannot be applied to any "Side-by-side" elements.
 * "Side-by-side" is a "Layout Module" therefore the Single Responsibility
 * Principle and the Open/Close Principle strictly applies. So this would be
 * invalid:
 *
    <div class="l-side-by-side__item  c-card">
        […]
    </div>
 *
 * Here we have wrongly applied a "Component" (`c-card`) to the same element as
 * a "Layout Module", we've mixed concerns, this can result in this part of
 * the UI being prone to breakages. The valid way to approach this would be:
 *
    <div class="l-side-by-side__item">
        <div class="c-card">
            […]
        </div>
    </div>
 *
 * ----------------------------------------------------------------------------
 *
 * "Side-by-side" is namespaced with "l" followed by one hyphen, like this:
 *
   l-side-by-side
 *
 * The "l" stands for "layout" as "Side-by-side" is a "Layout Module".
 *
 * ----------------------------------------------------------------------------
 *
 * @markup
    <div class="l-side-by-side [modifier(s)]">
        <div class="l-side-by-side__item">
            […]
        </div>
        <div class="l-side-by-side__item">
            […]
        </div>
    </div>
 */


/**
 * The container.
 */

.l-side-by-side {
    display: flex;
}


/**
 * Each item, they're only ever two items in a container.
 *
 * N.B. all grid gutter sizes are in "Settings -> Grid (Local)".
 *
 * 1. Provide all values to avoid IE 10 bug with the shorthand `flex`
 *    property: http://git.io/vllC7.
      Use `0%` to avoid bug in IE 10/11 with unitless `flex-basis`:
      http://git.io/vllWx.
 * 2. Apply a gutter.
 */

// The last item
.l-side-by-side__item:last-child {
    flex: 1 1 0%; // [1]
    margin-left: rem($shell-g-spacing); // [2]
}

// Reversing the gutters for the "Reversed" modifier
.l-side-by-side--reversed > .l-side-by-side__item:last-child {
    margin-left: 0;
    margin-right: rem($shell-g-spacing);
}


/**
 * Modifier: gutterless.
 *
 * N.B. includes reversing the gutters for the "Reversed" modifier.
 */

.l-side-by-side--gutterless > .l-side-by-side__item:last-child {
    margin-left: 0;
}

.l-side-by-side--gutterless.l-side-by-side--reversed > .l-side-by-side__item:last-child {
    margin-left: 0;
    margin-right: 0;
}


/**
 * Modifiers: gutter sizes.
 *
 * N.B. includes reversing the gutters for the "Reversed" modifier.
 * N.B. all grid gutter sizes are in "Settings -> Grid (Local)".
 */

// Base
// N.B. having to reinstate the default so that any nested "Side-by-side's"
// that inherit a "Gutterless" modifier can be easily reapplied
.l-side-by-side--gutter > .l-side-by-side__item:last-child {
    margin-left: rem($shell-g-spacing);
}

.l-side-by-side--gutter.l-side-by-side--reversed > .l-side-by-side__item:last-child {
    margin-left: 0;
    margin-right: rem($shell-g-spacing);
}

// Decrease
.l-side-by-side--gutter-small > .l-side-by-side__item:last-child {
    margin-left: rem($shell-g-spacing-small);
}

.l-side-by-side--gutter-small.l-side-by-side--reversed > .l-side-by-side__item:last-child {
    margin-left: 0;
    margin-right: rem($shell-g-spacing-small);
}

.l-side-by-side--gutter-x-small > .l-side-by-side__item:last-child {
    margin-left: rem($shell-g-spacing-x-small);
}

.l-side-by-side--gutter-x-small.l-side-by-side--reversed > .l-side-by-side__item:last-child {
    margin-left: 0;
    margin-right: rem($shell-g-spacing-x-small);
}

// Increase
.l-side-by-side--gutter-large > .l-side-by-side__item:last-child {
{'fraction_non_alphanumeric': 0.22394947777507895, 'fraction_numerical': 0.005343696866650474, 'mean_word_length': 2.449937159614579, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, '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': '7021419', 'n_tokens_mistral': 2916, 'n_tokens_neox': 2775, 'n_words': 716}