﻿.ºswitch{
	display: flex;
	height: var(--control-height);
	align-items: center;
}
	.ºswitch .button{
		position: relative;
		min-width: 44px;
		height: 24px;
		background: var(--control-border-color);
		border-radius: 16px;
		cursor: pointer;
	}
		.ºswitch .button::before{
			content: '';
			position: absolute;
			margin: 4px;
			left: 0;
			background: var(--color-12);
			width: 16px; height: 16px;
			border-radius: 16px;
			transition: left .2s;
		}
		.ºswitch.checked .button{
			background: var(--color-5);
		}
			.ºswitch.checked .button::before{
				left: 20px;
			}
		.ºswitch:focus .button{
			box-shadow: 
				inset 0 0 0 1px var(--color-border-hover),
				0 0 0 3px var(--control-border-hover);
		}
	.ºswitch .label:not(:empty){
		padding: 0 0 0 var(--size-2);
		line-height: var(--line-height);
		white-space: nowrap;
	}
	
.ºswitch.disabled > .button,
.disabled .ºswitch > .button,
.ºswitch.no-editable > .button,
.no-editable .ºswitch > .button{
	opacity: .55
}

.ºswitch.error{
	background: var(--control-error-background);
	border-radius: var(--control-border-radius-2);
	animation: blinkBackgroundError ease-in-out 1s infinite alternate;  /* IE 10+, Fx 29+ */
}
	.ºswitch.error .label{
		color: var(--control-error-color);
	}