/* Control: Switch. */

.customize-control-zakra-toggle {
	position: relative;

	label {
		display: flex;
		flex-wrap: wrap;

		.customize-control-title {
			width: calc(100% - 55px);
		}

		.description {
			order: 99;
		}
	}

	.switch {
		border: 1px solid #b4b9be;
		display: inline-block;
		width: 35px;
		height: 12px;
		border-radius: 8px;
		background: #b4b9be;
		vertical-align: middle;
		position: relative;
		top: 4px;
		cursor: pointer;
		user-select: none;
		transition: background 350ms ease;

		&::after {
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: -3px;
			transition:
				all 350ms cubic-bezier(0, 0.95, 0.38, 0.98),
				background 150ms ease;
			background: #999;
			border: 1px solid rgba(0, 0, 0, 0.1);
			transform: translate3d(0, -50%, 0);
		}

		&::before {
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: -3px;
			transition:
				all 350ms cubic-bezier(0, 0.95, 0.38, 0.98),
				background 150ms ease;
			background: rgba(0, 0, 0, 0.2);
			transform: translate3d(0, -50%, 0) scale(0);
		}

		&:active::before {
			transform: translate3d(0, -50%, 0) scale(3);
		}
	}

	input:checked + .switch {

		&::before {
			background: rgba(0, 115, 170, 0.075);
			transform: translate3d(100%, -50%, 0) scale(1);
		}

		&::after {
			background: $c-primary;
			transform: translate3d(100%, -50%, 0);
		}

		&:active::before {
			background: rgba(0, 115, 170, 0.075);
			transform: translate3d(100%, -50%, 0) scale(3);
		}
	}
}