input[type='checkbox'] {

	& ~ .switch {
		display: inline-block;
		height: 32px;
		line-height: 32px;
		padding-right: 70px;
		position: relative;
		cursor: pointer;

		&::before,
		&::after {
			@include vertical-center();
			content: '';
			position: absolute;
		}

		&::before {
			right: 0;
			display: block;
			width: 60px;
			height: 32px;
			border-radius: 32px;
			background-color: $red;
		}

		&::after {
			right: 30px;
			width: 28px;
			height: 28px;
			border-radius: 50%;
			background-color: $white;
			transition: right 0.3s;
		}
	}

	&:checked {

		& ~ .switch {

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

			&::after {
				right: 2px;
			}
		}
	}

	&:disabled {

		& ~ .switch {
			cursor: default;

			&::before {
				// background-color: $border-gray;
			}

			&::after {
				// background-color: $almost-white;
			}
		}
	}
}
