/* SwitchComponent */

.dom.switch-component {
	position: relative;
	background-color: var(--dom-background-color);
	border: solid 1px var(--dom-secondary-color);
	height: 30px;
	width: 42px;
	cursor:  pointer;
}

.dom.switch-component .handle {
	color: var(--dom-background-color);
	text-align: center;
	line-height: 34px;
	background-color: var(--dom-primary-color);
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
}

.dom.switch-component.on .handle {
	left: 0;
}

.dom.switch-component.off .handle {
	right: 0;
}