# Countdown styling

> CSS custom properties, parts, states and data attributes for the AndOr countdown, with Dawn and Horizon examples.

Source: https://backtrackhq.com/docs/widgets/countdown/styling/

This page is for theme developers. It lists every class, state and CSS
custom property of the countdown, `<andor-countdown
class="andor-countdown">`.

The widget comes from the **AndOr Countdown** block. It uses AndOr's widget
styles. The block prints an empty skeleton first, and a script fills it
in. The finished markup has the classes
below, so read it after `DOMContentLoaded`.

## What each token changes

The numbers on the diagram match the table. The diagram is a simplified drawing. The full list of tokens is below.
(Diagram: The countdown line under a product price)
1. `--andor-countdown-color`: the text
2. `--andor-countdown-font-size`: text size
3. `--andor-countdown-heading-font-weight`: the wording's weight

## How precedence works

Put your CSS in your theme's stylesheet or in the app embed's
**Custom CSS** box. To see which value wins, read
[Which value wins](https://backtrackhq.com/docs/developers/tokens/#which-value-wins).

What this means for the countdown:

- **The text color is inline.** The block writes
  `--andor-countdown-color` into the host's `style` on every render. A
  stylesheet rule on it needs `!important`.
- **Text size and spacing** go into a block-scoped rule, and only when
  changed from the default.

## Parts

| Class | What it is |
|---|---|
| `.andor-countdown` | The whole timer (the host) |
| `.andor-countdown__heading` | The lead-in, like "Sale ends in". Hidden in the last two minutes |
| `.andor-countdown__time` | The ticking time, like "2h 30m" |
| `.andor-vh` | The visually hidden "Sale countdown" label |

The time uses tabular numbers, so its width holds while it ticks.

## States and data attributes

| Attribute | On | Value and meaning |
|---|---|---|
| `data-andor-state` | host | `active` or `hidden`. A styling hook |
| `hidden` | host | The sale ended, or no countdown for this variant |
| `data-andor-skeleton` | host | Not filled in yet. Internal, do not style |
| `data-andor-widget` | host | `countdown` (only on the visible timer) |
| `data-andor-widget-id` | host | The block id |
| `data-andor-discount-id` | host | The discount counted down |
| `data-andor-product-id` | host | The product id, when known |
| `data-andor-starts` | host | Start time, ISO 8601 |
| `data-andor-ends` | host | End time, ISO 8601 |
| `data-andor-units` | host | The translated units, like `d\|h\|m\|s\|Sale ends soon` |
| `data-andor-candidate` | host | `countdown`, on every pre-drawn variant timer |
| `data-andor-countdown-time` | time span | The only node the ticker rewrites |
| `data-andor-head` | heading span | The heading hidden in the last two minutes |

> **Caution:** A hidden countdown has both `hidden` and an inline
> `display: none`. Never force it visible. That would show a sale that
> has ended.

## Custom properties

| Property | Default | What it does |
|---|---|---|
| `--andor-countdown-color` | Block setting, inline | Text color |
| `--andor-countdown-font-size` | `0.95em` | Size |
| `--andor-countdown-font-weight` | `600` | Weight of the time |
| `--andor-countdown-heading-font-weight` | `inherit` | Weight of the lead-in |
| `--andor-countdown-space-block-start` | `0` | Margin above |
| `--andor-countdown-space-block-end` | `0` | Margin below |

## Examples

Dawn. Its colors are RGB numbers, so wrap them in `rgb()`:

```css
andor-countdown {
  --andor-countdown-color: rgb(var(--color-foreground)) !important;
  --andor-countdown-font-size: 1.4rem;
  --andor-countdown-heading-font-weight: 400;
}
```

Horizon:

```css
andor-countdown {
  --andor-countdown-color: var(--color-foreground) !important;
  --andor-countdown-heading-font-weight: var(--font-body--weight, 400);
}
```

Make only the time bold and keep the lead-in light:

```css
andor-countdown {
  --andor-countdown-font-weight: 700;
  --andor-countdown-heading-font-weight: 400;
}
```