@import "../variables.scss";

.jet-ui_switcher {
	cursor: pointer;
	position: relative;
	width: 36px;
	padding: 10px 0;

	&-panel {
		width: 100%;
		height: 12px;
		border-radius: 6px;
		background: $switcher-panel-bg-color--off;
		transition: $transition;
	}
	&-trigger {
		position: absolute;
		width: 18px;
		height: 18px;
		left: 0;
		top: 50%;
		margin-top: -9px;
		border-radius: 100%;
		background: $switcher-trigger-bg-color--off;
		box-shadow: 0px 1px 4px rgba(35, 40, 45, 0.24);
		transition: $transition;
	}

	&--on &-panel {
		background: $switcher-panel-bg-color--on;
	}

	&--on &-trigger {
		left: calc(100% - 18px);
		background: $switcher-trigger-bg-color--on;
	}
}
