@import "../../../css/_mixins.scss";
@import "../../../css/_trx_addons.vars.scss";
@import "../../../css/_trx_addons.colors.scss";

/*
 * Custom layouts.
 *
 */
.sc_layouts_row {
	@include border-box;
}
.sc_layouts_row_on_top {
	z-index: 99999;
}

body.post-type-cpt_layouts [data-type^="trx-addons/socials"],
body.post-type-cpt_layouts [data-type^="trx-addons/button"],
[data-type^="trx-addons/layouts-"]:not([data-type^="trx-addons/layouts-blog-item"]):not([data-type^="trx-addons/layouts-container"]):not([data-type^="trx-addons/layouts-featured"]):not([data-type^="trx-addons/layouts-title"]),
.wp-block-column > .sc_layouts_item,
.sc_layouts_row .sc_layouts_item,
.sc_layouts_row .sc_layouts_item + div:not(.sc_layouts_item):not(.vc_row):not(.vc_separator):not(.vc_empty_space):not(.vc_wp_text) {
	margin-top: 0.5em !important;
	margin-bottom: 0.5em !important;
}
.sc_layouts_row .sc_layouts_item.elementor-widget-divider,
.sc_layouts_row .sc_layouts_item.elementor-widget-spacer {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
body.post-type-cpt_layouts [data-type^="trx-addons/socials"],
body.post-type-cpt_layouts [data-type^="trx-addons/button"],
[data-type^="trx-addons/layouts-"]:not([data-type^="trx-addons/layouts-blog-item"]):not([data-type^="trx-addons/layouts-container"]):not([data-type^="trx-addons/layouts-featured"]):not([data-type^="trx-addons/layouts-title"]),
.wp-block-column > .sc_layouts_item,
.sc_layouts_item {
	max-width:100%;
}
body.post-type-cpt_layouts [data-type^="trx-addons/socials"],
body.post-type-cpt_layouts [data-type^="trx-addons/button"],
[data-type^="trx-addons/layouts-"]:not([data-type^="trx-addons/layouts-blog-item"]):not([data-type^="trx-addons/layouts-container"]):not([data-type^="trx-addons/layouts-featured"]):not([data-type^="trx-addons/layouts-title"]),
.wp-block-column > .sc_layouts_item,
.sc_layouts_column .sc_layouts_item:not(.elementor-widget-divider):not(.elementor-widget-spacer),
.sc_layouts_column .sc_layouts_item + div:not(.sc_layouts_item):not(.vc_row):not(.vc_separator):not(.vc_empty_space):not(.vc_wp_text) {
	display: inline-block;
	vertical-align:middle;
	margin-right: 1.5em;
	width: auto !important;
}

body.post-type-cpt_layouts .sc_layouts_column_align_left [data-type^="trx-addons/socials"]:last-child,
body.post-type-cpt_layouts .sc_layouts_column_align_left [data-type^="trx-addons/button"]:last-child,
.sc_layouts_column_align_left [data-type^="trx-addons/layouts-"]:not([data-type^="trx-addons/layouts-blog-item"]):not([data-type^="trx-addons/layouts-container"]):not([data-type^="trx-addons/layouts-featured"]):not([data-type^="trx-addons/layouts-title"]):last-child,
.sc_layouts_column_align_left.wp-block-column > .sc_layouts_item:last-child,
.sc_layouts_column_align_left .sc_layouts_item:last-child,
.sc_layouts_column_align_left .sc_layouts_item + div:not(.sc_layouts_item):not(.vc_row):not(.vc_separator):not(.vc_empty_space):not(.vc_wp_text):last-child {
	margin-right:0 !important;
}

body.post-type-cpt_layouts .sc_layouts_column_align_right [data-type^="trx-addons/socials"],
body.post-type-cpt_layouts .sc_layouts_column_align_right [data-type^="trx-addons/button"],
.sc_layouts_column_align_right [data-type^="trx-addons/layouts-"]:not([data-type^="trx-addons/layouts-blog-item"]):not([data-type^="trx-addons/layouts-container"]):not([data-type^="trx-addons/layouts-featured"]):not([data-type^="trx-addons/layouts-title"]),
.sc_layouts_column_align_right.wp-block-column > .sc_layouts_item,
.sc_layouts_column_align_right .sc_layouts_item:not(.elementor-widget-divider):not(.elementor-widget-spacer),
.sc_layouts_column_align_right .sc_layouts_item + div:not(.sc_layouts_item):not(.vc_row):not(.vc_separator):not(.vc_empty_space):not(.vc_wp_text) {
	margin-left: 1.5em;
	margin-right:0;
}
body.post-type-cpt_layouts .sc_layouts_column_align_right [data-type^="trx-addons/socials"]:first-child,
body.post-type-cpt_layouts .sc_layouts_column_align_right [data-type^="trx-addons/button"]:first-child,
.sc_layouts_column_align_right [data-type^="trx-addons/layouts-"]:not([data-type^="trx-addons/layouts-blog-item"]):not([data-type^="trx-addons/layouts-container"]):not([data-type^="trx-addons/layouts-featured"]):not([data-type^="trx-addons/layouts-title"]):first-child,
.sc_layouts_column_align_right.wp-block-column > .sc_layouts_item:first-child,
.sc_layouts_column_align_right .sc_layouts_item:not(.elementor-widget-divider):not(.elementor-widget-spacer):first-child,
.sc_layouts_column_align_right .sc_layouts_item + div:not(.sc_layouts_item):not(.vc_row):not(.vc_separator):not(.vc_empty_space):not(.vc_wp_text):first-child {
	margin-left:0 !important;
}

body.post-type-cpt_layouts .sc_layouts_column_align_center [data-type^="trx-addons/socials"],
body.post-type-cpt_layouts .sc_layouts_column_align_center [data-type^="trx-addons/button"],
.sc_layouts_column_align_center [data-type^="trx-addons/layouts-"]:not([data-type^="trx-addons/layouts-blog-item"]):not([data-type^="trx-addons/layouts-container"]):not([data-type^="trx-addons/layouts-featured"]):not([data-type^="trx-addons/layouts-title"]),
.sc_layouts_column_align_center.wp-block-column > .sc_layouts_item,
.sc_layouts_column_align_center .sc_layouts_item:not(.elementor-widget-divider):not(.elementor-widget-spacer),
.sc_layouts_column_align_center .sc_layouts_item + div:not(.sc_layouts_item):not(.vc_row):not(.vc_separator):not(.vc_empty_space):not(.vc_wp_text) {
	margin-left: 0.75em;
	margin-right:0.75em;
}

.sc_layouts_submenu .vc_separator,
.sc_layouts_submenu .vc_empty_space,
.sc_layouts_submenu .elementor-widget-divider,
.sc_layouts_submenu .elementor-widget-spacer,
.sc_layouts_row .vc_separator,
.sc_layouts_row .vc_empty_space,
.sc_layouts_row .elementor-widget-divider,
.sc_layouts_row .elementor-widget-spacer {
	margin-top: 0 !important;
	margin-bottom: 0 !important;	
}
.sc_layouts_row .sc_layouts_item + div.vc_separator:not(.sc_layouts_item):not(.vc_row):not(.vc_separator):not(.vc_empty_space):not(.vc_wp_text),
.sc_layouts_row .sc_layouts_item + div.vc_empty_space:not(.sc_layouts_item):not(.vc_row):not(.vc_separator):not(.vc_empty_space):not(.vc_wp_text),
.sc_layouts_row .sc_layouts_item + div.elementor-widget-divider,
.sc_layouts_row .sc_layouts_item + div.elementor-widget-spacer {
	margin: 0 !important;
}
.sc_layouts_column .vc_separator,
.sc_layouts_column .vc_empty_space,
.sc_layouts_column .elementor-widget-divider,
.sc_layouts_column .elementor-widget-spacer {
	width: 100%;
}

.sc_layouts_column_align_left,
.sc_layouts_column.sc_layouts_column_align_left .widget,
.sc_layouts_column.sc_layouts_column_align_left .widget_title,
.sc_layouts_column.sc_layouts_column_align_left .widgettitle {		text-align:left; }

.sc_layouts_column_align_left .elementor-widget-wrap {
	@include flex-justify-content(flex-start);
}

.sc_layouts_column_align_center,
.sc_layouts_column.sc_layouts_column_align_center .widget,
.sc_layouts_column.sc_layouts_column_align_center .widget_title,
.sc_layouts_column.sc_layouts_column_align_center .widgettitle {	text-align:center; }

.sc_layouts_column_align_center .elementor-widget-wrap {
	@include flex-justify-content(center);
}

.sc_layouts_column_align_right,
.sc_layouts_column.sc_layouts_column_align_right .widget,
.sc_layouts_column.sc_layouts_column_align_right .widget_title,
.sc_layouts_column.sc_layouts_column_align_right .widgettitle {		text-align:right; }

.sc_layouts_column_align_left .elementor-widget-wrap {
	@include flex-justify-content(flex-start);
}
.sc_layouts_column_align_center .elementor-widget-wrap {
	@include flex-justify-content(center);
}
.sc_layouts_column_align_right .elementor-widget-wrap {
	@include flex-justify-content(flex-end);
}

.sc_layouts_row_delimiter {
	border-bottom: 1px solid #ddd;
}


/* Hide on XXX
------------------------------------------------- */
.hide_on_frontpage, .sc_layouts_hide_on_frontpage {
	body.frontpage:not(.elementor-editor-active) &,
	body.home-page:not(.elementor-editor-active) &,
	body.home:not(.elementor-editor-active) &,
	body.error404:not(.elementor-editor-active) & {
		display: none !important;
	}
}
.hide_on_singular, .sc_layouts_hide_on_singular	{
	body.single:not(.elementor-editor-active) &,
	body.page:not(.elementor-editor-active) & {
		display: none !important;
	}
}
.hide_on_other, .sc_layouts_hide_on_other {
	body:not(.single):not(.page):not(.elementor-editor-active) & {
		display: none !important;
	}
}

@media #{$media_wide} {
	.hide_on_wide, .sc_layouts_hide_on_wide {			display: none !important; }
}
@media #{$media_desktop} {
	.hide_on_desktop, .sc_layouts_hide_on_desktop {		display: none !important; }
}

@media #{$media_notebook} {
	.hide_on_notebook, .sc_layouts_hide_on_notebook {	display: none !important; }
}

@media #{$media_tablet} {
	.hide_on_tablet, .sc_layouts_hide_on_tablet {		display: none !important; }
}

@media #{$media_mobile} {
	.hide_on_mobile, .sc_layouts_hide_on_mobile {		display: none !important; }
}



/* Common rules
------------------------------------------------- */

/* Text with icons */
.sc_layouts_iconed_text {
	white-space: nowrap;
}
.sc_layouts_item_link {
	display:block;
}
.sc_layouts_item_icon {
	@include font(2.25em, 1.1em);
	display: inline-block;
	vertical-align:middle;
	@include transition-color;
}
.sc_layouts_item_icon.sc_icon_type_svg svg,
.sc_layouts_item_icon.sc_icon_type_svg object {
	@include box(1em, 1em);
}
.sc_layouts_item_icon.sc_icon_type_images img {
	@include box(1em, 1em);
}
.sc_layouts_item_details {
	display: inline-block;
	vertical-align:middle;
	white-space:normal;
}
.sc_layouts_item_icon + .sc_layouts_item_details {
	margin-left: 0.5em;
}
.sc_layouts_column_icons_position_left .sc_layouts_item_details {
	text-align: left;
}
.sc_layouts_column_icons_position_right .sc_layouts_item_details {
	text-align: right;
}
.sc_align_center .sc_layouts_item_details {
	text-align: center;
}
.sc_layouts_item_details_line1,
.sc_layouts_item_details_line2 {
	display: block;
}
.sc_layouts_item_details_line1 {
	@include font(0.9333em, 1.1429em, 300);	//0.8667em, 1.2308em, 300
}
.sc_layouts_item_details_line2 {
	@include font(1.0667em, 1.3125em, 600);
}
.sc_layouts_column_icons_position_right .sc_layouts_item:after {
	content: ' ';
	@include clear;
}
.sc_layouts_column_icons_position_right .sc_layouts_item_icon {
	float:right;
	margin-left: 0.4em;
	margin-right: 0;
}
.sc_layouts_column_icons_position_right .sc_layouts_item_details {
	float:right;
}


/* Login link */
.sc_layouts_menu_nav.sc_layouts_login_menu {
	vertical-align: top;

	& > li > ul {
		font-size: 1em;
	}
}
.sc_layouts_login_menu .menu-item:not(.menu-item-has-children) .trx_addons_login_link {
	padding: 0em;
}
.sc_layouts_login_menu .trx_addons_login_link {
	white-space: nowrap;
	@include flex;
	@include flex-direction(row);
	@include flex-align-items(center);
	@include flex-justify-content(flex-start);

	& > span {
		vertical-align: top;
	}

	.sc_layouts_item_details_line1,
	.sc_layouts_item_details_line2 {
		@include transition-colors;
	}
	svg {
		@include transition-property(fill);
	}

	&.trx_addons_login_link_with_custom_icon {
		&:after {
			display: none !important;
		}
	}
}

/* Button */
.sc_layouts_row .sc_button {
	vertical-align:top;
	text-align: center;
}



/* Row type: Narrow
-------------------------------------------------- */
.sc_layouts_row_type_narrow {
	@include font(13px, 18px);
	padding: 6px 0;
}

/* Text with icons */
.sc_layouts_row_type_narrow {
	.sc_layouts_item_icon,
	.sc_layouts_item input[type="text"] {
		@include font(inherit, inherit, inherit);
	}
	.sc_layouts_item_details_line1,
	.sc_layouts_item_details_line2 {
		display:inline-block;
		@include font(inherit, inherit, inherit);
	}
	.sc_layouts_item_details_line1 + .sc_layouts_item_details_line2 {
		margin-left: 0.5em;
	}


	/* Social icons */
	.socials_wrap,
	.socials_wrap:not([class*="socials_type_"]) {
		margin: 0;	//0 -8px 0 0;	// because for '.socials_wrap .social_item:last-child' margin-right is 0 !important
	}
	.socials_wrap .social_item,
	.socials_wrap:not([class*="socials_type_"]) .social_item {
		margin: 0 8px 0 0;
	}
	.socials_wrap .social_item .social_icon,
	.socials_wrap:not([class*="socials_type_"]) .social_item .social_icon {
		font-size: 15px;
		@include box(auto, auto, inherit);
		@include border-sharp;
		background-color: transparent !important;
	}
	.socials_wrap .social_item_style_bg .social_icon,
	.socials_wrap:not([class*="socials_type_"]) .social_item_style_bg .social_icon {
		@include box(1.2em, 1.2em);
	}
	.socials_wrap .social_icon svg,
	.socials_wrap .social_icon object {
		@include box(1em, 1em);
	}


	/* Button */
	.sc_button {
		background-color: transparent;
		border: 1px solid #efa758;
		color: #efa758;
	}
}



/* Row type: Compact
-------------------------------------------------- */
.sc_layouts_row_type_compact {
	padding: 0.75em 0;
}

.sc_layouts_row_type_compact .sc_layouts_item,
.sc_layouts_row_type_normal .sc_layouts_item {
	letter-spacing:0;
}

/* Text with icons */
.sc_layouts_row_type_compact {
	.sc_layouts_item_icon {
		@include font(1.25em, '', 400);
	}
	.sc_layouts_item input[type="text"] {
		@include font(inherit, inherit, inherit);
	}
	.sc_layouts_item_details_line1,
	.sc_layouts_item_details_line2 {
		display:inline-block;
		@include font(inherit, inherit, inherit);
	}
	.sc_layouts_item_details_line1 + .sc_layouts_item_details_line2 {
		margin-left: 0.5em;
	}


	/* Social icons */
	.socials_wrap,
	.socials_wrap:not([class*="socials_type_"]) {
		margin: 0;	//0 -10px 0 0; 	// because for '.socials_wrap .social_item:last-child' margin-right is 0 !important
	}
	.socials_wrap .social_item,
	.socials_wrap:not([class*="socials_type_"]) .social_item {
		margin: 0 10px 0 0;
	}
	socials_wrap .social_item .social_icon,
	.socials_wrap:not([class*="socials_type_"]) .social_item .social_icon {
		font-size: 15px;
		@include box(auto, auto, inherit);
		@include border-sharp;
	}
	.socials_wrap .social_item_style_bg .social_icon,
	.socials_wrap:not([class*="socials_type_"]) .social_item_style_bg .social_icon {
		@include box(1.2em, 1.2em);
	}
}




/* Row type: Normal
-------------------------------------------------- */
.sc_layouts_row_type_normal {
	padding: 2em 0;
}




/* Fixed rows
--------------------------------------------- */
:root{
	--trx-addons-fixed-rows-duration: 0.4s;	
}
.sc_layouts_row_fixed_placeholder {
	display: none;
	position: relative;
}
.sc_layouts_row_unfixed_placeholder {
	position: relative;
	width: 100%;
	height: 0;
}
.sc_layouts_row_fixed_marker_on,
.sc_layouts_row_fixed_marker_off {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	@include box(100%, 1px);		//0.75px
}
.sc_layouts_row_fixed_marker_on {
	@include abs-lt(0,-1.25px,-1);	//1px
}
.sc_layouts_row_fixed_marker_off {
	@include abs-lt(0,-1.25px,-1);	//1px
}
.sc_layouts_row_fixed,
.sc_layouts_row_fixed.e-con:not(.e-div-block-base) {
	// Don't include here:
	// - transform: because it will broken the rule 'position: fixed' in the fullscreen search and in the mobile menu 'slide'
	// - padding-top & padding-bottom: because it will damage calculations of the height of the fixed row and its placeholder
	will-change: margin-top, height, background-color, border-color, box-shadow;
	@include transition(margin-top var(--trx-addons-fixed-rows-duration) ease, height var(--trx-addons-fixed-rows-duration) ease, background-color var(--trx-addons-fixed-rows-duration) ease, border-color var(--trx-addons-fixed-rows-duration) ease, box-shadow var(--trx-addons-fixed-rows-duration) ease);

	// > .e-con-inner {
	// 	will-change: padding;
	// 	@include transition(padding var(--trx-addons-fixed-rows-duration) ease);
	// }
}

.sc_layouts_row_fixed_on {
	:where(body:not(.header_position_over):not(.header_position_under)) &:where(.sc_layouts_row_fixed_from_start),
	:where(body:not(.header_position_over):not(.header_position_under).trx_addons_page_scrolled) & {
		background-color:#fff;
	}
}

.sc_layouts_row_fixed_on_pre,
.sc_layouts_row_fixed_on {
	@include fixed-pos(0, -$grid_gap / 2, auto, -$grid_gap / 2, 100002);
	position: fixed !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0;					// Don't use !important here
	margin-bottom: 0;				// Don't use !important here
	
	& + .sc_layouts_row_fixed_placeholder {
		display: block;
		width: 100%;	// Need for Elementor 2.5.0
	}

	&.e-con:not(.elementor-section-justified),
	&.elementor-section:not(.elementor-section-justified) {
		left: 0;
		right: 0;
	}
	& ~ & {
		z-index:100001;
	}
	& ~ & ~ & {
		z-index:100000;
	}
	&.sc_layouts_row_on_top {
		z-index: 999999;
	}
}

// Delay for fixed rows
.sc_layouts_row_fixed.sc_layouts_row_delay_fixed {
	margin-top: 0;
	will-change: margin-top;
	@include transition(none !important);
}
.sc_layouts_row_fixed_on.sc_layouts_row_delay_fixed {
	@include animation( trx-addons-layouts-fix-row2 var(--trx-addons-fixed-rows-duration) ease-out 0s 1 forwards );

	&.sc_layouts_row_fixed_animation_off {
		@include animation( trx-addons-layouts-unfix-row2 var(--trx-addons-fixed-rows-duration) ease-in 0s 1 forwards );
	}
}

// Don't use 'transform' here, because it will broken the rule 'position: fixed' in the fullscreen search and in the mobile menu 'slide'
@-webkit-keyframes trx-addons-layouts-fix-row2 {
	from {
		margin-top: -20em;
	}
	to {
		margin-top: 0;
	}
}
@keyframes trx-addons-layouts-fix-row2 {
	from {
		margin-top: -20em;
	}
	to {
		margin-top: 0;
	}
}

@-webkit-keyframes trx-addons-layouts-unfix-row2 {
	from {
		margin-top: 0;
	}
	to {
		margin-top: -20em;
	}
}
@keyframes trx-addons-layouts-unfix-row2 {
	from {
		margin-top: 0;
	}
	to {
		margin-top: -20em;
	}
}


// Hide fixed rows
body.hide_fixed_rows {
	.sc_layouts_row_fixed_on {
		@include animation( trx-addons-layouts-unfix-row2 var(--trx-addons-fixed-rows-duration) ease-in 0s 1 forwards );
	}
	.sc_layouts_row_fixed_placeholder {
		@include transition(height var(--trx-addons-fixed-rows-duration) ease !important);
	}
}
body.hide_fixed_rows_enabled {
	.sc_layouts_row_fixed:not(.sc_layouts_row_fixed_on) + .sc_layouts_row_fixed_placeholder {
		height:0 !important;
	}
}


/* Hide unfixed row */
body:not(.elementor-editor-active):not(.trx_addons_page_scrolled) .sc_layouts_row_hide_unfixed,
body:not(.elementor-editor-active) .sc_layouts_row_hide_unfixed:not(.sc_layouts_row_fixed_on) {
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-width: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
}


/* Flex columns with equal height
--------------------------------------------- */
.sc_layouts_flex {
	@include flex;
	@include flex-wrap(wrap);
	@include border-box;
}
.sc_layouts_flex > .sc_layouts_column {
	@include flex;
}
.sc_layouts_flex > .sc_layouts_column > .sc_layouts_item {
	@include flex;
	@include flex-direction(column);
	@include flex-grow(1);
}
.sc_layouts_flex.sc_layouts_columns_stretch {
	@include flex-align-content(stretch);
}
.sc_layouts_flex.sc_layouts_columns_top {
	@include flex-align-content(flex-start);
}
.sc_layouts_flex.sc_layouts_columns_bottom {
	@include flex-align-content(flex-end);
}
.sc_layouts_flex.sc_layouts_columns_middle {
	@include flex-align-content(center);
}
.sc_layouts_flex.sc_layouts_content_top > .sc_layouts_column > .sc_layouts_item {
	@include flex-justify-content(flex-start);
}
.sc_layouts_flex.sc_layouts_content_top:not(.sc_layouts_columns_stretch) > .sc_layouts_column {
	@include flex-align-items(flex-start);
}
.sc_layouts_flex.sc_layouts_content_bottom > .sc_layouts_column > .sc_layouts_item {
	@include flex-justify-content(flex-end);
}
.sc_layouts_flex.sc_layouts_content_bottom:not(.sc_layouts_columns_stretch) > .sc_layouts_column {
	@include flex-align-items(flex-end);
}
.sc_layouts_flex.sc_layouts_content_middle > .sc_layouts_column > .sc_layouts_item {
	@include flex-justify-content(center);
}
.sc_layouts_flex.sc_layouts_content_middle:not(.sc_layouts_columns_stretch) > .sc_layouts_column {
	@include flex-align-items(center);
}
.sc_layouts_flex.sc_layouts_columns_bottom:after,
.sc_layouts_flex.sc_layouts_columns_middle:after,
.sc_layouts_flex.sc_layouts_columns_top:after {
    content: '';
	@include box(100%, 0);
    overflow: hidden;
    visibility: hidden;
    display: block;
}


/* Layouts in the popup & panel
------------------------------------------ */
.sc_layouts_popup {
	display: none;
	background-color:#fff;
	@include box-shadow(0 0 20px 0 rgba(0, 0, 0, 0.2));

	& > p {
		margin: 0;
	}
	.wp-video {
		width: 100% !important;
	}
}
.mfp-content .sc_layouts_popup {
	display:block;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 80vh;
}
.mfp-inline-holder div.mfp-content,
.mfp-ajax-holder div.mfp-content {
	width: auto;
	min-width: 60%;
	max-width: 85%;
	min-height: 40%;
	max-height: 80%;
}


/* Panels */
.sc_layouts_panel_hide_content {
	@include fixed-mask(rgba(0,0,0,0), 1, 100000);
	@include translateX(200%);
	@include transition(background-color 0.8s ease,transform 0s ease 0.8s);
}
.sc_layouts_panel_hide_content.sc_layouts_panel_opened {
	background-color: rgba(0,0,0,0.5);
	@include translateX(0);
	@include transition-property(background-color, 0.8s);
}

.sc_layouts_panel {
	opacity: 0;
}
.sc_layouts_panel.sc_layouts_panel_opened {
	@include transition(transform 0.8s ease,opacity 0.3s ease);
	opacity: 1;
}

.sc_layouts_panel,
.sc_layouts_panel_inner {
	@include transition(transform 0.8s ease,opacity 6s ease);
}
.sc_layouts_panel_inner {
	background-color:#fff;
	@include border-box;
	@include box(100%, 100%);
	padding: 2em 3em;
}
.sc_layouts_panel_inner > p {
	margin: 0;
}

.sc_layouts_panel_left {
	@include fixed-lt(0, 0, 100001);
	max-width: 100%;
	height: 100%;
}
.sc_layouts_panel_right {
	@include fixed-rt(0, 0, 100001);
	max-width: 100%;
	height: 100%;
}
.sc_layouts_panel_top {
	@include fixed-lt(0, 0, 100001);
	max-height: 100%;
	width: 100%;
}
.sc_layouts_panel_bottom {
	@include fixed-lb(0, 0, 100001);
	max-height: 100%;
	width: 100%;
}

/* Panels effect: Slide */
.sc_layouts_panel_left.sc_layouts_effect_slide {
	@include translateX(-100%);
}
.sc_layouts_panel_right.sc_layouts_effect_slide {
	@include translateX(100%);
}
.sc_layouts_panel_top.sc_layouts_effect_slide {
	@include translateY(-100%);
}
.sc_layouts_panel_bottom.sc_layouts_effect_slide {
	@include translateY(100%);
}
.sc_layouts_panel.sc_layouts_effect_slide.sc_layouts_panel_opened {
	@include transform-none;
}

/* Panels effect: Flip */
.sc_layouts_panel.sc_layouts_effect_flip,
.sc_layouts_panel.sc_layouts_effect_flipout {
	@include perspective(600px);
	pointer-events: none;
}
.sc_layouts_panel.sc_layouts_effect_flip.sc_layouts_panel_opened,
.sc_layouts_panel.sc_layouts_effect_flipout.sc_layouts_panel_opened {
	pointer-events: initial;
}
.sc_layouts_panel_left.sc_layouts_effect_flip .sc_layouts_panel_inner {
	@include transform-origin(left center);
	@include rotateY(120deg);
}
.sc_layouts_panel_left.sc_layouts_effect_flipout .sc_layouts_panel_inner {
	@include transform-origin(left center);
	@include rotateY(-120deg);
}
.sc_layouts_panel_left.sc_layouts_effect_flip.sc_layouts_panel_opened .sc_layouts_panel_inner,
.sc_layouts_panel_left.sc_layouts_effect_flipout.sc_layouts_panel_opened .sc_layouts_panel_inner {
	@include rotateY(0deg);
}
.sc_layouts_panel_right.sc_layouts_effect_flip .sc_layouts_panel_inner {
	@include transform-origin(right center);
	@include rotateY(-120deg);
}
.sc_layouts_panel_right.sc_layouts_effect_flipout .sc_layouts_panel_inner {
	@include transform-origin(right center);
	@include rotateY(120deg);
}
.sc_layouts_panel_right.sc_layouts_effect_flip.sc_layouts_panel_opened .sc_layouts_panel_inner,
.sc_layouts_panel_right.sc_layouts_effect_flipout.sc_layouts_panel_opened .sc_layouts_panel_inner {
	@include rotateY(0deg);
}
.sc_layouts_panel_top.sc_layouts_effect_flip .sc_layouts_panel_inner {
	@include transform-origin(center top);
	@include rotateX(-120deg);
}
.sc_layouts_panel_top.sc_layouts_effect_flipout .sc_layouts_panel_inner {
	@include transform-origin(center top);
	@include rotateX(120deg);
}
.sc_layouts_panel_top.sc_layouts_effect_flip.sc_layouts_panel_opened .sc_layouts_panel_inner,
.sc_layouts_panel_top.sc_layouts_effect_flipout.sc_layouts_panel_opened .sc_layouts_panel_inner {
	@include rotateX(0deg);
}
.sc_layouts_panel_bottom.sc_layouts_effect_flip .sc_layouts_panel_inner {
	@include transform-origin(center bottom);
	@include rotateX(120deg);
}
.sc_layouts_panel_bottom.sc_layouts_effect_flipout .sc_layouts_panel_inner {
	@include transform-origin(center bottom);
	@include rotateX(-120deg);
}
.sc_layouts_panel_bottom.sc_layouts_effect_flip.sc_layouts_panel_opened .sc_layouts_panel_inner,
.sc_layouts_panel_bottom.sc_layouts_effect_flipout.sc_layouts_panel_opened .sc_layouts_panel_inner {
	@include rotateX(0deg);
}



/* Elementor container settings
----------------------------------------- */
body.single-cpt_layouts .trx-addons-layout--single-preview {
	position: relative;
	margin: 0 auto;	
}
// Commented to stretch the layout container to the full width of the page in the preview mode
body.single-cpt_layouts.body_style_wide .trx-addons-layout--single-preview,
body.single-cpt_layouts.body_style_boxed .trx-addons-layout--single-preview {
		max-width: var(--theme-var-page) !important;
}
body.single-cpt_layouts[class*="cpt_layouts-template"] {
	background-image: url(images/transparent.png);
	background-repeat: repeat;
}
body[class*="cpt_layouts-template"] .trx-addons-layout--edit-mode .trx-addons-layout__inner,
body[class*="cpt_layouts-template"] .trx-addons-layout--single-preview .trx-addons-layout__inner {
	margin-left: auto;
	margin-right: auto;
//	Commented to leave a background color transparent for the layout container
//	to allow users to see which sections don't have a background
//	background-color: var(--theme-color-bg_color);
	@include content-box;
}


/* Device-specific responsive must be inside main CSS, not in responsive
-------------------------------------------------------------------------- */

@media #{$media_desktop} {
    /* Layouts */
//	.sc_layouts_row_type_compact.sc_layouts_row_fixed_on,
//	.sc_layouts_row_type_normal.sc_layouts_row_fixed_on {
//		padding-top:0;
//		padding-bottom:0;
//	}
	.sc_layouts_row.sc_layouts_row_fixed_on .custom-logo-link img,
	.sc_layouts_row.sc_layouts_row_fixed_on .sc_layouts_logo img {
		max-height: 3em;
	}
}

@media #{$media_notebook} {
    /* Layouts */
//	.sc_layouts_row_type_compact.sc_layouts_row_fixed_on,
//	.sc_layouts_row_type_normal.sc_layouts_row_fixed_on {
//		padding-top:0;
//		padding-bottom:0;
//	}
	.sc_layouts_row.sc_layouts_row_fixed_on .custom-logo-link img,
	.sc_layouts_row.sc_layouts_row_fixed_on .sc_layouts_logo img {
		max-height: 3em;
	}
}

@media #{$media_tablet} {
    /* Layouts */
//	.sc_layouts_row_type_compact.sc_layouts_row_fixed_on,
//	.sc_layouts_row_type_normal.sc_layouts_row_fixed_on {
//		padding-top:0;
//		padding-bottom:0;
//	}
	.sc_layouts_row.sc_layouts_row_fixed_on .custom-logo-link img,
	.sc_layouts_row.sc_layouts_row_fixed_on .sc_layouts_logo img {
		max-height: 3em;
	}
}

@media #{$media_mobile} {
    /* Layouts */
//	.sc_layouts_row_type_compact.sc_layouts_row_fixed_on.sc_layouts_row_fixed_always,
//	.sc_layouts_row_type_normal.sc_layouts_row_fixed_on.sc_layouts_row_fixed_always {
//		padding-top:0;
//		padding-bottom:0;
//	}
	.sc_layouts_row.sc_layouts_row_fixed_on.sc_layouts_row_fixed_always .custom-logo-link img,
	.sc_layouts_row.sc_layouts_row_fixed_on.sc_layouts_row_fixed_always .sc_layouts_logo img {
		max-height: 3em;
	}
}