%fieldset
	.container
		.symbol
			%input#checkbox-sym{:type => "checkbox"}
			- 3.times do
				%div ✓
		%label{:for => "checkbox-sym"} Symbol

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

.symbol {
	position: relative;
	overflow: hidden;
	border-radius: 2px;
	background: mix($slate, $grey, 20%);
	width: 24px;
	height: 24px;
	div {
		position: absolute;
		&:nth-of-type(1) {
			transition: opacity 150ms ease-out, transform 0ms 150ms;
			transform: scale(0) translateZ(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;
			color: transparent;
			font-size: 0;
		}
		&:nth-of-type(2), &:nth-of-type(3) {
			transition: all 150ms ease-out;
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: center;
			z-index: 2;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 18px;
		}
		&:nth-of-type(2) {
			color: rgba(white, .2);
		}
		&:nth-of-type(3) {
			opacity: 0;
			color: white;
		}
	}
	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: translateZ(0);
				}
				&:nth-of-type(3) {
					opacity: 1;
				}
			}
		}
		&:checked {
			~ div:nth-of-type(2) {
				background: $blue;
			}
		}
	}
}