.pretty {
	&.p-switch {
		height: 17px;
		min-width: 29px;
		.state {
			@extend %posRelative;
			line-height: 17px;
			&:before {
				content: '';
				@extend %b1;
				border-radius: 60px;
				width: 26px;
				box-sizing: unset;
				height: 15px;
				@extend %posAbsolute;
				top: 0px;
				z-index: $pretty--z-index-back;
				@extend %transitionAll300;
			}
			label {
				text-indent: 36px;
				padding-left: 0;
				&:before,
				&:after {
					transition: all 0.5s ease;
					border-radius: 50%;
					left: 1px;
					top: 1px;
					border-color: transparent;
					transform: scale(0.8);
				}
			}
		}
		input {
			min-width: 28px;
			&:checked ~ .state {
				label {
					&:before,
					&:after {
						@extend %transitionAll300;
					}
					&:before {
						opacity: 0;
					}
					&:after {
						left: 12px;
					}
				}
			}
		}
		&.p-fill {
			input {
				&:checked ~ .state {
					label {
						&:before {
							opacity: 0;
						}
						&:after {
							left: 12px;
						}
					}
				}
			}
		}
		&.p-slim {
			.state {
				&:before {
					height: 0.1em;
					top: calc(50% - 0.1em);
				}
			}
		}
	}
}