<commit_before>// ------------------------------------ //
// Global variables                     //
// ------------------------------------ //
$item-color-bg: #ccc;
$header-color-bg: #eee;
$animation-duration: 0.3s;

// ------------------------------------ //
// Hide scroll bar in the side menu     //
// ------------------------------------ //
ion-menu ion-content .scroll-content::-webkit-scrollbar { 
    display: none; 
}

// ------------------------------------ //
// Simple items                         //
// ------------------------------------ //
ion-item.item-ios,
ion-item.item-md,
ion-item.item-wp {

    padding-left: 16px;
    padding-right: 16px;
    min-height: 50px;

    &.item.item-block {
        border-bottom: 1px solid $item-color-bg;
    }
    
    & [item-left], 
    & [item-right] {
        margin-left: 0;
    }

    & ion-icon[item-left] + .item-inner, 
    & ion-icon[item-left] + .item-input {
       margin-left: 8px;
    }
}

// ------------------------------------ //
// Multi level items                    //
// ------------------------------------ //
ion-list.accordion-menu {

    ion-item.header {

        background-color: $header-color-bg;

        ion-icon.header-icon {
            will-change: transform;
            transition: transform $animation-duration ease;

            &.rotate {
                -webkit-transform: rotate(-180deg);
                -moz-transform: rotate(-180deg);
                -ms-transform: rotate(-180deg);
                -o-transform: rotate(-180deg);
                transform: rotate(-180deg);
            }
        }
    }

    div.options {
        will-change: height;
        transition: height $animation-duration ease;
        overflow-y: hidden;
        height: 0;
    }

    // Sub options without icons
    ion-item.item.item-block.item-ios.no-icon .item-inner {
        margin-left: 48px;
    }
    
    ion-item.item.item-block.item-md.no-icon .item-inner,
    ion-item.item.item-block.item-wp.no-icon .item-inner {
        margin-left: 40px;
    }
}<commit_msg>Encapsulate component styles in order to avoid issues with external ion-items<commit_after>side-menu-content {

    // ------------------------------------ //
    // Global variables                     //
    // ------------------------------------ //
    $item-color-bg: #ccc;
    $header-color-bg: #eee;
    $animation-duration: 0.3s;

    // ------------------------------------ //
    // Hide scroll bar in the side menu     //
    // ------------------------------------ //
    ion-menu ion-content .scroll-content::-webkit-scrollbar { 
        display: none; 
    }

    // ------------------------------------ //
    // Simple items                         //
    // ------------------------------------ //
    ion-item.item-ios,
    ion-item.item-md,
    ion-item.item-wp {

        padding-left: 16px;
        padding-right: 16px;
        min-height: 50px;

        &.item.item-block {
            border-bottom: 1px solid $item-color-bg;
        }
        
        & [item-left], 
        & [item-right] {
            margin-left: 0;
        }

        & ion-icon[item-left] + .item-inner, 
        & ion-icon[item-left] + .item-input {
        margin-left: 8px;
        }
    }

    // ------------------------------------ //
    // Multi level items                    //
    // ------------------------------------ //
    ion-list.accordion-menu {

        ion-item.header {

            background-color: $header-color-bg;

            ion-icon.header-icon {
                will-change: transform;
                transition: transform $animation-duration ease;

                &.rotate {
                    -webkit-transform: rotate(-180deg);
                    -moz-transform: rotate(-180deg);
                    -ms-transform: rotate(-180deg);
                    -o-transform: rotate(-180deg);
                    transform: rotate(-180deg);
                }
            }
        }

        div.options {
            will-change: height;
            transition: height $animation-duration ease;
            overflow-y: hidden;
            height: 0;
        }

        // Sub options without icons
        ion-item.item.item-block.item-ios.no-icon .item-inner {
            margin-left: 48px;
        }
        
        ion-item.item.item-block.item-md.no-icon .item-inner,
        ion-item.item.item-block.item-wp.no-icon .item-inner {
            margin-left: 40px;
        }
    }
    
}
{'fraction_non_alphanumeric': 0.2516215611719973, 'fraction_numerical': 0.013867143815701186, 'mean_word_length': 0.9426585577758471, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '2013367', 'n_tokens_mistral': 1316, 'n_tokens_neox': 1193, 'n_words': 204}