@import "~scss/_mixins";

.switch { 
	width: 26px; height: 16px; background: var(--color-shape-secondary); border-radius: 16px; position: relative; 
	display: inline-block; vertical-align: middle;
}
.switch {
	.inner { 
		width: 12px; height: 12px; border-radius: 100%; background: var(--color-bg-primary); position: absolute; left: 2px; top: 2px;
		transition: $transitionAllCommon; box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1);
	}	
}
.switch.big { width: 40px; height: 24px; border-radius: 24px; }
.switch.big {
	.inner { width: 20px; height: 20px; }
}

.switch.active { background: var(--color-text-secondary); }
.switch.green.active { background: var(--color-lime); }
.switch.orange.active { background: var(--color-system-accent-50); }
.switch.isReadonly { cursor: default; }

.switch.active {
	.inner { left: auto; right: 2px; }
}