.clock-face {
  --color: black;
  position: relative;
  aspect-ratio: 1;
  border: solid 0.15em var(--color);
  border-radius: 50%;
}
.clock-face .center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10%;
  aspect-ratio: 1;
  background-color: var(--color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.clock-face .hand {
  --height: calc(1% * var(--thickness));
  position: absolute;
  left: 50%;
  top: calc(50% - var(--height) / 2);
  width: var(--length);
  height: var(--height);
  background: var(--color);
  border-radius: 4px;
  transform-origin: 0 center;
  transform: rotate(calc(360deg * var(--progress) - 90deg));
}
.clock-face .hand.hour {
  --length: 20%;
  --thickness: 6;
}
.clock-face .hand.minute {
  --length: 40%;
  --thickness: 4;
}
.clock-icon {
  display: inline-block;
  padding: 20px;
  height: 30px;
}
.clock-icon .clock-face {
  width: 30px;
  --color: #f2f2f2;
}