@import "var";
:host{
	overflow: hidden;
	display: inline-block;
	font-size: 0;
	vertical-align: middle;
}
.@{prefixName}-switch{
	position: relative;
	background-color: @switch-background-color;
	box-sizing: border-box;
	border-width: 2px;
	border-style: solid;
	border-color: @switch-border-color;

	.transition(background-color);

	.@{prefixName}-switch__toggle{
		border-radius: 50%;
		background-color: #fff;
		box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
		.transition(all);
		&.is-loading{
			.flex(@align-items: center,	@justify-content: center);
		}
	}

	&.is-checked{
		border-color: transparent;
		.@{prefixName}-switch__toggle{
			transform: translate3d(20px, 0,0);
			box-shadow: none;
		}
	}
	&.is-disabled{
		background-color: @switch-disabled-background-color;
		&.is-checked{
			background-color: @switch-active-disabled-background-color;
		}
	}
}