index.scss

$focus-color: #08f;


body {
	font-family: 'Ubuntu', sans-serif;
	font-weight: 300;

	box-sizing: border-box;
	margin: 0;
	padding: 1rem;
	width: 100vw;
	height: 100vh;

	display: flex;
	flex-direction: column;
	gap: 1rem;
}

button {
	font: inherit;
}

::selection {
	background-color: $focus-color;
	color: #fff;
}

.section {

	&.section-top, &.section-bottom {
		box-sizing: border-box;
		height: 3rem;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		a {
			color: $focus-color;
		}

	}


	&.section-main {
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;


		.canvas {
			max-width: 100%;
			max-height: 100%;


			.network path {
				fill: none;
				stroke: #000;
				stroke-width: 4;
			}

			.text text {
				fill: #fff;
				text-anchor: middle;
				dominant-baseline: middle;
				font-size: .8rem;
				font-weight: 400;
			}

			.weight, .in {
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				border: none;
				outline: 0;
				font-size: inherit;
				font-family: inherit;
				font-weight: inherit;
				margin: 0;
				padding: 0 .25rem;
				background-color: #eee;
				border-radius: 6px;

				&:focus {
					box-shadow: 0 0 0 2px $focus-color inset;
				}

			}

			.in {
				background-color: #222;
				color: #fff;
			}

		}

	}




	.layer-labels {
		height: 100%;
		flex-grow: 1;
		display: flex;
		justify-content: space-evenly;
	}


	.layer-label, .button {
		position: relative;
		box-sizing: border-box;
		min-width: 8rem;
		height: 100%;
		background-color: #eee;
		border: none;
		border-radius: .5rem;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		outline: 0;


		input {
			position: absolute;
			box-sizing: border-box;
			margin: 0;
			padding: .5rem;
			border: none;
			height: 100%;
			width: 100%;
			background-color: #eee;
			font-size: 1rem;
			font-family: inherit;
			font-weight: inherit;
			text-align: center;
			outline: 0;
			opacity: 0;
		}
		&:hover input, input:focus { opacity: 1 }

		&:hover input {
			background-color: #ddd;
		}

		&:focus-within {
			box-shadow: 0 0 0 .25rem $focus-color;
		}

	}

	.button {
		padding: 0;
		min-width: initial;
		width: 3rem;
		user-select: none;
		cursor: default;


		&:hover {
			background-color: #ddd;
		}

		&.button-add { color: #0a4 }
		&.button-remove { color: #c00 }

	}


	.function-selector {
		display: flex;
		gap: .5rem;

		input {
			display: none;

			&:checked + .function {
				background-color: $focus-color;
				color: #fff;
			}
		}

		.function {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			height: 100%;
			padding: .4rem;
			border-radius: .5rem;

			&:hover {
				background-color: #eee;
			}

			.stack, .fraction {
				display: flex;
				flex-direction: column;
				padding: 0 .2em;
				line-height: 1;
			}

			.fraction {
				text-align: center;

				> :first-child {
					border-bottom: 1px solid;
				}

			}

		}
	}

	.copyright .copy {
		display: inline-block;
		transform: rotate(180deg);
	}


}