.p5-switch {
	user-select: none;
	display: inline-block;
	.p5-switch-box {
		background: #ccc;
		border-radius: 24px;
		display: inline-block;
		height: 24px;
		width: 48px;
		position: relative;
		cursor: pointer;
		&.p5-switch-box-large {
			width: 60px;
		}
		&.p5-switch-box-disabled {
			cursor: not-allowed;
		}
		.p5-switch-ball {
			position: absolute;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #fff;
			top: 0;
			left: 0;
			margin: 2px;
			transition: all 0.2s ease-in-out;
		}
		&.p5-switch-ball-on {
			// background: #39f;
			@include bgcolor;
			.p5-switch-ball {
				left: 100%;
				transform: translateX(-100%);
				margin-left: -2px;
			}
			.p5-switch-on-text {
				display: block;
			}
			.p5-switch-off-text {
				display: none;
			}
		}
		.p5-switch-text {
			color: #fff;
			height: 24px;
			line-height: 24px;
			font-size: 14px;
			display: block;
		}
		.p5-switch-on-text {
			margin-left: 6px;
			margin-right: 26px;
			display: none;
		}
		.p5-switch-off-text {
			margin-left: 26px;
			margin-right: 6px;
		}
	}
}