/*
 * 22 February 2022
 * CSS 7 Segment Digits (prototype)
 */

.d {
	--s: 15vmin;
	--pt: polygon(9.2% 0, 89.8% 0, 68.2% 13%, 31.8% 13%); /* segments A & D */
	--ps: polygon(26% 33%, 26% 76%, -0.4% 98.4%, 0 94%, 0 1.6%); /* segments B, C, E & F */
	--pc: polygon(26.6% 0, 73.4% 0, 92% 50%, 73.4% 100%, 26.6% 100%, 8% 50%); /* segment G */
	--m: 0.08;

	color: hsl(202, 100%, 51%);
	position: relative;
	width: var(--s);
	height: calc(var(--s) * (159 / 88));
}

.d,
.d div {
	border-radius: calc(var(--s) * 0.1066);
	overflow: hidden;
}

.d::before,
.d::after {
	content: '';
	-webkit-clip-path: var(--pt);
	clip-path: var(--pt);
}

.d::before,
.d::after,
.d div,
.d div::before,
.d div::after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.d::before,
.d::after,
.d .a,
.d div::before,
.d div::after {
	background: currentColor;
}

.d .a {
	top: 50%;
	height: 13%;
	transform: translateY(-50%);
	-webkit-clip-path: var(--pc);
	clip-path: var(--pc);
}

.d .b {
	height: 50%;
}

.d .b::before,
.d .b::after {
	content: '';
	-webkit-clip-path: var(--ps);
	clip-path: var(--ps);
}

.d .b::after {
	transform: rotateY(180deg);
}

.d .c,
.d::after {
	transform: rotateX(180deg);
}

.d .c {
	transform-origin: 0 100%;
}

.d::before {
	opacity: var(--A, 1);
}
.e::after {
	opacity: var(--B, 1);
}
.c::after {
	opacity: var(--C, 1);
}
.d::after {
	opacity: var(--D, 1);
}
.c::before {
	opacity: var(--E, 1);
}
.e::before {
	opacity: var(--F, 1);
}
.a {
	opacity: var(--G, 1);
}

.d0 {
	--G: var(--m);
}

.d1 {
	--A: var(--m);
	--D: var(--m);
	--E: var(--m);
	--F: var(--m);
	--G: var(--m);
	--m: 0;
	margin-left: calc(var(--s) * -0.742);
}

.d2,
.d3,
.d7 {
	--F: var(--m);
}

.d3,
.d4,
.d5,
.d7,
.d9 {
	--E: var(--m);
}

.d2 {
	--C: var(--m);
}

.d4 {
	--A: var(--m);
	--D: var(--m);
}

.d5,
.d6 {
	--B: var(--m);
}

.d7 {
	--D: var(--m);
	--G: var(--m);
}

body > .d:not(:last-of-type) {
	margin-right: calc(var(--s) * 0.13);
}

/* === quick reset === */
html,
body {
	height: 100%;
}

* {
	padding: 0;
	margin: 0;
}

body {
	background: #000;
	display: flex;
	justify-content: center;
	align-items: center;
}