@import '../../../../../../../../themes/ginevra/assets/css/scss/variables';
@import '../../../../../../../../themes/ginevra/assets/css/scss/grid-variables';

@function map-deep-get($map, $keys...) {
    @each $key in $keys {
        $map: map-get($map, $key);
    }

    @return $map;
}

section.qodef-elementor-content-grid {
    
    > .elementor-container {
        width: $content-grid-width-1100;
        margin: 0 auto;
    }

    &.qodef-extended-grid {

        &:not([class*="qodef-extended-grid-disabled--"]) {

            > .elementor-container {
                width: 100% !important; // important is require in order to override responsive width
                max-width: 100% !important; // important is require in order to override responsive width
                margin: 0;
            }
        }

        @each $key, $value in $grid-columns-layout-responsive-map {

            &.qodef-extended-grid-disabled--#{$key} {

                @media only screen and (min-width: #{($key + 1)}#{px}) {

                    > .elementor-container {
                        width: 100% !important; // important is require in order to override responsive width
                        max-width: 100% !important; // important is require in order to override responsive width
                        margin: 0;
                    }
                }

                @media only screen and (max-width: $key#{px}) {

                    > .elementor-container {
                        padding-left: 0 !important;
                        padding-right: 0 !important;
                    }
                }
            }
        }
    }
    
    &.qodef-extended-grid--right {
    
        > .elementor-container {
            padding-left: calc((100% - #{$content-grid-width-1100})/2);
        }
    }
    
    &.qodef-extended-grid--left {
    
        > .elementor-container {
            padding-right: calc((100% - #{$content-grid-width-1100})/2);
        }
    }

    // Global grid style
    @each $key, $values in $content-grid-width-map {

        @media only screen and (min-width: map-deep-get($content-grid-width-map, $key, 'responsive-break')) {

            .qodef-content-grid-#{$key} & {
    
                > .elementor-container {
                    width: map-deep-get($content-grid-width-map, $key, 'content-grid-width');
                    max-width: map-deep-get($content-grid-width-map, $key, 'content-grid-width');
                }
    
                &.qodef-extended-grid--right {
    
                    > .elementor-container {
                        padding-left: calc((100% - #{map-deep-get($content-grid-width-map, $key, 'content-grid-width')})/2);
                    }
                }
    
                &.qodef-extended-grid--left {
                    
                    > .elementor-container {
                        padding-right: calc((100% - #{map-deep-get($content-grid-width-map, $key, 'content-grid-width')})/2);
                    }
                }
            }
        }
    }
    
    // Global grid responsive style
    @each $key, $values in $content-grid-width-responsive-map {
        
        @media only screen and (max-width: map-deep-get($content-grid-width-responsive-map, $key, 'responsive-break')) {
    
            > .elementor-container {
                width: map-deep-get($content-grid-width-responsive-map, $key, 'content-grid-width');
            }
    
            &.qodef-extended-grid--right {
    
                > .elementor-container {
                    padding-left: calc((100% - #{map-deep-get($content-grid-width-responsive-map, $key, 'content-grid-width')})/2);
                }
            }
    
            &.qodef-extended-grid--left {
    
                > .elementor-container {
                    padding-right: calc((100% - #{map-deep-get($content-grid-width-responsive-map, $key, 'content-grid-width')})/2);
                }
            }
        }
    }
}
