.#{$selector} {
	/* Remove default checkbox */
	[type="checkbox"]:not(:checked),
	[type="checkbox"]:checked {
		position: absolute;
		left: -9999px;
		opacity: 0;
		visibility: hidden;
	}

	// Checkbox Styles
	[type="checkbox"] {
		// Text Label Style
		+ label {
			position: relative;
			padding-left: 35px;
			cursor: pointer;
			display: inline-block;
			height: auto;
			min-height: 28px;
			line-height: 28px;
			font-size: 1em;
			font-weight: 400;
			color: $secondary-text-color;
			word-wrap: break-word;
			white-space: normal;

			-webkit-user-select: none; /* webkit (safari, chrome) browsers */
			-moz-user-select: none; /* mozilla browsers */
			-khtml-user-select: none; /* webkit (konqueror) browsers */
			-ms-user-select: none; /* IE10+ */
		}

		/* checkbox aspect */
		+ label:before,
		+ label:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 24px;
			height: 24px;
			z-index: 0;
			border: 2px solid $radio-empty-color;
			border-radius: 1px;
			margin: 1px 4px 4px 4px;
			transition: 0.2s;
		}

		+ label:after {
			border: 0;
			border-radius: 2px;
			-webkit-transform: scale(0);
			        transform: scale(0);
			font-family: "ipt-icomoon";
			font-family: "ipt-icomoon";
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			-webkit-font-smoothing: antialiased;
			color: $radio-icon-color;
			line-height: 24px;
			text-align: center;
		}

		+ label:not([data-labelcon]):after {
			top: -1px;
			left: -3px;
			width: 12px;
			height: 22px;
			background-color: transparent;
			border: 2px solid transparent;
			z-index: 0;
			transition: border 0.25s;
		}

		&:not(:checked):disabled + label:before {
			border: none;
			background-color: $input-disabled-color;
		}

		// Focused styles
		&:not(:disabled) + label:focus:before {
			box-shadow: 0 0 0 8px fade-out($box-shadow-color, 0.9);
		}

		&:not(:disabled):checked + label:focus:before {
			box-shadow: 0 0 0 8px fade-out($primary-color, 0.8);
		}
	}

	[type="checkbox"]:checked {
		+ label:before {
			border-color: $primary-color;
			background-color: $primary-color;
		}

		+ label:after {
			content: attr(data-labelcon);
			-webkit-transform: scale(1);
			        transform: scale(1);
		}

		+ label:not([data-labelcon]):after {
			border-top: 2px solid transparent;
			border-left: 2px solid transparent;
			border-right: $radio-border;
			border-bottom: $radio-border;
			-webkit-transform: rotate(40deg);
			        transform: rotate(40deg);
			-webkit-backface-visibility: hidden;
			        backface-visibility: hidden;
			-webkit-transform-origin: 100% 100%;
			        transform-origin: 100% 100%;
		}
		+ label:not([data-labelcon]):before {
			background-color: transparent;
		}

		&:disabled + label:before {
			border-color: $input-disabled-color;
			background-color: $input-disabled-solid-color;
		}
	}

	// As buttons
	[type="checkbox"].as-eform-button {
		+ label {
			border: 1px solid $radio-empty-color;
			padding: 6px 24px 6px 48px;
			border-radius: 4px;
			box-shadow: inset 0 1px 2px fade-out($radio-empty-color, 0.7),
				0 0 0 0 transparent;
			width: 100%;

			&::before,
			&::after {
				margin: 0;
				top: 8px;
				left: 12px;
			}
		}
		&:checked {
			+ label {
				border-color: $primary-color;
				box-shadow: inset 0 1px 2px fade-out($primary-color, 0.7),
					0 0 0 0 transparent;
			}
		}
	}
}