// Variables.
@import "variables";

.customize-control-login-designer-toggle {

	.toggle--wrapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;

		.customize-control-title {
			flex: 2 0 0;
			vertical-align: middle;
			margin-bottom: 0;
		}

		input[type="checkbox"] {
			display: none;
		}

		label {
			background-color: #555d66;
			border-radius: 14px;
			cursor: pointer;
			display: inline-block;
			height: 20px;
			outline: none;
			position: relative;
			top: 2px;
			right: 0;
			transition: background 0.2s ease;
			user-select: none;
			width: 34px;

			&:after,
			&:before {
				display: block;
				position: absolute;
				content: "";
			}

			&:after {
				border-radius: 50%;
				border: 2px solid #555d66;
				box-sizing: border-box;
				height: 12px;
				left: 4px;
				top: 4px;
				transition: transform 0.2s ease, background 0.2s ease;
				width: 12px;
			}

			&:before {
				background-color: $background;
				border-radius: 60px;
				bottom: 2px;
				left: 2px;
				right: 2px;
				top: 2px;
				transition: background 0.2s ease;
			}
		}

		input[type="checkbox"]:checked + label {
			background-color: $customizer_blue;

			&:after {
				background-color: $customizer_blue;
				border: 2px solid $white;
				transform: translateX(14px);
			}

			&:before {
				background-color: $customizer_blue;
			}
		}
	}

	&:hover .toggle--wrapper label:before {
		background-color: #d9dcdf;
	}
}