.input {
	&.radio {
		min-height: 13px;
		position: relative;

		input {
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			outline: 0;
			z-index: -1;
			width: 0;
			height: 0;

			&:checked + label::after {
				opacity: 1;
			}
		}

		label {
			cursor: pointer;
			user-select: none;
			padding-left: 20px;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 15px;
				height: 15px;
				border-width: 1px;
				border-radius: 50%;
			}

			&::after {
				content: '';
				position: absolute;
				top: 4px;
				left: 4px;
				width: 7px;
				height: 7px;
				border-radius: 50%;
				opacity: 0;
				transition: opacity 0.2s ease-out;
			}
		}
	}

	&.checkbox.toggle {
		min-height: 20px;
		position: relative;

		input {
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			outline: 0;
			z-index: -1;
			width: 0;
			height: 0;

			&:checked + label::after {
				left: 25px;
			}
		}

		label {
			cursor: pointer;
			user-select: none;
			display: block;
			min-height: 20px;
			vertical-align: top;

			&::before {
				display: block;
				position: absolute;
				content: '';
				z-index: 0;
				top: 0;
				left: 0;
				box-shadow: none;
				width: 40px;
				height: 16px;
				border-radius: 50px;
				transition: background-color 0.2s ease-out;
			}

			&::after {
				content: '';
				position: absolute;
				left: 1px;
				top: 1px;
				border-radius: 50%;
				width: 14px;
				height: 14px;
				z-index: 1;
				transition: left 0.2s ease-out;
			}
		}
	}
}
