/* ==========================================================================
   TIMER — таймер обратного отсчёта (Figma: Timer Medium, 2822:15590)
   Ось component set: State = Default | Negative.
   Default  — Days : Hr : Min : Sec, разряды на alpha-light (для тёмной/цветной
              подложки: цифры gray-0, подписи alpha-light-76).
   Negative — осталось ≤ 24 часов: разряд Days уходит, боксы краснеют
              (negative-100 / negative-500). Разметку Days в этом состоянии
              просто не рендерим — так же, как в Figma её нет в варианте.
   Габарит ноды — 32px (высота разрядов). Подписи свисают НИЖЕ габарита:
   так в Figma, поэтому height здесь фиксирован, а не hug.
   ========================================================================== */

.timer {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  height: 32px;
  font-family: var(--font-family-base);
}

/* Разряд: колонка «боксы + подпись» */
.timer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.timer__digits {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
}

/* Бокс одной цифры. box-sizing: border-box — stroke в Figma лежит ВНУТРИ
   габарита, иначе бокс стал бы 26×34 и разряды разъехались. */
.timer__digit {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--color-alpha-light-24);
  border-radius: var(--radius-8);
  background: var(--color-alpha-light-12);
  color: var(--color-gray-0);
}

/* min-width через stretch: подпись занимает ширину разряда и центрируется,
   но разряд шире её не делает (в Figma min-w-full + w-min-content). */
.timer__label {
  align-self: stretch;
  text-align: center;
  color: var(--color-alpha-light-76);
}

.timer__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4px;
  height: 32px;
  color: var(--color-gray-200);
}

/* --- State = Negative -------------------------------------------------- */

.timer--negative .timer__digit {
  border-color: var(--color-negative-100);
  background: var(--color-negative-100);
  color: var(--color-negative-500);
}