# Volume tiers styling

> CSS custom properties, parts and states for the AndOr volume table and the volume picker layouts (Cards, List, Mini buttons, Boxes).

Source: https://backtrackhq.com/docs/widgets/volume-tiers/styling/

This page is for theme developers. It lists the classes, states and CSS
custom properties of `<andor-tiers class="andor-tiers">`: the volume
table, and the volume picker in each layout.

The widget comes from the **AndOr Volume tiers** block and the pasted
`<andor-tiers>` tag. It uses AndOr's widget styles.

## 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.
For every layout the block offers, see [Layouts](https://backtrackhq.com/docs/widgets/volume-tiers/#layouts).
(Diagram: The volume tiers widget in the Cards layout, with the second card picked and a Most popular tag)
1. `--andor-tiers-heading-color`: the heading
2. `--andor-tiers-card-border-color`: each card's border
3. `--andor-tiers-card-radius`: card corners
4. `--andor-tiers-card-selected-color`: the picked card's edge
5. `--andor-tiers-card-selected-background`: the picked card's fill
6. `--andor-tiers-card-tag-color`: the "Most popular" tag
7. `--andor-tiers-accent`: the discount color on each card
8. `--andor-tiers-card-gap`: space between cards

## 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).

**Discount color** is written inline on the host as
`--andor-tiers-accent`, but only when the merchant changed it from
`#c0392b`. Left on the default, the inline value is
`var(--andor-color-accent)`, so a `:root` rule or the brand color
reaches it.

> **Caution:** Change a custom property, not a part's own `padding`,
> `height` or `font-size`. The picker prints a skeleton at its final
> size, and its List, Mini buttons and Boxes height is computed from the
> custom properties. Changing the part directly makes the page jump.

## The host

### States and data attributes

| Attribute | Value and meaning |
|---|---|
| `data-andor-widget` | `tiers` |
| `data-andor-widget-id` | The block id, or `pasted` |
| `data-andor-state` | `active` or `hidden`. A styling hook |
| `data-andor-basis` | `quantity` or `subtotal` |
| `data-layout` | `list`, `mini`, `boxes` or `table`. Absent for Cards |
| `data-andor-scroll` | Boxes scroll sideways on a narrow host |
| `data-andor-drawn` | List, Mini buttons, Boxes: options are drawn (absent: skeleton) |
| `data-andor-selected` | The checked option's quantity, `""` for none |
| `hidden` | The widget is off (for example a variant outside the discount) |

The host is a size container named `andor-tiers`, so you can write
`@container andor-tiers (...)` rules.

## The table

### Parts

| Class | What it is |
|---|---|
| `.andor-tiers__heading` | The heading, a `p` |
| `.andor-tiers__table` | The table |
| `.andor-tiers__row` | One step row |
| `.andor-tiers__off` | The "10% off" cell |
| `.andor-tiers__nudge` | The "Add 1 more and get 15% off" line, with an offer |

### States and data attributes

| State | On | Meaning |
|---|---|---|
| `.andor-tiers__row--current` | row | The step the quantity reaches |
| `aria-current="true"` | row | The same, for screen readers |
| `hidden` | row | A step that does not beat a sale here |
| `data-andor-tier` | row | The threshold, like `2` or `100.00` |
| `data-andor-off` | row | The percent, like `10` |
| `data-tier-index` | row | The step's position, 0 based |
| `data-tier-quantity` | row | The step's quantity |

### Custom properties

| Property | Default | What it does |
|---|---|---|
| `--andor-tiers-accent` | Block setting, inline | Discount color |
| `--andor-tiers-space-block-start` | `0` | Margin above |
| `--andor-tiers-space-block-end` | `0` | Margin below |
| `--andor-tiers-font-size` | `inherit` | Base size |
| `--andor-tiers-heading-space` | `0.5em` | Space under the heading |
| `--andor-tiers-heading-color` | `inherit` | Heading color |
| `--andor-tiers-heading-font-size` | `inherit` | Heading size |
| `--andor-tiers-heading-font-weight` | `600` | Heading weight |
| `--andor-tiers-cell-padding` | `0.4em 0.5em` | Every cell |
| `--andor-tiers-border-width` | `1px` | Row rules |
| `--andor-tiers-border-color` | border, then black at 8% | Row rules |
| `--andor-tiers-th-color` | `inherit` | Header text |
| `--andor-tiers-th-font-size` | `0.85em` | Header size |
| `--andor-tiers-th-font-weight` | `400` | Header weight |
| `--andor-tiers-th-opacity` | `0.7` | Header fade |
| `--andor-tiers-off-color` | Discount color | "10% off" |
| `--andor-tiers-off-font-weight` | `600` | "10% off" weight |
| `--andor-tiers-current-background` | black at 4% | Current row fill |
| `--andor-tiers-current-font-weight` | `600` | Current row weight |
| `--andor-tiers-current-edge-width` | `3px` | Current row's edge |
| `--andor-tiers-current-edge-color` | Discount color | Current row's edge color |
| `--andor-tiers-nudge-space` | `0.6em` | Space above the nudge line |
| `--andor-tiers-nudge-color` | Discount color | Nudge text |
| `--andor-tiers-nudge-font-size` | `inherit` | Nudge size |
| `--andor-tiers-nudge-font-weight` | `600` | Nudge weight |

## The picker: Cards layout

### Parts

| Class | What it is |
|---|---|
| `.andor-tiers__cards` | The radio group |
| `.andor-tiers__card` | One card, a `button` with `role="radio"` |
| `.andor-tiers__card-info` | Left column: "2 items" and its note |
| `.andor-tiers__card-note` | A small line: "Save 10%", "each" |
| `.andor-tiers__card-amount` | Right column: the price and "each" |
| `.andor-tiers__tag` | "Most popular" |
| `.andor-tiers__nudge` | The line under the cards |

### States and data attributes

| State | On | Meaning |
|---|---|---|
| `aria-checked="true"` | card | The picked card |
| `data-andor-pick` | card | The quantity the card sets |
| `data-andor-tier` | card | A step's threshold (none on "1 item") |
| `hidden` | card | A step that does not beat a sale here |
| `:focus-visible` | card | Keyboard focus |

### Custom properties

| Property | Default | What it does |
|---|---|---|
| `--andor-tiers-card-gap` | `0.6em` | Space between cards |
| `--andor-tiers-card-padding` | `0.85em 1em` | Card padding |
| `--andor-tiers-card-border-width` | `1px` | Card border |
| `--andor-tiers-card-border-color` | border, then black at 20% | Card border color |
| `--andor-tiers-card-radius` | radius, then `8px` | Card corners |
| `--andor-tiers-card-background` | `transparent` | Card fill |
| `--andor-tiers-card-color` | `inherit` | Card text |
| `--andor-tiers-card-font-weight` | `700` | Quantity and price |
| `--andor-tiers-card-note-font-size` | `0.85em` | The small lines |
| `--andor-tiers-card-note-opacity` | `0.75` | The small lines' fade |
| `--andor-tiers-card-selected-color` | Discount color | Picked edge |
| `--andor-tiers-card-selected-background` | black at 4% | Picked fill |
| `--andor-tiers-card-tag-color` | Discount color | "Most popular" |

## The picker: List, Mini buttons and Boxes

These layouts draw real `<input type="radio">` options in a `fieldset`.

### Parts

| Class | What it is |
|---|---|
| `.andor-tiers__list` | The `fieldset` of options |
| `.andor-tiers__option` | One option (a row, a mini button or a box) |
| `.andor-tiers__radio` | The real radio input |
| `.andor-tiers__info` | Left column: title line and subtitle |
| `.andor-tiers__title-line` | The title and the pill |
| `.andor-tiers__title` | "2 items", "Buy 2+", or your option title |
| `.andor-tiers__pill` | "10% off" |
| `.andor-tiers__subtitle` | "You save $4.00", "10% off each item" |
| `.andor-tiers__amounts` | Right column: price and compare price |
| `.andor-tiers__price` | The total |
| `.andor-tiers__compare` | The struck regular total |
| `.andor-tiers__tag` | "Most popular" |

### States and data attributes

Modifiers on `.andor-tiers__option`: `--selected` (the checked option),
`--popular` (the option with the tag) and `--base` (the "1 item" row).
Each option also has `data-andor-quantity`, the quantity it sets.

### Custom properties

| Property | Default | What it does |
|---|---|---|
| `--andor-tiers-option-gap` | `0.75em` (mini `0.5em`) | Space between options |
| `--andor-tiers-option-padding-block` | `0.9em` (mini `0.6em`) | Padding |
| `--andor-tiers-option-padding-inline` | `1em` (mini `0.5em`) | Side padding |
| `--andor-tiers-option-border-width` | `1px` | Border width |
| `--andor-tiers-option-border-color` | text color at 22% | Border color |
| `--andor-tiers-option-radius` | `--andor-radius`, then `8px` | Corners |
| `--andor-tiers-option-background` | `transparent` | Option fill |
| `--andor-tiers-selected-color` | `currentColor` | Picked border and radio |
| `--andor-tiers-selected-width` | `1px` | Extra inset edge when picked |
| `--andor-tiers-selected-background` | option background | Picked fill |
| `--andor-tiers-pill-background` | Discount color at 14% | Pill fill |
| `--andor-tiers-pill-color` | Discount color | Pill text |
| `--andor-tiers-tag-background` | `#1a1a1a` | Most popular tag fill |
| `--andor-tiers-tag-color` | `#fff` | Most popular tag text |
| `--andor-tiers-tag-radius` | `4px` | Most popular tag corners |
| `--andor-tiers-title-size` | `1em` | Title line |
| `--andor-tiers-subtitle-size` | `0.85em` | Subtitle |
| `--andor-tiers-price-size` | `1em` | Total |
| `--andor-tiers-compare-size` | `0.85em` | Compare price |
| `--andor-tiers-pill-size` | `0.75em` | Pill text |
| `--andor-tiers-tag-size` | `0.7em` | Tag text |
| `--andor-tiers-line-height` | `1.4` | Every line |
| `--andor-tiers-mini-min-width` | unset | Narrowest mini button |
| `--andor-tiers-box-min-width` | `0px` | Narrowest box, on a wide host |

Boxes use `0.75em` block padding, `0.5em` side padding and a `0.5em` gap
by default.

## Examples

Dawn, for the List layout. Dawn's colors are RGB numbers, so wrap them
in `rgb()` or `rgba()`:

```css
andor-tiers[data-layout="list"] {
  --andor-tiers-option-border-color: rgba(var(--color-foreground), 0.15);
  --andor-tiers-selected-color: rgb(var(--color-foreground));
  --andor-tiers-option-radius: 4px;
  --andor-tiers-pill-background: #e3f1df;
  --andor-tiers-pill-color: #1f5f3a;
  --andor-tiers-tag-background: rgb(var(--color-foreground));
  --andor-tiers-tag-color: rgb(var(--color-background));
}
```

Horizon, for the Cards layout and the table:

```css
andor-tiers {
  --andor-tiers-border-color: var(--color-border);
  --andor-tiers-current-edge-color: var(--color-foreground);
  --andor-tiers-card-border-color: var(--color-border);
  --andor-tiers-card-radius: var(--style-border-radius-inputs, 8px);
  --andor-tiers-card-selected-color: var(--color-foreground);
}
```

Bigger mini buttons, on any theme:

```css
andor-tiers[data-layout="mini"] {
  --andor-tiers-option-padding-block: 0.9em;
  --andor-tiers-title-size: 1.1em;
  --andor-tiers-mini-min-width: 9em;
  --andor-tiers-selected-background: rgba(0, 0, 0, 0.04);
}
```