.timer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.timer:hover {
  border-color: var(--color-primary);
}

.timer--running {
  border-color: var(--color-primary-border);
  background-color: var(--color-primary-subtle);
  color: var(--color-primary-text);
}

.timer--paused {
  border-color: var(--color-warning);
  background-color: var(--color-warning-subtle);
  color: var(--color-warning-text);
}

.timer__ticket {
  font-weight: var(--weight-medium);
}

/* Pulses only while running, and only if motion is allowed. */
.timer__pulse {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  animation: timer-pulse 2s ease-in-out infinite;
}

@keyframes timer-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.timer_clock {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.timer_clock--large {
  font-size: var(--text-2xl);
}

.app_shell:has(.timer--running, .timer--paused) .timer_shortcut {
  display: none;
}

.timer_popover {
  width: min(var(--popover-width), calc(100vw - 2 * var(--space-4)));
  max-height: calc(100vh - var(--topbar-height) - 2 * var(--space-4));
  margin: calc(var(--topbar-height) + var(--space-2)) var(--space-4) auto auto;
  padding: 0;
  overflow-y: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.timer_popover::backdrop {
  background-color: transparent;
}

.timer_panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.timer_panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.timer_panel__footer {
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border-subtle);
}