.aw-switch {
	$width: 38px;
	$height: 22px;
	$inner-pad: 2px;

	cursor: pointer;
	text-indent: -999em;
	display: block;
	width: $width;
	height: $height;
	border-radius: 30px;
	border: none;
	position: relative;
	box-sizing: border-box;
	transition: all .3s ease;
	box-shadow: inset 0 0 0 0 transparent;

	&:focus {
		outline: none;
	}

	&:before {
		border-radius: 50%;
		background: $white;
		content: '';
		position: absolute;
		display: block;
		width: $height - ($inner-pad*2);
		height: $height - ($inner-pad*2);
		top: $inner-pad;
		left: $inner-pad;
		transition: all .15s ease;
		box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	}


	&[data-aw-switch="on"] {
		box-shadow: inset 0 0 0 ( $height / 2 ) $blue;

		&:before {
			transform: translateX( $width - $height );

		}
	}

	&[data-aw-switch="off"] {
		background: #ccc;
	}

	&.aw-loading {
		cursor: default;
		opacity: 0.5;
	}
}