# Discount callout styling

> Class names, icon classes and CSS custom properties for the AndOr discount callout pill, with Dawn and Horizon examples.

Source: https://backtrackhq.com/docs/widgets/discount-callout/styling/

This page is for theme developers. It lists the classes, states and CSS
custom properties of the discount callout,
`<andor-discount-callout class="andor-callout">`.

The widget comes from the **AndOr Discount callout** block and the
pasted `<andor-discount-callout>` tag. It uses AndOr's widget styles.
Liquid renders it whole and it runs no
JavaScript, so CSS is the only way to change it. It has `role="note"`.

## 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 discount callout pill with a truck icon)
1. `--andor-callout-background`: the fill
2. `--andor-callout-border-color`: the border
3. `--andor-callout-radius`: corners
4. `--andor-callout-icon-color`: the icon
5. `--andor-callout-color`: the text
6. `--andor-callout-padding`: padding

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

- **Colors and corners are inline.** The block writes
  `--andor-callout-background`, `--andor-callout-color`,
  `--andor-callout-border-color` and `--andor-callout-radius` into the
  host's `style` on every render. A stylesheet rule on those four needs
  `!important`, or target the CSS property itself
  (`andor-discount-callout { background: ... }`).

## Parts

| Class | What it is |
|---|---|
| `.andor-callout` | the pill, an `<andor-discount-callout>` |
| `.andor-callout__icon` | the icon, a CSS mask over its color |
| `.andor-callout__text` | the sentence |

## States and data attributes

| Attribute or class | On | Meaning |
|---|---|---|
| `.andor-callout__icon--truck` | icon | the chosen icon: `truck`, `percent`, `tag`, `gift`, `check` or `cart` |
| `.andor-callout--pasted` | host | a pasted tag, with the block's default colors |
| `data-andor-discount-id` | host | gated mode: the id of the discount it shows for |
| `data-andor-sample` | host | theme editor only: the dashed sample |
| `hidden` | host | the discount it waits for is not live |

The icon is `display: none` by default and turns on only in browsers that
support CSS masks. Without mask support, or with **No icon**, the pill
shows its background, border and text, and no empty icon space.

## Custom properties

| Property | Default | Controls |
|---|---|---|
| `--andor-callout-background` | block setting, inline | fill |
| `--andor-callout-color` | block setting, inline | text and icon |
| `--andor-callout-border-color` | block setting, inline | border |
| `--andor-callout-radius` | block setting, inline | corners |
| `--andor-callout-space-block-start` | `0` | margin above |
| `--andor-callout-space-block-end` | `0` | margin below |
| `--andor-callout-padding` | `0.5em 0.85em` | padding |
| `--andor-callout-border-width` | `1px` | border width |
| `--andor-callout-gap` | `0.5em` | icon to text |
| `--andor-callout-font-size` | `inherit` | text size |
| `--andor-callout-font-weight` | `500` | text weight |
| `--andor-callout-line-height` | `1.3` | line height |
| `--andor-callout-icon-size` | `1.15em` | icon size |
| `--andor-callout-icon-color` | `currentColor` | icon color |

Unset, the four inline properties fall back to the border token at 12%
ink, the radius token at `6px`, `transparent` and `inherit`. A pasted tag
carries the block's default colors through `.andor-callout--pasted`.

## Examples

Colors for every pasted pill, in the app embed's **Custom CSS** box:

```css
.andor-callout--pasted {
  --andor-callout-background: #fff4e5;
  --andor-callout-color: #5c3a00;
  --andor-callout-border-color: #ffd699;
}
```

Dawn:

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

```css
andor-discount-callout {
  --andor-callout-font-weight: 400;
  --andor-callout-icon-color: rgb(var(--color-foreground));
  --andor-callout-radius: var(--badge-corner-radius, 4rem) !important;
}
```

Horizon:

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

```css
andor-discount-callout {
  --andor-callout-font-weight: var(--font-body--weight, 400);
  --andor-callout-border-color: var(--color-border) !important;
  --andor-callout-radius: var(--style-border-radius-pills, 40px) !important;
}
```

> **Note:** The theme variable names were checked against Dawn 16.0.0 and
> Horizon 4.2.0. Check the names in the version you run.