@import "./config.css";

* {
  box-sizing: border-box;

  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;

  background: var(--page-background);
  font-family: var(--font);
}

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

.canvas {
  position: relative;

  width: min(calc(var(--clock-size-screen-percent) * 1vw), calc(var(--clock-size-screen-percent) * 1vh));
  height: min(calc(var(--clock-size-screen-percent) * 1vw), calc(var(--clock-size-screen-percent) * 1vh));
  max-width: var(--clock-max-dimensions);
  max-height: var(--clock-max-dimensions);
}

.info {
  position: absolute;
  display: flex;
  user-select: none;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;

  line-height: 1;
  top: 0px;
  left: 0px;
  width: var(--text-horizontal-positioning);
  z-index: 40;
  
  cursor: pointer;
}

.info-date {
  color: var(--date-color);
  font-weight: var(--date-font-weight);
  font-size: var(--date-font-size);
  letter-spacing: var(--date-letter-spacing);

  border-bottom: var(--date-underline);
  padding-bottom: 4px;
  margin-bottom: var(--date-spacing-bottom);
}

.info-time {
  color: var(--time-color);
  font-weight: var(--time-font-weight);
  font-size: var(--time-font-size);
  letter-spacing: var(--time-letter-spacing);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.time-hour {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}

.time-char {
  display: inline-grid;
}

.time-colon {
  margin-left: var(--time-colon-gap-left);
  margin-right: var(--time-colon-gap-right);
}

.tci {
  grid-area: 1 / 1;
}

.tci-out {
  grid-area: 1 / 1;
  pointer-events: none;
}

.time-ampm {
  display: inline-flex;
  margin-left: var(--time-ampm-gap);
}

.clock-wrap {
  position: absolute;
  inset: 0;
}

#clockSvg {
  width: 100%;
  height: 100%;

  display: block;
  cursor: grab;
  user-select: none;
}

#clockSvg.is-dragging {
  cursor: grabbing;
}

#tooltip {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  white-space: normal;

  color: var(--tooltip-text-color);
  background: var(--tooltip-background);

  font-family: var(--font);
  font-size: var(--tooltip-font-size);
  font-weight: var(--tooltip-font-weight);

  letter-spacing: var(--tooltip-letter-spacing);
  line-height: var(--tooltip-line-height);

  padding: var(--tooltip-padding);
  border-radius: var(--tooltip-border-radius);

  z-index: 9999;
  max-width: 60vw;

  transition: opacity 0.55s ease;
}

#tooltip strong {
  font-size: var(--tooltip-header-font-size);
  color: var(--tooltip-header-text-color);
}

#tooltip.visible {
  opacity: 1;
}

.tooltip-row {
  overflow: hidden;
  white-space: nowrap;

  opacity: 0;
  max-height: 0;
  transform: translateY(-4px);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    max-height 0.18s ease;
}

.tooltip-row.visible {
  opacity: 1;
  max-height: 200px;
  transform: translateY(0);
}

.tooltip-row.removing {
  opacity: 0;
  max-height: 0;
  transform: translateY(-4px);
}

.tooltip-divider {
  border: none;
  overflow: hidden;

  border-top: 1px solid #ffffff25;
  max-height: 20px;
  margin: 5px 0;
  opacity: 0;
  
  transition:
    opacity 0.18s ease,
    max-height 0.18s ease,
    margin 0.18s ease;
}

.tooltip-divider.visible {
  opacity: 1;
}

.tooltip-divider.removing {
  opacity: 0;
  max-height: 0;
  margin: 0;
}

#infoDate {
  opacity: 0;
  animation: fadeIn calc(var(--date-fade-in-duration) * 1s) ease calc(var(--date-fade-in-start) * 1s) forwards;
}

#infoTime {
  opacity: 0;
  animation: fadeIn calc(var(--time-fade-in-duration) * 1s) ease calc(var(--time-fade-in-start) * 1s) forwards;
}

#clock {
  opacity: 0;
  animation: fadeIn calc(var(--clock-fade-in-duration) * 1s) ease calc(var(--clock-fade-in-start) * 1s) forwards;
}

#iconLayer {
  opacity: 0;
  animation: fadeIn calc(var(--icons-fade-in-duration) * 1s) ease calc(var(--icons-fade-in-start) * 1s) forwards;
}

#handle {
  opacity: 0;
  animation: fadeIn calc(var(--handle-fade-in-duration) * 1s) ease calc(var(--handle-fade-in-start) * 1s) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}