/* Live clock and its responsive presentation. */

.currentClock {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  color: var(--color-secondary);
}

.clockFace {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 16px;
  border-right: 1px solid var(--color-border);
}

.clockFace .icon {
  width: 32px;
  height: 32px;
  color: var(--color-secondary);
}

#clockTime {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -.5px;
}

.clockCalendar {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#clockWeekday {
  font-size: 11px;
  color: var(--color-muted);
  text-transform: capitalize;
}

#clockDate {
  font-size: 13px;
  color: var(--color-secondary);
  white-space: nowrap;
}

@media(max-width:760px) {
  .currentClock {
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
  }
  .clockFace {
    padding: 0;
    border: 0;
    gap: 5px;
  }
  .clockFace .icon {
    width: 23px;
    height: 23px;
  }
  #clockTime {
    font-size: 19px;
  }
  #clockWeekday {
    display: none;
  }
  #clockDate {
    font-size: 10px;
  }
}

.clockHand {
  transform-box: view-box;
  transform-origin: 50% 50%;
  stroke-linecap: round;
}

.clockHour {
  stroke-width: 1.9;
  stroke: var(--color-heading);
}

.clockMinute {
  stroke-width: 1.45;
  stroke: var(--color-heading);
}

.clockPin {
  fill: var(--color-heading);
  stroke: var(--color-surface);
  stroke-width: .4;
}

@media(prefers-reduced-motion:no-preference) {
  .clockHand {
    transition: transform 160ms linear;
  }
}