/* C H E C K B O X ------------------------------------------------------------------------------ */

.checkbox { position: relative; cursor: pointer; }

.checkbox svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  }

.checkbox svg .a, .b { fill: none; stroke: var(--col 2); stroke-linecap: round; }

.checkbox svg:nth-of-type(1) .a, .checkbox svg:nth-of-type(1) .b { stroke-width: 2rem; }

.checkbox svg:nth-of-type(1) .a { stroke-dasharray: 972; stroke-dashoffset: 0; }

.checkbox svg:nth-of-type(1) .b { stroke-linejoin: round; stroke-dasharray: 250; stroke-dashoffset: 250; }

.checkbox.checked svg:nth-of-type(1) .a { transition: 200ms; stroke-dashoffset: 226; }

.checkbox.checked svg:nth-of-type(1) .b { transition: 200ms; stroke-dashoffset: 500; }

.checkbox.crossed svg:nth-of-type(1) { display: none; }

/* C H E C K - M A R K -------------------------------------------------------------------------- */

.check-mark svg * {
	transition:
		stroke 300ms,
		stroke-dashoffset 300ms;
	stroke: var(--col 2);
	stroke-dasharray: 768;
	stroke-linecap: round;
	stroke-width: 5.625rem;
}

.check-mark svg .a { stroke-dashoffset: 474; }

.check-mark svg .b { stroke-dashoffset: 768; }

.check-mark svg .c { stroke-dashoffset: 0; }

.check-mark svg .d { stroke-dashoffset: 768; }

/* b a d ---------------------------------------------------------------------------------------- */

.check-mark.bad svg { transition: top 300ms, left 300ms, transform 300ms; left: -25%; }

.check-mark.bad svg * { transition: stroke 300ms 300ms, stroke-dashoffset 300ms 300ms; stroke: hsl(8 100% 59%); }

.check-mark.bad svg .a { stroke-dashoffset: 474; }

.check-mark.bad svg .b { stroke-dashoffset: 0; }

.check-mark.bad svg .c { stroke-dashoffset: 256; }

.check-mark.bad svg .d { stroke-dashoffset: 256; }

/* g o o d -------------------------------------------------------------------------------------- */

.check-mark.good svg { transition: top 300ms, left 300ms 300ms, transform 300ms 300ms; top: 12%; left: -7%; transform: rotate(90deg); }

.check-mark.good svg * { stroke: hsl(74 73% 51%); }

.check-mark.good svg .a { stroke-dashoffset: 256; }

.check-mark.good svg .b { stroke-dashoffset: 768; }

.check-mark.good svg .c { stroke-dashoffset: 600; }

.check-mark.good svg .d { stroke-dashoffset: 768; }

/* C R O S S ------------------------------------------------------------------------------------ */

svg.cross * { stroke: var(--col 2); stroke-width: 78; }

/* H I N T S ------------------------------------------------------------------------------------ */

.hints .a { fill: var(--col 2); }

/* V I S I B I L I T Y -------------------------------------------------------------------------- */

.visibility .a, .visibility .b { fill: var(--col 2); }

.visibility .b { fill-rule: evenodd; stroke-width: 32; }

.visibility .c, .visibility .d { transition: 200ms ease-in-out; stroke-dasharray: 1000; stroke-dashoffset: 1000; fill: none; }

.visibility .c { stroke: inherit; stroke-width: 80px; }

.visibility .d { stroke: var(--col 2); stroke-linecap: round; stroke-width: 47px; }

.visibility.on .c, .visibility.on .d { stroke-dashoffset: 0; }