@import "variables";

@mixin background-border-color($color){
	background-color: $color;
	border: 1px solid darken($color, 4%);
};

.otgs-switcher-input {
	width:0 !important;
	min-width: 0 !important;
	height:0 !important;
	visibility:hidden !important;
	margin: 0 !important;
	border: none !important;
}

.otgs-switcher,
.otgs-switcher-text-inside {
	cursor:pointer;
	display:inline-block;
	position:relative;
	&::after {
		content:'';
		position:absolute;
		left:3px;
		top:1px;
		width:13px;
		height:13px;
		background:#fff;
		border-radius:90px;
		transition:.3s;
		z-index:3;
	}
}

.otgs-switcher::before,
.otgs-switcher-text-inside {
	height:19px;
	line-height:17px;
	box-sizing:border-box;
	@include background-border-color(#e0e0e0);
	display:inline-block;
	border-radius:100px;
	vertical-align:middle;
	font-size:11px;
	color: $text-color;
	transition:background .1s linear, color .1s linear, border .1s linear;
	padding:0 4px 0 18px;
}

.otgs-switcher {
	padding-left: 53px;
	margin-top: 4px;
	text-align: center;
	&::before {
		content: attr(data-off);
		width: 45px;
		position: absolute;
		left: 0;
	}
	&::after {
		top: 3px;
	}
	.rtl &,
	&.switcher-after {

	}
}

.otgs-switcher-input:checked {
	& + .otgs-switcher::before {
		content:attr(data-on);
	}
	& + .otgs-switcher::before,
	& + .otgs-switcher-text-inside {
		@include background-border-color($otgs-green);
		color:#fff;
		padding:0 18px 0 4px;
	}
	& + .otgs-switcher.toolset-theme::before,
	& + .otgs-switcher-text-inside.toolset-theme {
		@include background-border-color($toolset-orange);
	}
	& + .otgs-switcher.wpml-theme::before,
	& + .otgs-switcher-text-inside.wpml-theme {
		@include background-border-color($wpml-blue);
	}
	& + .otgs-switcher::after {
		left: calc(45px - 3px);
		transform:translateX(-100%);
	}
	& + .otgs-switcher-text-inside::after {
		left:calc(100% - 3px);
		transform:translateX(-100%);
	}
}
