.switch{
	position: relative;
	display: inline-block;
	height: 36px;
	width: 100%;
	//border: 1px solid red;               //←←←←←←←←←←←←←←←←←←←←	
	
	@include leftFlex;

			& input{
				display: inline-block;
				position: absolute;
				float: right;
				left: auto;
				right: 16px;

				width: 32px;
				height: 14px;

				background-color: lighten($c-b, 67%);
				border-radius:8px;
				
				outline: none;
				-webkit-appearance: none ;	
		        appearance: none ;	
		        cursor: pointer;

		        flex-shrink: 0;


				&::before{ //circle
					position: absolute;
					content: '';
					top:  -3.5px;
					left: 0px;

					width: 20px;
					height: 20px;
					border-radius: 50%;
					@include selectNo;
					@include bs-1;

				   background-color: $c-w;
				   transition: (0.250s, emph);
				   //border: 1px solid red;
				}

				&::after{ //gb
					position: absolute;
					content: '';
					top: -16px;
					left: -16px;

					width: 48px;
					height: 48px;
					border-radius: 50%;

					@include selectNo;
					@include bs-1;
					opacity: 0;

				   background-color: $c-p;
				}

				&:hover::after{
				   opacity: 0.02;
				   background-color: $c-p;
				}

				&:active::after{
				   opacity: 0.08;
				   background-color: $c-p;
				}

				&:checked{

					background-color: lighten($c-p, 36%);
					&::before{
						left:auto;
						right: 0px; 
						background-color: $c-p;
					}

					&:hover::after{
					left:auto;
					   opacity: .16;
					   transform: scale(1);
					   transition: all .050s;
					   background-color: $c-p;
					}					
				}
			}


		& label{
			display: inline-block;
			position: absolute;
			left: 16px;


			@include font(body2, $c-b);
			@include selectNo;
			font-weight: 500;
			
			//border: 0.5px solid green;               //←←←←←←←←←←←←←←←←←←←←
		}

}


// input[type="radio"]:checked {
//   box-shadow: 0 0 0 3px orange;
// }