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

/* Switcher */
.sc_switcher {
	--trx-addons-switcher-effect-duration: 0.5s;
	--trx-addons-switcher-effect-delay: 0.2s;
}

/* Type 'Default' */
.sc_switcher_controls {
	--trx-addons-switcher-toggle-offset: 100%;
	--trx-addons-switcher-toggle-height: 2.2em;
	--trx-addons-switcher-toggle-padding: 0.2em;
	// clamp is broken in translateX below
	// --trx-addons-switcher-toggle-width: clamp( 3em, calc( 2 * var(--trx-addons-switcher-toggle-height) + 2 * var(--trx-addons-switcher-toggle-padding) ), 100% );
	--trx-addons-switcher-toggle-width: calc( 2 * var(--trx-addons-switcher-toggle-height) + 2 * var(--trx-addons-switcher-toggle-padding) );

	@include flex;
	@include flex-direction(row);
	@include flex-justify-content(center);
	@include flex-align-items(center);
	margin-bottom: 3em;
	padding: 0 var(--trx-addons-switcher-toggle-padding);
}
.sc_switcher_controls_section1 {
	margin-right: 1.5em;
	text-align: right;
	cursor: pointer;
}
.sc_switcher_controls_section2 {
	margin-left: 1.5em;
	cursor: pointer;
}
.sc_switcher_controls_section_title {
	margin: 0 !important;
	@include transition-property(color);
}
.sc_switcher_controls_toggle {
	@include box(var(--trx-addons-switcher-toggle-width), calc( var(--trx-addons-switcher-toggle-height) + 2 * var(--trx-addons-switcher-toggle-padding) ) );
	@include border-radius( calc( var(--trx-addons-switcher-toggle-height) / 2 ) );
	background-color: #f0f0f0;
	position: relative;
	cursor: pointer;
	@include flex-shrink(0);
}
.sc_switcher_controls_toggle_button {
	@include square(var(--trx-addons-switcher-toggle-height));
	@include border-round;
	@include abs-lt(var(--trx-addons-switcher-toggle-padding),var(--trx-addons-switcher-toggle-padding));
	background-color: #efa752;
	@include transition-properties(transform,background-color,width);
	@include transition-duration(var(--trx-addons-switcher-effect-duration));
}
.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(calc( var(--trx-addons-switcher-toggle-width) - var(--trx-addons-switcher-toggle-height) - 2 * var(--trx-addons-switcher-toggle-padding) ));
}

/* Type 'Modern' */
.sc_switcher_modern {
	.sc_switcher_content {
		@include flex;
		@include flex-direction(column);
		@include flex-justify-content(flex-start);
		@include flex-align-items(center);
	}
	.sc_switcher_controls {
		@include inline-flex;
		vertical-align: top;
		@include flex-justify-content(space-between);
		@include flex-align-items(center);
		@include flex-wrap(nowrap);
		position: relative;
	}
	.sc_switcher_controls_toggle {
		@include abs-lt(0,0);
		@include box(100%, 100% );
		@include border-radius(5em);
	}
	.sc_switcher_controls_toggle_button {
		width: calc( 50% - var(--trx-addons-switcher-toggle-padding) );
		height: calc( 100% - 2 * var(--trx-addons-switcher-toggle-padding) );
		@include border-radius(5em);
	}
	.sc_switcher_controls_toggle:not(.sc_switcher_controls_toggle_on) .sc_switcher_controls_toggle_button {
		@include translateX(var(--trx-addons-switcher-toggle-offset, 100%));
	}	
	.sc_switcher_controls_section1,
	.sc_switcher_controls_section2 {
		@include flex-grow(1);
		@include flex-shrink(0);
		position: relative;
		z-index: 2;
		padding: 0.5em 1.5em;
		margin: 0;
		text-align: center;
		text-wrap: nowrap;
	}
	.sc_switcher_sections {
		width: 100%;
	}
}

/* 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: 0.6em 1em;
	@include transition-colors;

	& + & {
		margin-left: 0.5em;
	}
	&.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;
	}
	body:not(.elelentor-editor-active) &[data-section]:not(.sc_switcher_section_inited) {
		opacity: 0;
	}
}

/* Effect 'Swap' */
.sc_switcher_effect_swap {
	.sc_switcher_section {
		float: left;
		width: 100%;
		opacity: 0;
		@include translateX(-50%);
		@include transition(transform var(--trx-addons-switcher-effect-duration) ease,opacity var(--trx-addons-switcher-effect-duration) 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(var(--trx-addons-switcher-effect-delay));
	}
}

/* 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 var(--trx-addons-switcher-effect-duration) 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 var(--trx-addons-switcher-effect-duration) ease);
	}
}

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

/* Effect 'None' */
.sc_switcher_effect_none {
	.sc_switcher_sections {
		@include transition(none);
	}
	.sc_switcher_controls_toggle_button {
		@include transition-properties(background-color,width);
	}
	.sc_switcher_section {
		float: left;
		width: 100%;
		opacity: 0;
		z-index: 0;
	}
	.sc_switcher_section_2,
	.sc_switcher_section:nth-child(n+2) {
		margin-left: -100%;
	}
	.sc_switcher_section_active {
		opacity: 1;
	}
}