.lws-switch-bigwrapper{
	display: grid;
	grid-template-columns: 1fr max-content 1fr;
	height:30px;
	line-height: 30px;
	font-size:15px;

	.switch-left{
		font-weight:bold;
		color: var(--left-color,#F44336);
		text-align: center;
	}
	.switch-right{
		color:#999;
		text-align: center;
	}

	&.checked{
		.switch-left{
			color:#999;
			font-weight:normal;
		}
		.switch-right{
			font-weight:bold;
			color:var(--right-color,#366);
		}
	}

}
.lws-switch-wrapper{
    position: relative;
    top: 50%;
    width: 62px;
    height: 30px;
    margin: -15px auto 0 0;
	overflow: hidden;

	input.lws_switch
	{
		position: relative;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		opacity: 0;
		cursor: pointer;
		z-index: 3;
	}
	.button-cover, .knobs, .layer
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.knobs
	{
		z-index: 2;
	}

	.layer
	{
		width: 100%;
		background-color: var(--left-light-color,#fcebeb);
		transition: 0.3s ease all;
		z-index: 1;
	}
	.knobs:before
	{
		content: 'OFF';
		position: absolute;
		top: 2px;
		left: 2px;
		width: 20px;
		height: 12px;
		color: #fff;
		font-size: 10px;
		font-weight: bold;
		text-align: center;
		line-height: 1;
		padding: 7px 4px;
		background-color: var(--left-color,#F44336);
		transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
	}

	.lws_switch:active ~ .knobs:before
	{
		width: 46px;
	}

	.lws_switch:checked:active ~ .knobs:before
	{
		margin-left: -26px;
	}

	.lws_switch:checked ~ .knobs:before
	{
		content: 'ON';
		left: 32px;
		background-color: var(--right-color,#366);
	}

	.lws_switch:checked ~ .layer
	{
		background-color: var(--right-light-color,#eff);
	}

	&.leftright{
		.knobs:before
		{
			content: '\ea11';
			font-family: 'lws-icons';
			padding: 6px 4px;
			font-size : 14px;
			height: 14px;
		}
		.lws_switch:checked ~ .knobs:before
		{
			content: '\ea12';
			font-family: 'lws-icons';
		}
	}
}