%fieldset
	.container
		.line
			%input#checkbox-html{:type => "checkbox"}
			- 3.times do
				%div
		%label{:for => "checkbox-html"} HTML

fieldset {
	.container {
		display: flex;
		align-items: center;
		align-content: center;
	}
	label {
		cursor: pointer;
		margin-left: $p/2;
	}
}

.line {
	position: relative;
	overflow: hidden;
	background: mix($slate, $grey, 20%);
	border-radius: 2px;
	width: 24px;
	height: 24px;
	div {
		position: absolute;
		&:nth-of-type(1) {
			transition: opacity 150ms ease-out, transform 0ms 150ms;
			transform: scale(0);
			will-change: transform, opacity;
			transform-origin: center center;
			opacity: 0;
			z-index: 1;
			top: calc(50% - 18px);
			left: calc(50% - 18px);
			border-radius: 100%;
			background: $blue;
			width: 36px;
			height: 36px;
		}
		// checkmarks
		&:nth-of-type(2), &:nth-of-type(3) {
			z-index: 2;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			&:before, &:after {
				transform-origin: left center;
				content: "";
				display: block;
				position: absolute;
				height: 2px;
				border-radius: 2px;
			}
			// shorter line
			&:before {
				bottom: 10px;
				left: 3px;
				width: 8px;
			}
			// longer line
			&:after {
				bottom: 5px;
				right: -1px;
				width: 17px;
			}
		}
		&:nth-of-type(2) {
			transition: all 150ms ease-out;
			&:before, &:after {
				background: mix(white, $slate, 80%);
			}
			// rotate into place
			&:before {
				transform: rotate(45deg);
			}
			&:after {
				transform: rotate(-45deg);
			}
		}
		&:nth-of-type(3) {
			&:before, &:after {
				opacity: 0;
				background: white;
			}
			// rotate and scale into place
			&:before {
				transition: transform 100ms ease-out;
				transform: rotate(45deg) scaleX(0);
			}
			&:after {
				transition: transform 200ms ease-out 100ms;
				transform: rotate(-45deg) scaleX(0);
			}
		}
	}
	input {
		cursor: pointer;
		appearance: none;
		opacity: 0;
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		&:hover {
			~ div:nth-of-type(2) {
				background: rgba($blue, .1);
			}
		}
		&:active, &:checked {
			~ div {
				&:nth-of-type(1) {
					opacity: 1;
					transition: transform 200ms ease-out;
					transform: none;
				}
				&:nth-of-type(3) {
					&:before, &:after {
						opacity: 1;
					}
					&:before {
						transform: rotate(45deg);
					}
					&:after {
						transform: rotate(-45deg);
					}
				}
			}
		}
		&:checked {
			~ div:nth-of-type(2) {
				background: $blue;
			}
		}
	}
}