/* --- SWITCH --- */

.switch {
	* {
		cursor: pointer;
	}
	input {
		opacity: 0;
		position: absolute;
		z-index: -1;
	}
	span {
		position: relative;
		display: inline-block;
		width: 38px;
		height: 20px;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 34px;
		transition: all .5s;
		box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1) inset;
		&:after {
			content: "";
			position: absolute;
			background-color: #fff;
			top: 1px;
			left: 1px;
			height: 16px;
			width: 16px;
			border: 1px solid #ddd;
			border-radius: 50%;
			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
			-webkit-transition: all .2s;
		}
		&:before{
			content: attr(data-cc-status-disable);
			position: absolute;
			top: -2px;
			right: 50px;
			color: #000;
			font-size: 13px;
			text-align: right;
		}
	}
	input:checked + span {
		background-color: #28a745;
		border-color: #28a745;
		transition: all .5s;
		&:before{
			content: attr(data-cc-status-enable);
		}
	}
	input:checked + span:after {
		left: 50%;
		transition: all .2s;
	}
}