/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Layouts Helper
# Layout: content-sidebar
# Layout: sidebar-content
# Layout: sidebar-sidebar-content
# Layout: content-sidebar-sidebar
# Layout: sidebar-content-sidebar
*/

/************************
    HIDING COLS FOR DEVICES
*************************/
@each $mq-key, $mq-value in $gl-devices-list {
    @media #{$mq-value} { //_#{$mq-key}
        .hide-on-#{$mq-key},
        .customify-grid .hide-on-#{$mq-key} { display: none; }
        .align-left-#{$mq-key} { text-align: left; }
        .align-center-#{$mq-key} { text-align: center; }
        .align-right-#{$mq-key} { text-align: right; }
    }
}

#page {
    position: relative;
}

.no-box-shadow {
    box-shadow: none !important;
}

// Site boxed layout.
.site-boxed, .site-framed {
    .site {
        max-width: 1248px;
        box-shadow: 0 3px 6px -4px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        margin: 0 auto;
    }
}

// Site framed layout.
.site-framed {
    .site {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

.customify-container {
    position: relative;
    padding-left: 2em;
    padding-right: 2em;
    @include clearfix;
    @include mq(max-sm) {
        padding-left: 1em;
        padding-right: 1em;
    }
}
.customify-container, .layout-contained{
   // max-width: $container_width; // 1200px
    max-width: 1248px; // 1200px
    margin: 0 auto;
}

.site-content {
    background: #fff;
    &.content-full-width {
        .customify-container {
            max-width: 100%;
        }
    }
    &.content-boxed {
        max-width: $container_width;
        margin: 0 auto;
    }
    &.content-full-stretched {
        .customify-container {
            max-width: 100%;
        }
        > .customify-container {
            padding-left: 0px;
            padding-right: 0px;
            .customify-grid {
                margin: 0px;
            }
            .content-area.customify-col-12 {
                margin-right: 0px;
                margin-left: 0px;
            }
        }
        #main.customify-col-12 {
            padding:0;
        }
    }
}

#sidebar-secondary, #sidebar-primary, #main {
    padding-top: ms(4);
    padding-bottom: ms(4);
}
.sidebar-content-sidebar {
    #main {
        @include for_device( tablet ) {
            border-left: 0px none;
        }
    }
    #sidebar-secondary {
        @include for_device( tablet ) {
            order: 5;
            display: none;
        }
    }
}


/*-- Layout: content-sidebar --*/
.content-sidebar {
    @include mq(min-sm) {
        .content-inner {
            padding-right: ms(0);
        }
        &.sidebar_vertical_border {
            .content-area {
                border-right: 1px solid $color_border;
            }
            .content-inner {
                padding-right: ms(0);
            }
            .sidebar-primary-inner {
                padding-left: ms(0);
            }
        }
    }
}

/*-- Layout: sidebar-content --*/
.sidebar-content {
    @include mq(min-sm) {
        .content-inner {
            padding-left: ms(0);
        }
        &.sidebar_vertical_border {
            .content-area {
                border-left: 1px solid $color_border;
            }
            .content-inner {
                padding-left: ms(0);
            }
            .sidebar-primary-inner {
                padding-right: ms(0);
            }
        }
    }
}

/*-- Layout: sidebar-sidebar-content --*/
.sidebar-sidebar-content {
    @include mq(min-sm) {
        .content-inner {
            padding-left: ms(0);
        }
        &.sidebar_vertical_border {
            .content-area {
            }
            .sidebar-primary {
                border-right: 1px solid $color_border;
            }
            .sidebar-secondary {
                border-right: 1px solid $color_border;
            }
            .content-inner {
                padding-left: ms(0);
            }
            .sidebar-primary-inner {
                padding-right: ms(0);
            }
            .sidebar-secondary-inner {
                padding-left: ms(0);
                padding-right: ms(0);
            }
        }
    }
}


/*-- Layout: content-sidebar-sidebar --*/
.content-sidebar-sidebar {
    // Layout with vertical border, only for large screen
    @include mq(min-sm) {
        .content-inner {
            padding-right: ms(0);
        }
        &.sidebar_vertical_border {
            .content-area {
            }
            .sidebar-primary {
                border-left: 1px solid $color_border;
            }
            .sidebar-secondary {
                border-left: 1px solid $color_border;
            }
            .content-inner {
                padding-right: ms(0);
            }
            .sidebar-primary-inner {
                padding-left: ms(0);
                padding-right: ms(0);
            }
            .sidebar-secondary-inner {
                padding-left: ms(0);
            }
        }
    }
}

/*-- Layout: sidebar-content-sidebar --*/
.sidebar-content-sidebar {
    // Layout with vertical border, only for large screen
    @include mq(min-sm) {
        .content-inner {
            padding-left: ms(0);
            padding-right: ms(0);
        }
        &.sidebar_vertical_border {
            .content-area {
                border-left: 1px solid $color_border;
                border-right: 1px solid $color_border;
            }
            .content-inner {
                padding-left: ms(0);
                padding-right: ms(0);
            }
            .sidebar-primary-inner {
                padding-left: ms(0);
            }
            .sidebar-secondary-inner {
                padding-right: ms(0);
            }
        }
    }
    @include mq(max-md) {
        &.sidebar_vertical_border {
            .content-inner {
                padding-left: 0;
            }
        }
    }
}

.skip-grid--column {
    .builder-item {
        display: inline-block;
    }
}


