@import "variables.less";
@import "../common/Switch.less";

/* Default Shape */
.mblSwDefaultShape {
	.mblSwSquareShape-styles;
}

.mblSwitchBgLeft {
	background-color: @mbl-switch-bg-left-background-color;
	height: 14px;
	margin: auto 4px;
	top: 50%;
	bottom: 50%;
	border-radius: 0 !important;
	width: 45px !important;
	z-index: 1;
}

.mblSwitch {
	width: 65px;
	float: right;
	display: block;
	clear: right;

	&:before {
		content: '';
		width: 85%;
		height: 65%;
		position: absolute;
		border: 2px solid @win-contrast-bg-color;
		margin: auto 0;
		top: 50%;
		bottom: 50%;
		z-index: 2;
	}

	&.mblSwitchOn .mblSwitchKnob {
	  left: 45px !important;
	}

	& .mblSwitchInner{
		width: 100%;
	}
}

.mblSwitch[disabled] {
	& .mblSwitchKnob,
	& .mblSwitchBgLeft {
		background-color: @win-disabled-color;
	}
	&:before {
		border-color: @win-disabled-color;
	}
}

.mblSwitchText {
	display: none !important;
}

.mblSwitchLabel {
	color: @win-foreground-color;
	position: relative;
	float: left;
	clear: both;
	margin: 3px 0;
}

.mblSwitchContainer {
	width: 100%;
	min-height: 27px;
	.default-vertical-margin;
}
