style.scss

@use "sass:math";

$checkboxCount: 16;
$debug: false;
$isCodepen: false;

@function pow($number, $exponent) {
	$value: 1;

	@if $exponent > 0 {
		@for $i from 1 through $exponent {
			$value: $value * $number;
		}
	}

	@return $value;
}

:root {
	color-scheme: dark;
	font-size: min(1.4vw, 3.3vh);
	overflow: hidden;

	@if $debug {
		border: 1px solid darkKhaki;
	}
}

body {
	font-family: sans-serif;
	background-color: black;
	color: white;
	perspective: 25em;
	perspective-origin: 50% calc(50% - 2em);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	min-height: 99vh;
	min-width: 99vw;

	@if $debug {
		border: 1px solid sandyBrown;
	}

	* {
		transform-style: preserve-3d;
	}
}

main {
	text-align: center;

	@if $debug {
		border: 1px solid paleGreen;
	}
}

section.info {
	a {
		color: lightSkyBlue;
	}

	.no-javascript {
		color: yellow;
	}
}

footer {
	// position: absolute;
	// bottom: 0;

	flex-grow: 1;
	flex-basis: 1;
	width: 100%;
	text-align: center;
	display: flex;
	align-items: flex-end;
	justify-content: center;

	@if $debug {
		border: 1px solid paleTurquoise;
	}

	a {
		color: lightSkyBlue;
		text-decoration: none;
	}
}

section.addition {
	counter-reset: first-number second-number sum-number 0;

	table {
		font-size: inherit;
		color: white;
		background: transparent;
		display: block;
		width: 68rem;
		// padding-top: 4rem;
		:is(thead, tbody) {
			display: block;
		}
		@if $debug {
			border: 1px solid darkSeaGreen;
		}
		thead,
		tbody {
			display: block;
		}
		tbody {
			user-select: none;
		}
		tr {
			display: block;
			color: white;
			background: transparent;
			@if $debug {
				border: 1px solid red;
			}
			td {
				padding: 0;
				&:nth-of-type(1) {
					width: 50rem;
				}
				&:nth-of-type(2) {
					width: 8rem;
				}
				&:nth-of-type(3) {
					width: 8rem;
				}
			}
			&.numbers {
				height: 4em;
				td:first-of-type {
					transform: translateX(-1em) translateY(if($isCodepen, 0, -1em)) translateZ(-0.9em);
				}
			}
			&.operators {
				height: 1em;
			}
			td {
				display: inline-block;
				@if $debug {
					border: 1px solid aqua;
				}
				color: white;
				background: transparent;
				text-align: center;
			}
		}
	}

	:is(.operator, .number-display) {
		font-weight: bold;
		font-family: monospace;
		color: white;

		&.decimal {
			&::before {
				position: absolute;
				inset: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				@if $debug {
					border: 1px dotted yellow;
				}
			}
		}
		&.operator {
			transform: translateY(-0.5em);
			font-size: 2em;
		}
		&.number-display {
			width: 100%;
			height: 100%;
			// transform: translateY(0.4em);
			// min-width: 5em;
		}
		&.sum {
			// transform: translateY(4em);
		}
	}

	@each $row in ("first", "second", "sum") {
		.decimal.#{$row}::before {
			content: counter(#{$row}-number);
		}
	}

	input[type="checkbox"] {
		position: absolute;
		z-index: -1;
		visibility: hidden;
	}

	:is(.result-display, .labels) {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 1em;

		.wrapper {
			display: inline-block;
			width: 2em;
			height: 2em;

			.cube {
				display: inline-block;
				--global-transform: rotateX(calc(var(--is-one) * 90deg));

				width: 2em;
				height: 2em;
				color: black;
				font-weight: bold;
				font-family: monospace;
				padding: 1em;

				--is-one: 0;

				.side {
					position: absolute;
					width: 2em;
					height: 2em;
					background: #{rgba(lightBlue, 60%)};
					box-shadow: 0 0 0.5em #000a inset;
					transition: transform 250ms ease-in-out;
					&::before {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.front {
					transform: var(--global-transform) translateZ(1em);
					&::before {
						content: "0";
					}
				}
				.right {
					transform: var(--global-transform) rotateY(90deg) translateZ(1em);
				}
				.back {
					transform: var(--global-transform) rotateY(180deg) translateZ(1em);
				}
				.left {
					transform: var(--global-transform) rotateY(-90deg) translateZ(1em);
				}
				.top {
					transform: var(--global-transform) translateY(-1em) rotateX(90deg);
				}
				.bottom {
					transform: var(--global-transform) translateY(1em) rotateX(90deg) rotateZ(180deg)
						rotateY(180deg);
					&::before {
						content: "1";
					}
				}
			}

			.placeholder {
				.front::before {
					content: "";
				}
				.bottom::before {
					content: "";
				}
			}
		}
	}

	.hexadecimal {
		@for $i from 0 to $checkboxCount {
			--bit-#{$i}-is-one: 0;
			&.sum {
				--bit-#{$i}-is-one: var(--check-#{$i}-sum);
			}
		}
		display: flex;
		justify-content: center;
		align-items: center;
		@if $debug {
			border: 1px solid lime;
		}
		// height: 7em;
		// width: 100%;
		&.sum::before {
			counter-reset: highest-sum-bit var(--check-#{$checkboxCount}-sum);
			content: counter(highest-sum-bit);
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			inset: 0;
			transform: translateX(-2.5ch) translateY(0.2ch);
			@if $debug {
				border: 1px dotted magenta;
			}
		}
		.hex-digit {
			font-family: monospace;
			display: inline-block;
			height: 1em;
			width: 1ch;
			clip-path: inset(0);
			@if $debug {
				border: 1px solid orange;
			}
			.hex-chars {
				position: absolute;
				left: 0;
				transition: transform 0.3s;
				transform: translateY(calc(-2em * var(--hex-digit)));
				div {
					height: 2em;
				}
			}
		}
		@for $hexDigit
			from 0
			to
			(if($isCodepen, ceil($checkboxCount / 4), math.ceil(math.div($checkboxCount, 4))))
		{
			.digit-#{$hexDigit} {
				--hex-digit: calc(
					var(--bit-#{$hexDigit * 4 + 0}-is-one) *
						1 +
						var(--bit-#{$hexDigit * 4 + 1}-is-one) *
						2 +
						var(--bit-#{$hexDigit * 4 + 2}-is-one) *
						4 +
						var(--bit-#{$hexDigit * 4 + 3}-is-one) *
						8
				);
			}
		}
	}

	@for $i from 0 through $checkboxCount {
		$isFirstBox: ($i == 0);
		input#check-first-#{$i} {
			@each $isFirstChecked in (true, false) {
				&#{if($isFirstChecked, ":checked", ":not(:checked)")} {
					& ~ input#check-second-#{$i} {
						@each $isSecondChecked in (true, false) {
							&#{if($isSecondChecked, ":checked", ":not(:checked)")} {
								& ~ table :is(.result-display, .number-display.hexadecimal.sum) {
									--check-#{$i}-sum: #{if(
											$isFirstBox,
											if(
												$isFirstChecked,
												if($isSecondChecked, 0, 1),
												if($isSecondChecked, 1, 0)
											),
											if(
												$isFirstChecked,
												if(
													$isSecondChecked,
													calc(var(--check-#{$i - 1}-carry)),
													calc(1 - var(--check-#{$i - 1}-carry))
												),
												if(
													$isSecondChecked,
													calc(1 - var(--check-#{$i - 1}-carry)),
													calc(var(--check-#{$i - 1}-carry))
												)
											)
										)};
									--check-#{$i}-carry: #{if(
											$isFirstBox,
											if(
												$isFirstChecked,
												if($isSecondChecked, 1, 0),
												if($isSecondChecked, 0, 0)
											),
											if(
												$isFirstChecked,
												if($isSecondChecked, 1, calc(var(--check-#{$i - 1}-carry))),
												if($isSecondChecked, calc(var(--check-#{$i - 1}-carry)), 0)
											)
										)};
								}
							}
						}
					}
				}
			}
		}

		@each $row in ("first", "second") {
			input#check-#{$row}-#{$i}:checked {
				counter-increment: #{$row}-number #{pow(2, $i)} sum-number #{pow(2, $i)};

				& ~ table .#{$row}-labels {
					label[for="check-#{$row}-#{$i}"] {
						--is-one: 1;
					}
				}

				& ~ table .hexadecimal.#{$row} {
					--bit-#{$i}-is-one: 1;
				}
			}
		}

		:is(.result-display, .number-display.hexadecimal.sum) {
			--check-#{$checkboxCount}-sum: var(--check-#{$checkboxCount - 1}-carry);

			.show-check.check-#{$i} {
				--is-one: var(--check-#{$i}-sum);
			}
		}
	}
}