// CMS
@padding-default: 2.2em;
@layout__max-width-outside: 2000px;

& when (@media-common = true) {

    // unstyle magezon pagebuilder row
    .message.global.cookie,
    .payment-methods__icons,
    .store-usp,
    .header-quick-links,
    .no-row {

        .magezon-builder {

            .mgz-container {
                width: auto;
            }
        }

        .mgz-element-column > .mgz-element-inner {
            padding: 0;
        }
    }

    /* -------------------------------------------- *
     * Accordion
     */

    .accordion {
        h4, h3 {
            &:after {
                font-family: "FontAwesome";
                content: "\f105";
                padding-left: 10px;
            }

            &.toggled {
                &:after {
                    content: "\f107";
                }
            }
        }

        > div {
            margin-top: 10px;
            padding-bottom: 20px;
            display: none;

            &.toggled {
                display: block;
            }
        }
    }

    /* -------------------------------------------- *
     * More/less toggle system
     */

    .moreText {
        display: none;

        &.toggled {
            display: block !important;
        }
    }

    .showMoreText {
        &:after {
            content: "+";
            padding-left: 10px;
        }
    }

    .showLessText {
        &:after {
            content: "-";
            padding-left: 10px;
        }
    }

    /* -------------------------------------------- *
     * System wide nav dropdown
     */

    .collapsible {
        .title {
            border: 1px solid #d1d1d1;
            padding: 10px 44px 10px 15px;
            position: relative;
            cursor: pointer;

            &:after {
                font-family: "FontAwesome";
                content: "\f107";
                position: absolute;
                right: 20px;
                top: 50%;
                margin-top: -14px;
            }

            &.toggled {
                &:after {
                    content: "\f106";
                }
            }
        }

        .content {
            display: none;

            li {
                position: relative;
                top: -1px;

                a {
                    padding: 10px 15px;
                    border: 1px solid #d1d1d1;
                    border-top: none;
                    display: block;
                }

                &:first-child {
                    border-top: 1px solid #d1d1d1;
                }
            }

            &.toggled {
                display: block;
            }
        }
    }

    //
    //  remove wrapping of main content
    //  _______________________________

    /* Page-wide-content is deprecated, only for older projects */
    body.page-layout-1column-wide,
    body.page-wide-content {

        .page-main {
            max-width: none;
            padding-left: 0;
            padding-right: 0;

            .page.messages {
                max-width: @layout__max-width;
                padding-left: @layout__width-xs-indent;
                padding-right: @layout__width-xs-indent;
                margin-left: auto;
                margin-right: auto;
            }
        }
    }

    //Wrapper for content & banner that go the full width of the site
    .content-wrapper-full {
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    //Set max widths for content & banner that exceed the site a little, but not to the max
    .content-wrapper-wide {
        max-width: @layout__max-width-outside;
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    //Set max widths for content & banner that do not exceed the site
    .content-wrapper {
        max-width: @layout__max-width;
        padding-left: @layout__width-xs-indent;
        padding-right: @layout__width-xs-indent;
        margin-left: auto;
        margin-right: auto;
    }

    //
    //  Cms utilities
    //  _____________________________________________

    //  Aligning

    .u-align--center{
        text-align: center;
    }
    .u-align--right{
        text-align: right;
    }
    .u-align--left{
        text-align: left;
    }

    //  Margins

    .u-margin--remove{
        margin: 0;
    }
    .u-margin-topbottom-remove{
        margin-top: 0;
        margin-bottom: 0;
    }
    .u-margin-top-remove{
        margin-top: 0;
    }
    .u-margin-bottom-remove{
        margin-bottom: 0;
    }
    .u-margin-leftright-remove{
        margin-left: 0;
        margin-right: 0;
    }
    .u-margin-left-remove{
        margin-left: 0;
    }
    .u-margin-right-remove{
        margin-right: 0;
    }

    .u-margin-bottom--0-5{
        margin-bottom: .5em;
    }
    .u-margin-bottom--1{
        margin-bottom: 1em;
    }
    .u-margin-bottom--1-5{
        margin-bottom: 1.5em;
    }
    .u-margin-bottom--2{
        margin-bottom: 2em;
    }
    .u-margin-bottom--2-5{
        margin-bottom: 2.5em;
    }
    .u-margin-bottom--3{
        margin-bottom: 3em;
    }
    .u-margin-bottom--3-5{
        margin-bottom: 3.5em;
    }
    .u-margin-bottom--4{
        margin-bottom: 4em;
    }
    .u-margin-bottom--4-5{
        margin-bottom: 4.5em;
    }

    .u-margin-top--1{
        margin-top: 1em;
    }
    .u-margin-top--0-5{
        margin-top: .5em;
    }
    .u-margin-top--1-5{
        margin-top: 1.5em;
    }
    .u-margin-top--2{
        margin-top: 2em;
    }
    .u-margin-top--2-5{
        margin-top: 2.5em;
    }
    .u-margin-top--3{
        margin-top: 3em;
    }
    .u-margin-top--3-5{
        margin-top: 3.5em;
    }
    .u-margin-top--4{
        margin-top: 4em;
    }
    .u-margin-top--4-5{
        margin-top: 4.5em;
    }

    .u-padding--default{
        padding: @padding-default;
    }
    .u-padding--remove{
        padding: 0;
    }

    .block-static-block.widget,
    .block-cms-link.widget {
        margin-bottom: 0;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
     .collapsible {
        .title {
            display: none;
        }

        .content {
            display: block;
        }
    }

    .content-wrapper {
        padding-left: @layout-indent__width;
        padding-right: @layout-indent__width;
    }

    body.page-wide-content {

        .page-main {

            .page.messages {
                padding-left: @layout-indent__width;
                padding-right: @layout-indent__width;
            }
        }
    }
}
