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

/* Common styles */
.sc_layouts_dark_light {
	display: block;
	overflow: hidden;
	position: relative;
	@include border-box;
	border: 1px solid transparent;
	@include transition-colors;

	&.sc_layouts_dark_light_active_light {
		background-color: #4096ed;
		border-color: #4066ed;
	}
	&.sc_layouts_dark_light_active_dark {
		background-color: #fff;
		border-color: #000;
	}

	.sc_layouts_dark_light_item {
		@include flex;
		@include flex-justify-content(center);
		@include flex-align-items(center);
		@include abs-lt;
		@include border-box;
		width: 100%;
		height: 100%;
		padding: 6px;
		@include transition-properties(opacity, transform);

		&.sc_layouts_dark_light_type_jpg,
		&.sc_layouts_dark_light_type_jpeg {
			padding: 0;
		}
		img {
			width: 100%;
			height: auto;
		}
		// img[src$=".jpg"],
		// img[src$=".jpeg"] {
		// 	object-fit: cover;
		// }
		svg {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}
	}
	.sc_layouts_dark_light_light {
		svg * {
			fill: #fff;
		}
	}
	.sc_layouts_dark_light_dark {
		svg * {
			fill: #000;
		}
	}

	.sc_layouts_dark_light_active {
		z-index: 2;
	}

	// Effect Swap
	&.sc_layouts_dark_light_effect_swap {
		.sc_layouts_dark_light_item {
			@include translateX(-50%);
			opacity: 0;
		}
		.sc_layouts_dark_light_active {
			opacity: 1;
			@include translateX(0);
		}	
	}

	// Effect Slide
	&.sc_layouts_dark_light_effect_slide {
		.sc_layouts_dark_light_light {
			@include translateX(-100%);
		}
		.sc_layouts_dark_light_dark {
			@include translateX(100%);
		}
		.sc_layouts_dark_light_active {
			@include translateX(0);
		}	
	}

	// Effects Fade
	&.sc_layouts_dark_light_effect_fade {
		.sc_layouts_dark_light_item {
			opacity: 0;
		}
		.sc_layouts_dark_light_active {
			opacity: 1;
		}	
	}

}

/* Layout: Default */
.sc_layouts_dark_light_default {
	@include box(47px, 29px);
	@include border-radius(15px);
}

/* Layout: Round */
.sc_layouts_dark_light_round {
	@include square(3em);
	@include border-round;
}