:root {
  --color-gray: #cccccc;
  --color-accent: #5180e9;

  font-size: 16px;
  font-family: sans-serif;
  color: #555;

  --cssx-children:
    div#digital
    h(div#analog, map(), seq(
      div#seconds.analog-clock-hand,
      div#minutes.analog-clock-hand,
      div#hours.analog-clock-hand
    ));
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #0f172a;
  color: #e2e8f0;
}

body * { box-sizing: border-box; }

#digital {
  text-align: center;
  padding: 1rem;
  font-size: 1.5rem;

  --text: "hello";

  --js-expr:
    new Intl.DateTimeFormat('en-US', {
      hour: 'numeric',
      minute: 'numeric',
      second: 'numeric',
    }).format(new Date());
  --get-date: js-eval(get-var(--js-expr));

  --cssx-on-mount: update(--text, call(--get-date));
  --cssx-on-update: delay(1s) update(--text, call(--get-date));
}
#digital::after { content: var(--text); }

#analog {
  background-color: #1e293b;
  width: 200px;
  height: 200px;
  margin: 1rem auto;
  border-radius: 50%;
  position: relative;

  --date: "";
  --get-date: js-eval("new Date()");

  --cssx-on-mount: update(--date, call(--get-date));
  --cssx-on-update:
    update('[data-element=seconds]', --angle, calc(360 * js-eval("new Date().getSeconds()")/60 - 90))
    update('[data-element=minutes]', --angle, calc(360 * js-eval("new Date().getMinutes()")/60 - 90))
    update('[data-element=hours]', --angle, calc(
      360 * js-eval("new Date().getHours() % 12")/12 - 90
      + (30 * js-eval("new Date().getMinutes()")/60)
    ))
    delay(1s)
    update(--date, call(--get-date));
}

[data-element=seconds].analog-clock-hand {
  --color: #cbd5e1;
  --size: 70px;
}
[data-element=minutes].analog-clock-hand {
  --color: #991b1b;
  --size: 60px;
}
[data-element=hours].analog-clock-hand {
  --color: #4f46e5;
  --size: 40px;
  height: 4px;
}

.analog-clock-hand {
  --angle: 0;
  --color: black;
  --size: 80px;

  width: var(--size);
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0% 50%;
  border-radius: 5px;
  transform: rotate(0deg);

  --get-transform: string('rotate(', get-var(--angle), 'deg)');

  --cssx-on-mount:
    update(background-color, get-var(--color))
    update(transform, call(--get-transform))
  ;
  --cssx-on-update: update(transform, call(--get-transform));
}