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

/* Switcher */

/* Type 'Default' */
.sc_switcher_controls {
	@include flex;
	@include flex-direction(row);
	@include flex-justify-content(center);
	@include flex-align-items(center);
	margin-bottom: 3em;
}
.sc_switcher_controls_section1 {
	margin-right: 1.5em;
	text-align: right;
}
.sc_switcher_controls_section2 {
	margin-left: 1.5em;
}
.sc_switcher_controls_section_title {
	margin: 0 !important;
	cursor: pointer;
}
.sc_switcher_controls_toggle {
	@include box(5.6em, 2.6em);
	@include border-radius(1.5em);
	@include box-shadow(0px 0px 5px 0px rgba(0,0,0,0.15) inset);
	background-color: #f0f0f0;
	position: relative;
	cursor: pointer;
	@include flex-shrink(0);
}
.sc_switcher_controls_toggle_button {
	@include square(2.2em);
	@include border-round;
	@include abs-lt(0.2em,0.2em);
	background-color: #efa752;
	@include transition-properties(transform,background-color);
}
.sc_switcher_controls_toggle_on .sc_switcher_controls_toggle_button {
	background-color: #efa752;
}
.sc_switcher_controls_toggle:not(.sc_switcher_controls_toggle_on) .sc_switcher_controls_toggle_button {
	@include translateX(3em);
}

/* Type 'Tabs' */
.sc_switcher_tabs_controls {
	@include flex;
	@include flex-direction(row);
	@include flex-justify-content(center);
	@include flex-align-items(stretch);
	margin-bottom: 2em;
}
.sc_switcher_tab {
	position: relative;
	border: 1px solid #e0e0e0;
	padding: 2em;

	& + & {
		margin-left: 2em;
	}
	&.sc_switcher_tab_active {
		border-color: #000;
	}

	h1, h2, h3, h4, h5, h6 {
		margin: 0.3em 0;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
	p {
		margin: 0.2em 0;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
}
.sc_switcher_tab_link {
	@include abs-cover;
}

/* Sections */
.sc_switcher_sections {
	display: block;
	position: relative;
	overflow: hidden;
	@include transition-property(height);

	.elementor-section.elementor-section-stretched {
		width: 100% !important;
		left: 0 !important;
	}
}
.sc_switcher_section {
	position: relative;

	&.sc_switcher_section_active {
		z-index: 1;
	}
}

/* Effect 'Swap' */
.sc_switcher_effect_swap {
	.sc_switcher_section {
		float: left;
		width: 100%;
		opacity: 0;
		@include translateX(-50%);
		@include transition(transform 0.5s ease,opacity 0.5s ease);
	}

	.sc_switcher_section_2,
	.sc_switcher_section:nth-child(n+2) {
		margin-left: -100%;
	}

	.sc_switcher_section_active {
		opacity: 1;
		@include translateX(0);
		@include transition-delay(0.2s);
	}
}

/* Effect 'Slide' */
.sc_switcher_effect_slide {
	--trx-addons-switcher-slide-active: 0;
	--trx-addons-switcher-slide-width: 50%;
	.sc_switcher_slider_1 {	--trx-addons-switcher-slide-width: 100%; }
	.sc_switcher_slider_2 {	--trx-addons-switcher-slide-width: 50%; }
	.sc_switcher_slider_3 {	--trx-addons-switcher-slide-width: 33.3333%; }
	.sc_switcher_slider_4 {	--trx-addons-switcher-slide-width: 25%; }
	.sc_switcher_slider_5 {	--trx-addons-switcher-slide-width: 20%; }
	.sc_switcher_slider_6 {	--trx-addons-switcher-slide-width: 16.6666%; }
	.sc_switcher_slider_7 {	--trx-addons-switcher-slide-width: 14.2857%; }
	.sc_switcher_slider_8 {	--trx-addons-switcher-slide-width: 12.5%; }
	.sc_switcher_slider_9 {	--trx-addons-switcher-slide-width: 11.1111%; }

	.sc_switcher_slider_1 { width: 100%; }
	.sc_switcher_slider,
	.sc_switcher_slider_2 { width: 200%; }
	.sc_switcher_slider_3 { width: 300%; }
	.sc_switcher_slider_4 { width: 400%; }
	.sc_switcher_slider_5 { width: 500%; }
	.sc_switcher_slider_6 { width: 600%; }
	.sc_switcher_slider_7 { width: 700%; }
	.sc_switcher_slider_8 { width: 800%; }
	.sc_switcher_slider_9 { width: 900%; }

	.sc_switcher_slider {
		@include transition(transform 0.5s ease);
		@include translateX( calc( -1 * var(--trx-addons-switcher-slide-active) * var(--trx-addons-switcher-slide-width) ) );
	}
	
	.sc_switcher_section {
		float: left;
		width: var(--trx-addons-switcher-slide-width);
		@include transition(transform 0.5s ease);
	}
}

/* Effect 'Fade' */
.sc_switcher_effect_fade {
	.sc_switcher_section {
		float: left;
		width: 100%;
		opacity: 0;
		@include transition(opacity 0.5s ease);
	}
	.sc_switcher_section_2,
	.sc_switcher_section:nth-child(n+2) {
		margin-left: -100%;
	}
	.sc_switcher_section_active {
		opacity: 1;
		@include transition-delay(0.2s);
	}
}