%fieldset
	.container
		.svg
			%input#checkbox-svg{:type => "checkbox"}
			- 2.times do
				%div
			%svg{:viewBox => "0 0 24 24"}
				- 2.times do
					%g
						%line{:x1 => "4.5", :x2 => "9.24", :y1 => "12.5", :y2 => "17.24"}
						%line{:x1 => "9.24", :x2 => "19.76", :y1 => "17.24", :y2 => "6.73"}
		%label{:for => "checkbox-svg"} SVG

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

.svg {
	position: relative;
	overflow: hidden;
	border-radius: 2px;
	background: mix($slate, $grey, 20%);
	div {
		opacity: 0;
		position: absolute;
		&:nth-of-type(1) {
			z-index: 0;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: mix(mix($slate, $grey, 20%), $blue, 90%);
		}
		&:nth-of-type(2) {
			transform-origin: center center;
			z-index: 1;
			top: calc(50% - 18px);
			left: calc(50% - 18px);
			border-radius: 100%;
			background: $blue;
			width: 36px;
			height: 36px;
		}
	}
	svg {
		position: relative;
		z-index: 2;
		display: block;
		width: 24px;
		height: 24px;
		line {
			stroke-width: 2px;
			stroke-linecap: round;
		}
		g {
			&:first-child {
				line {
					stroke: mix(white, $slate, 80%);
				}
			}
			&:last-child {
				line {
					opacity: 0;
					stroke: white;
					// stroke-dasharrays
					&:first-child {
						stroke-dasharray: 6.708;
						stroke-dashoffset: 6.708;
					}
					&:last-child {
						stroke-dasharray: 14.873;
						stroke-dashoffset: 14.873;
					}
				}
			}
		}
	}
	// moved the input below the div and svg styles
	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(1) {
				opacity: 1;
			}
		}
		&:active, &:checked {
			~ div:nth-of-type(2) {
				opacity: 1;
				transform: none;
			}
			~ svg {
				g:last-child {
					line {
						opacity: 1;
						stroke-dashoffset: 0;
					}
				}
			}
		}
		&:checked {
			~ svg {
				background: $blue;
			}
		}
	}
}