/**
 * @file
 * Frontend display styles for rendered HMS field values.
 *
 * Applied to: default formatter, live timer, countdown timer,
 * and natural-language formatter output.
 */

/* ============================================================
   Shared base — all HMS output spans
   ============================================================ */
.hour-minutes-seconds {
  display: inline;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Live pulse indicator — shown on running and countdown timers
   ============================================================ */
.hour-minutes-seconds--running,
.hour-minutes-seconds--countdown {
  display: inline-flex;
  gap: 0.35em;
  align-items: center;
}

.hour-minutes-seconds--running::before,
.hour-minutes-seconds--countdown::before {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 0.45em;
  height: 0.45em;
  content: "";
  animation: hms-pulse 1.2s ease-in-out infinite;
  opacity: 0.65;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   Countdown — finished state
   ============================================================ */
.hour-minutes-seconds--countdown-finished {
  opacity: 0.5;
}

.hour-minutes-seconds--countdown-finished::before {
  content: none;
}

/* ============================================================
   Pulse keyframes
   ============================================================ */
@keyframes hms-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.65;
  }

  50% {
    transform: scale(0.65);
    opacity: 0.2;
  }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hour-minutes-seconds--running::before,
  .hour-minutes-seconds--countdown::before {
    animation: none;
    opacity: 0.45;
  }
}

/* ============================================================
   Natural-language output
   ============================================================ */
.hour-minutes-seconds--natural-language {
  display: inline;
}

.hour-minutes-seconds--natural-language [class^="hour-minutes-seconds__"] {
  display: inline;
  white-space: nowrap;
}