.sevenseg-row {
  display: flex;
  align-items: center;
  user-select: none;
}

.sevenseg-digit {
  position: relative;
  width: 0.58em;
  height: 1em;
  margin: 0 0.055em;
  flex-shrink: 0;
}

.sevenseg-seg {
  position: absolute;
  background: rgba(255, 20, 20, 0.09);
  transition: background 0.08s linear, box-shadow 0.08s linear;
}

.sevenseg-seg.on {
  background: #ff1a1a;
  box-shadow:
    0 0 0.05em rgba(255, 40, 40, 0.95),
    0 0 0.14em rgba(255, 30, 30, 0.75),
    0 0 0.3em rgba(255, 20, 20, 0.45);
}

.sevenseg-seg.h {
  left: 0.09em;
  width: 0.4em;
  height: 0.1em;
  clip-path: polygon(14% 0%, 86% 0%, 100% 50%, 86% 100%, 14% 100%, 0% 50%);
}
.sevenseg-seg.a { top: 0; }
.sevenseg-seg.g { top: calc(50% - 0.05em); }
.sevenseg-seg.d { bottom: 0; }

.sevenseg-seg.v {
  width: 0.1em;
  height: 0.41em;
  clip-path: polygon(0% 14%, 50% 0%, 100% 14%, 100% 86%, 50% 100%, 0% 86%);
}
.sevenseg-seg.f { left: 0; top: 0.045em; }
.sevenseg-seg.b { right: 0; top: 0.045em; }
.sevenseg-seg.e { left: 0; bottom: 0.045em; }
.sevenseg-seg.c { right: 0; bottom: 0.045em; }

.sevenseg-colon {
  position: relative;
  width: 0.18em;
  height: 1em;
  margin: 0 0.02em;
  flex-shrink: 0;
}

.sevenseg-colon .sevenseg-seg {
  left: 50%;
  width: 0.16em;
  height: 0.16em;
  border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
}
.sevenseg-colon .sevenseg-seg.top { top: 0.32em; }
.sevenseg-colon .sevenseg-seg.bot { top: 0.56em; }

.sevenseg-row.dim .sevenseg-seg.on {
  box-shadow:
    0 0 0.04em rgba(255, 40, 40, 0.6),
    0 0 0.08em rgba(255, 30, 30, 0.35);
}