# Free gift slot styling

> Class names, the gift slot's data-andor-state values and the CSS custom properties for the free gift line and slot.

Source: https://backtrackhq.com/docs/widgets/free-gift/styling/

This page is for theme developers. It lists the classes, states and CSS
custom properties of the free gift widget. It has two parts: the
product page line (an `<andor-bundle data-andor-widget="gift">` host)
and the gift slot in the cart (a box inside the `<andor-claim>` host).

The widget comes from the **AndOr Offer picker** block and the pasted
`<andor-offer-picker>` and `<andor-claim>` tags. The cart drawer copy
of the slot comes from the app embed.

## 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 cart gift slot with its progress bar and the gift picture)
1. `--andor-claim-gift-border-color`: the gift box border
2. `--andor-claim-gift-background`: the gift box fill
3. `--andor-claim-slot-image-size`: the gift's picture
4. `--andor-claim-progress-track`: the bar's track
5. `--andor-claim-progress-color`: the bar's fill
6. `--andor-claim-title-color`: the title

## 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 free gift:

- **Button color** is written inline on each host, but only when the
  merchant changed it from `#c0392b`.
- Style states through the `data-andor-state` attribute, never through
  the words. The words change with the cart and the language.

> **Tip:** Set custom properties rather than a part's own size. The slot
> is one box of a fixed shape, so the cart never moves when it changes
> state.

## Product page line

The gift line is the sentence
alone: `.andor-bundle__text`, with no bar. It uses the same host, states
and custom properties as the
[Buy X get Y banner](https://backtrackhq.com/docs/widgets/buy-x-get-y/styling/).

### States and data attributes

| Attribute | On | Values |
|---|---|---|
| `data-andor-widget` | host | `gift` |
| `data-andor-progress` | host | `locked`, `unlocked`, `won` or `off` |
| `data-andor-ready` | host | drawn. Before that, it shimmers |

## Gift slot

The gift's box is
`.andor-claim__box--gift` inside `<andor-claim class="andor-claim">`. It
takes every [claim row token](https://backtrackhq.com/docs/widgets/buy-x-get-y/styling/), plus
its own tokens below.

### Parts

| Class | What it is |
|---|---|
| `.andor-claim__box--gift` | the gift's box |
| `.andor-claim__title` | "You unlocked a free gift" |
| `.andor-claim__slot` | the one row: picture, text, button |
| `.andor-claim__img` | one gift's picture |
| `.andor-claim__img--none` | a gift product with no image: a gift mark |
| `.andor-claim__stack` | several gifts' pictures, overlapped |
| `.andor-claim__more` | "+2" after three pictures |
| `.andor-claim__body` | the row's text |
| `.andor-claim__name` | the gift, the requirement, or "3 gifts" |
| `.andor-claim__price` | "$20.00 Free", only when sure |
| `.andor-claim__was` | the struck price |
| `.andor-claim__now` | "Free" |
| `.andor-claim__progress` | the thin `<progress>` bar while locked |
| `.andor-claim__go` | **Add gift**, **Choose gift** or **Remove gift** |

### States and data attributes

`data-andor-state` on `.andor-claim__box--gift` is one of:

| Value | Meaning |
|---|---|
| `locked` | not earned yet: greyed, no button |
| `adding` | an automatic add is running (`aria-busy="true"`) |
| `choose` | earned: add it, or choose one |
| `removed` | the shopper removed it: "Add it back" |
| `gone` | chosen, and the cart stopped qualifying |
| `won` | one line: checkout applied it |
| `off` | one line: in the cart, another discount won |

| Attribute or class | On | Meaning |
|---|---|---|
| `.andor-claim__box--locked` | box | the same as `locked` |
| `.andor-claim__box--note` | box | `won` and `off`: one line |
| `data-andor-act` | `.andor-claim__go` | `add`, `open` or `remove` |
| `data-andor-ready` | host | drawn from the cart. Before that, boxes shimmer |
| `data-andor-place` | host | `cart_page` or `cart_drawer` |

`data-andor-act="open"` is the button that opens the
[gift chooser](https://backtrackhq.com/docs/widgets/gift-chooser/styling/).

### Custom properties

| Property | Default | Controls |
|---|---|---|
| `--andor-claim-gift-border-width` | `1px` | gift box border |
| `--andor-claim-gift-border-style` | `solid` | gift box border |
| `--andor-claim-gift-border-color` | `--andor-color-border`, 12% ink | gift box border |
| `--andor-claim-gift-background` | the box fill | gift box fill |
| `--andor-claim-slot-image-size` | `3em` | the gift's picture |
| `--andor-claim-locked-opacity` | `0.6` | a locked row |
| `--andor-claim-stack-border-color` | `#ffffff` | ring between pictures |
| `--andor-claim-progress-height` | `0.4em` | locked bar height |
| `--andor-claim-progress-track` | `--andor-color-border` | locked bar track |
| `--andor-claim-progress-color` | the claim accent | locked bar fill |

The claim accent is the block's **Button color**, written inline as
`--andor-claim-accent`. It colors the buttons and "Free"
(`--andor-claim-now-color`).

## Examples

Tint the slot once the gift is earned:

```css
.andor-claim__box--gift[data-andor-state="choose"] {
  --andor-claim-gift-background: #f4f0ff;
  --andor-claim-gift-border-color: #5b3fd1;
}
```

Make the locked progress bar thinner:

```css
andor-claim {
  --andor-claim-progress-height: 0.25em;
}
```

Dawn:

<p class="docs-code-file">assets/base.css</p>

```css
andor-claim {
  --andor-claim-gift-border-color: rgba(var(--color-foreground), 0.15);
  --andor-claim-stack-border-color: rgb(var(--color-background));
}

.andor-claim__box--gift[data-andor-state="choose"] {
  --andor-claim-gift-background: rgba(var(--color-foreground), 0.03);
}
```

Horizon:

<p class="docs-code-file">assets/base.css</p>

```css
andor-claim {
  --andor-claim-gift-border-color: var(--color-border);
  --andor-claim-stack-border-color: var(--color-background);
}

.andor-claim__box--gift[data-andor-state="choose"] {
  --andor-claim-gift-border-color: var(--color-foreground);
}
```

> **Caution:** Never force a hidden part back on. Hidden parts carry
> `hidden` and an inline `display: none`.