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

/* Switcher */
.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;
}
.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;
}
.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);
}

.sc_switcher_sections {
	display: block;
	position: relative;
	overflow: hidden;
}

/* 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 {
		margin-left: -100%;
	}
	.sc_switcher_section_active {
		opacity: 1;
		@include translateX(0);
		@include transition-delay(0.2s);
	}
}

/* Effect 'Slide' */
.sc_switcher_effect_slide {
	.sc_switcher_slider {
		width: 200%;
	}
	.sc_switcher_section {
		float: left;
		width: 50%;
		@include transition(transform 0.5s ease);
	}
	.sc_switcher_section_1:not(.sc_switcher_section_active),
	.sc_switcher_section_2.sc_switcher_section_active {
		@include translateX(-100%);
	}
}

/* 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 {
		margin-left: -100%;
	}
	.sc_switcher_section_active {
		opacity: 1;
		@include transition-delay(0.2s);
	}
}