# Current offers styling

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

Source: https://backtrackhq.com/docs/widgets/current-offers/styling/

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

The widget comes from the **AndOr Offers** block. It uses AndOr's widget
styles. Liquid prints skeleton rows, and a script draws the real rows
into them.

## 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 current offers list with three deals, one with a discount code)
1. `--andor-offers-accent`: the deal line
2. `--andor-offers-border-color`: the row divider
3. `--andor-offers-item-padding`: row padding
4. `--andor-offers-scope-font-size`: the scope line under a deal
5. `--andor-offers-heading-space`: space under the heading

## 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 list:

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

## Parts

| Class | What it is |
|---|---|
| `.andor-offers` | The list's host |
| `.andor-offers__heading` | The heading (an `h2`, `h3`, `h4` or `p`) |
| `.andor-offers__list` | The `ul`, with bullets removed |
| `.andor-offers__item` | One deal row |
| `.andor-offers__title` | The deal's name |
| `.andor-offers__deal` | "Save 20%", or the code |
| `.andor-offers__scope` | "Storewide", the collection, or "Selected collections" |
| `.andor-code__button` | The copy button, on code rows |
| `.andor-code__status` | The visually hidden "Copied" status |
| `.andor-vh` | The visually hidden "Applies to" prefix |

## States and data attributes

| Attribute or class | On | Value and meaning |
|---|---|---|
| `data-andor-drawn` | host | The rows are drawn. Before that, the skeleton shimmers |
| `data-andor-reactive` | host | Rows follow the variant picker |
| `data-andor-widget-id` | host | The block id |
| `.andor-offers__deal--applied` | deal span | The code is already applied |
| `data-andor-widget` | row | `offer` |
| `data-andor-state` | row | `active` or `hidden`. A styling hook |
| `hidden` | row | The deal is not live now |
| `data-andor-discount-id` | row | The deal's discount |
| `data-andor-kind` | row | `percentage`, `amount_each` or `amount_spread` |
| `data-andor-mode` | row | `price` or `badge_only` |
| `data-andor-starts` | row | Start time, ISO 8601 |
| `data-andor-ends` | row | End time, ISO 8601. Absent means it never ends |

Note the split: the block id is on the host, and each row is its own
widget. A row's `data-andor-state` never reads `applied`. Style an
applied row through `.andor-offers__deal--applied`.

> **Caution:** Hidden rows have both `hidden` and an inline
> `display: none`. Never force them visible. Style the hidden state with
> `.andor-offers__item[hidden]` if you need to.

## Custom properties

| Property | Default | What it does |
|---|---|---|
| `--andor-offers-accent` | Block setting, inline | The deal line color |
| `--andor-offers-applied-color` | muted, then `#6d7175` | An applied code |
| `--andor-offers-font-size` | `inherit` | Size |
| `--andor-offers-space-block-start` | `0` | Margin above |
| `--andor-offers-space-block-end` | `0` | Margin below |
| `--andor-offers-heading-space` | `0.5em` | Space under the heading |
| `--andor-offers-gap` | `0.5em` | Space inside a row |
| `--andor-offers-item-padding` | `0.4em 0` | Row padding |
| `--andor-offers-border-color` | border, then black at 8% | Row divider |
| `--andor-offers-title-font-weight` | `600` | Name weight |
| `--andor-offers-deal-font-weight` | `600` | Deal weight |
| `--andor-offers-scope-font-size` | `0.85em` | Scope size |
| `--andor-offers-scope-opacity` | `0.7` | Scope fade |

"Muted" is `--andor-color-muted` and "border" is
`--andor-color-border`.

## Examples

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

```css
andor-offers {
  --andor-offers-border-color: rgba(var(--color-foreground), 0.1);
  --andor-offers-title-font-weight: 400;
  --andor-offers-item-padding: 0.8rem 0;
}
```

Horizon:

```css
andor-offers {
  --andor-offers-border-color: var(--color-border);
  --andor-offers-title-font-weight: var(--font-body--weight, 400);
}
```

## Events

Each row is an event host with `widgetType: "offer"`. A list of five
deals sends five `andor:widget:mount` events. Rows have no widget id or
product id, so walk up to the nearest `andor-offers` to find the block:

```js
document.addEventListener("andor:display:change", (event) => {
  if (event.detail.resource.widgetType !== "offer") return;
  const block = event.target.closest("andor-offers");
  console.log("row in block:", block?.dataset.andorWidgetId);
});
```

See [Events](https://backtrackhq.com/docs/developers/events/) for the payload fields.