.checkbox-box-sizes() {
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	border: 2px solid #999;

	transform: rotate(0deg);
}

.checkbox-mark-sizes() {
	top: -1px;
	left: 5px;
	width: 10px;
	height: 18px;

	border-width: 0 2px 2px 0;

	transform: rotate(45deg);
}

.checkbox-result-sizes() {
	top: 13px;
	left: 5px;
	width: 4px;
	height: 4px;

	transform: rotate(45deg);
}

.e-component {

	&.e-select {

		select:focus {
			outline: 1px dotted;
		}
	}

	&.e-checkbox {

		margin-bottom: 6px;
		margin-left: -2px;
		padding: 2px;

		cursor: pointer;

		&:focus {
			outline: 1px dotted;
		}

		.e-checkbox-icon {
			padding: 1px 0 0 1px;
		}

		&.disabled {
			cursor: not-allowed;
			opacity: 0.5;
		}
	}

	&.e-radio {

		cursor: pointer;

		&.disabled {
			cursor: not-allowed;
			opacity: 0.5;
		}
	}
}

.e-component.material-design {


	&.e-checkbox {

		margin-top: 2px;
		padding: 2px 2px 1px 2px;

		.sub-checkbox-container {
			display: inline-block;
			position: relative;
			transform: translateZ(0);
			width: 18px;
			height: 18px;
			vertical-align: bottom;
			margin-bottom: 3px;
		}

		.sub-label {
			padding-left: 12px;
		}

		.sub-checkbox {
			position: absolute;
			box-sizing: border-box;
			margin-top: 1px;

			.checkbox-box-sizes();
		}

		.sub-checkbox.checked {
			border-color: #0F9D58;

			.checkbox-mark-sizes();
		}

		// animation
		.sub-checkbox.checked {
			&.box {
				border: solid 2px;
				animation: box-shrink 140ms ease-out forwards;
			}
			&.checkmark {
				animation: checkmark-expand 140ms ease-out forwards;
			}
		}

		.sub-checkbox.unchecked {
			&.box {
				animation: box-expand 140ms ease-out forwards;
			}
			&.checkmark {
				transform: rotate(45deg);
				animation: checkmark-shrink 140ms ease-out forwards;
			}
		}
	}
}

@keyframes box-shrink {
	0% { .checkbox-box-sizes(); }
	100% { .checkbox-result-sizes(); }
}

@keyframes checkmark-expand {
	0% { .checkbox-result-sizes(); }
	100% { .checkbox-mark-sizes(); }
}

@keyframes checkmark-shrink {
	0% { .checkbox-mark-sizes(); }
	100% { .checkbox-result-sizes(); }
}

@keyframes box-expand {
	0% { .checkbox-result-sizes(); }
	100% { .checkbox-box-sizes(); }
}