input[type="checkbox"]{
	&.switch{
		&{
			display: inline-block;
			position: relative;
			background-color: transparent;
			width:0px;
			margin-right: 60px;
			height: 34px;
		}
		&:after,
		&:before {
			content: '';
		}
		&:before{
			position:absolute;
			display:block;
			border-radius:1000px;
			background-color:var(--switch-back-color);
			transition: all .2s ease-in-out;
			width: 58px;
    		height: 32px;
		}
		&:after{
			top:0px;
			position:absolute;
			display: block;
			inset: 2.5px;
			width: 26px;
			height: 26px;
			background-color: var(--switch-handle-color);
			border-radius: 50%;
			transition: all .2s ease-in-out;
			box-shadow: 0px 3px 8px 0px rgba(0,0,0,.15), 0px 3px 1px 0px rgba(0,0,0,.06);
		}
		&:checked:before{
			background-color:var(--switch-active-color);
		}
		&:checked:after{
			left: 28px;
		}
		
		&.big{
			&{
				width:0px;
				margin-right:80px;
				height:46px;
			}
			&:before{
				width:82px;
				height:46px;
			}
			&:after{
				inset: 2.5px;
				width: 40px;
				height: 40px;
				box-shadow: 0px 3px 8px 0px rgba(0,0,0,.15), 0px 3px 1px 0px rgba(0,0,0,.06);
			}
			&:checked:after{
				left: calc(80px - 40px - 2.5px);
			}
		}
	}
}