/**
 * Columns Gap
*/
$gap_default: $grid-gutters; // 40
$gap_narrow: $grid-gutters/2; // 20
$gap_extended: $grid-gutters + 20px; // 60
$gap_wide: $grid-gutters*2; // 80
$gap_wider: $grid-gutters*3; // 120

.elementor-section{
	// Boxed Container Width
	&.elementor-section-boxed >{
		.elementor-container{
			// Gap Default
			&.elementor-column-gap-default{
				@media (min-width: 1366px){
					max-width:#{1280px + $gap_default};
				}
				@media (max-width: 1365px){
					max-width:#{1140px + $gap_default};
				}
			}
			// Gap No + Custom
			&.elementor-column-gap-no,
			&.elementor-column-gap-custom{
				@media (min-width: 1366px){
					max-width:#{1280px};
				}
				@media (max-width: 1365px){
					max-width:#{1140px};
				}
			}
			// Gap Narrow
			&.elementor-column-gap-narrow{
				@media (min-width: 1366px){
					max-width:#{1280px + $gap_narrow};
				}
				@media (max-width: 1365px){
					max-width:#{1140px + $gap_narrow};
				}
			}
			// Gap Extended
			&.elementor-column-gap-extended{
				@media (min-width: 1366px){
					max-width:#{1280px + $gap_extended};
				}
				@media (max-width: 1365px){
					max-width:#{1140px + $gap_extended};
				}
			}
			// Gap Wide
			&.elementor-column-gap-wide{
				@media (min-width: 1366px){
					max-width:#{1280px + $gap_wide};
				}
				@media (max-width: 1365px){
					max-width:#{1140px + $gap_wide};
				}
			}
			// Gap Wider
			&.elementor-column-gap-wider{
				@media (min-width: 1366px){
					max-width:#{1280px + $gap_wider};
				}
				@media (max-width: 1365px){
					max-width:#{1140px + $gap_wider};
				}
			}
		}
	}
	// Full Width Container

	// Colums Gap
	.elementor-column-gap-{
		&default{
			>.elementor-column>.elementor-element-populated{
				padding: $gap_default/2;
			}
			.elementor-inner-section{
				//width: calc(100% + #{$gap_default});
				//margin-left: $gap_default/-2;
				//margin-right: $gap_default/-2;
			}
		}
		&narrow{
			>.elementor-column>.elementor-element-populated{
				padding: $gap_default/2;
				@media (min-width: 1200px){
					padding: $gap_narrow/2;
				}
			}
			.elementor-inner-section{
				//width: calc(100% + #{$gap_narrow});
				//margin-left: $gap_narrow/-2;
				//margin-right: $gap_narrow/-2;
			}
		}
		&extended{
			>.elementor-column>.elementor-element-populated{
				padding: $gap_default/2;
				@media (min-width: 1200px){
					padding: $gap_extended/2;
				}
			}
			.elementor-inner-section{
				//width: calc(100% + #{$gap_extended});
				//margin-left: $gap_extended/-2;
				//margin-right: $gap_extended/-2;
			}
		}
		&wide{
			>.elementor-column>.elementor-element-populated{
				padding: $gap_default/2;
				@media (min-width: 1200px){
					padding: $gap_wide/2;
				}
			}
			.elementor-inner-section{
				//width: calc(100% + #{$gap_wide});
				//margin-left: $gap_wide/-2;
				//margin-right: $gap_wide/-2;
			}
		}
		&wider{
			>.elementor-column>.elementor-element-populated{
				padding: $gap_default/2;
				@media (min-width: 1200px){
					padding: $gap_wider/2;
				}
			}
			.elementor-inner-section{
				//width: calc(100% + #{$gap_default});
				//margin-left: $gap_default/-2;
				//margin-right: $gap_default/-2;
				@media (min-width: 1200px){
					//width: calc(100% + #{$gap_wider});
					//margin-left: $gap_wider/-2;
					//margin-right: $gap_wider/-2;
				}
			}
		}
	}
}
.flex-auto,
.elementor-col-auto{
	flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
.flex-basic,
.elementor-col-basic{
	flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.elementor-column{
	&.h-100{
		.elementor-widget-wrap,
		.elementor-element,
		.elementor-widget-container{
			height: 100%;
		}
	}
}

// Column with element horizontal
$column-horizontal-gutters:(
	'10' : 10px,
	'20' : 20px,
	'30' : 30px,
	'40' : 40px
);
.cms-column-element-horizontal{
	.elementor-widget-wrap{
		margin-left: $grid-gutters/-2;
		margin-right: $grid-gutters/-2;
		width: calc(100% + #{$grid-gutters});
		>.elementor-element{
			width: auto;
      		min-width: unset!important;
			flex: 0 0 auto;
			max-width: 100%;
			padding-left: $grid-gutters/2;
			padding-right: $grid-gutters/2;
      		margin: 0;
      		&.flex-basic{
      			flex-basis: 0;
    			flex-grow: 1;
      		}
		}
	}
	@each $name, $gutter in $column-horizontal-gutters{
		&.cms-column-element-horizontal-gutters-#{$name}{
			.elementor-widget-wrap{
				margin-left: $gutter/-2;
				margin-right: $gutter/-2;
				width: calc(100% + #{$gutter});
				>.elementor-element{
					padding-left: $gutter/2;
					padding-right: $gutter/2;
				}
			}
		}
	}
}