input[type='checkbox'] {
	display: none;

	& ~ .checkbox {
		position: relative;
		padding-left: 20px;
		font-size: 0.875rem;
		display: inline-block;

		&::before {
			content: '';
			width: 16px;
			height: 16px;
			position: absolute;
			top: 0;
			left: 0;
			background-image: url('/images/sprite-checkbox-radio.svg');
			background-repeat: no-repeat;
			background-position: 0 0;
			cursor: pointer;
		}
	}

	&:checked {

		& ~ .checkbox {

			&::before {
				background-position: -18px 0;
			}
		}
	}

	&:disabled {

		& ~ .checkbox {

			&::before {
				cursor: default;
				background-position: -54px 0;
			}
		}
	}
}
