/* global stuff */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

/* displays and segments */

.display-group {
	display: flex;
	gap: min(2.5rem, 5vw);
}

.display {
	--width: min(10rem, 20vw);
	width: var(--width);
	aspect-ratio: 5/8;
	position: relative;
}

.segment {
	--color: #70e0f0;
	--unit: calc(0.2 * var(--width));
	--offset: 2px;
	--on: var(--unit) solid var(--color);
	--off: var(--unit) solid transparent;
	--off-half: calc(0.5 * var(--unit)) solid transparent;
	opacity: 0.05;
	position: absolute;
	border-radius: 100vw;
}

/* horizontal segments, top and bottom */

.segment:nth-child(1),
.segment:nth-child(2) {
	left: var(--offset);
	right: var(--offset);
	border-left: var(--off);
	border-right: var(--off);
}

.segment:nth-child(1) {
	top: 0;
	border-top: var(--on);
}

.segment:nth-child(2) {
	bottom: 0;
	border-bottom: var(--on);
}

/* horizontal segment, middle */

.segment:nth-child(3) {
	top: calc(50% - 0.5 * var(--unit));
	left: calc(3 * var(--offset));
	right: calc(3 * var(--offset));
	height: calc(var(--unit));
	background-color: var(--color);
	/* hexagon-shape */
	clip-path: polygon(
		0% 50%,
		var(--unit) 0%,
		calc(100% - var(--unit)) 0%,
		100% 50%,
		calc(100% - var(--unit)) 100%,
		var(--unit) 100%
	);
}

/* vertical segments, top */

.segment:nth-child(4),
.segment:nth-child(5) {
	top: var(--offset);
	height: calc(50% - var(--offset));
	border-top: var(--off);
	border-bottom: var(--off-half);
}

.segment:nth-child(4) {
	left: 0;
	border-left: var(--on);
}

.segment:nth-child(5) {
	right: 0;
	border-right: var(--on);
}

/* vertical segments, bottom */

.segment:nth-child(6),
.segment:nth-child(7) {
	height: calc(50% - var(--offset));
	bottom: var(--offset);
	border-top: var(--off-half);
	border-bottom: var(--off);
}

.segment:nth-child(6) {
	left: 0;
	border-left: var(--on);
}

.segment:nth-child(7) {
	right: 0;
	border-right: var(--on);
}

/* digit definitions */

.display[data-digit="0"] :not(:nth-child(3)),
.display[data-digit="1"] :is(:nth-child(5), :nth-child(7)),
.display[data-digit="2"] :not(:nth-child(4), :nth-child(7)),
.display[data-digit="3"] :not(:nth-child(4), :nth-child(6)),
.display[data-digit="4"] :not(:nth-child(1), :nth-child(2), :nth-child(6)),
.display[data-digit="5"] :not(:nth-child(5), :nth-child(6)),
.display[data-digit="6"] :not(:nth-child(5)),
.display[data-digit="7"] :is(:nth-child(1), :nth-child(5), :nth-child(7)),
.display[data-digit="8"] *,
.display[data-digit="9"] :not(:nth-child(6)) {
	opacity: 1;
}