# Savings badge styling

> CSS tokens, data attributes and parts for the AndOr savings badge, with Dawn and Horizon examples.

Source: https://backtrackhq.com/docs/widgets/savings-badge/styling/

Put CSS in your theme or in the embed's **Custom CSS** box. For how
tokens work across widgets, see
[Styling tokens](https://backtrackhq.com/docs/developers/tokens/).

> **Caution:** The block writes the background and text colors inline.
> Changing `--andor-badge-background` or `--andor-badge-color` from CSS
> needs `!important`.

## 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 savings badge next to a product title)
1. `--andor-badge-background`: the fill
2. `--andor-badge-color`: the text
3. `--andor-badge-padding`: padding
4. `--andor-badge-radius`: corners
5. `--andor-badge-font-size`: text size

## Parts

| Class | What it is |
| --- | --- |
| `.andor-badge` | The host |
| `.andor-code` | The code chip |
| `.andor-code__button` | The copy button |
| `.andor-code__status` | The hidden "Copied" status |

> **Warning:** Never force a hidden badge visible with a rule like
> `andor-badge { display: block }`. It would bring back an ended sale.

## States and data attributes

| Attribute | Values |
| --- | --- |
| `data-andor-state` | `active`, `hidden` or `applied` |
| `data-andor-kind` | `percentage`, `amount_each` or `amount_spread` |
| `data-andor-mode` | `price` or `badge_only` |
| `data-andor-widget` | `badge`, on the visible badge only |
| `data-andor-widget-id` | The block id |
| `data-andor-discount-id` | The discount shown |
| `data-andor-starts`, `data-andor-ends` | ISO 8601 times. No `ends` means it never ends. |
| `data-andor-candidate` | `badge`, on every pre-drawn variant badge |
| `hidden` | No deal for this variant now |

## Custom properties

| Token | Default | What it does |
| --- | --- | --- |
| `--andor-badge-background` | Block setting | Fill |
| `--andor-badge-color` | Block setting | Text color |
| `--andor-badge-padding` | `0.15em 0.55em` | Padding |
| `--andor-badge-radius` | `0.25em` | Corners. Does not follow `--andor-radius`. |
| `--andor-badge-font-size` | `0.85em` | Size |
| `--andor-badge-font-weight` | `600` | Weight |
| `--andor-badge-applied-background` | Black at 6% | Fill when the code is applied |
| `--andor-badge-applied-color` | `#6d7175` | Text when the code is applied |
| `--andor-badge-space-block-start` | `0` | Margin above |
| `--andor-badge-space-block-end` | `0` | Margin below |

## Examples

Match Dawn's sale badge:

```css
andor-badge {
  --andor-badge-background: rgb(var(--color-badge-background)) !important;
  --andor-badge-color: rgb(var(--color-badge-foreground)) !important;
  --andor-badge-radius: var(--badge-corner-radius, 4rem);
  --andor-badge-padding: 0.5rem 1.3rem 0.6rem;
}
```

Match Horizon's primary button:

```css
andor-badge {
  --andor-badge-background: var(--color-primary-button-background) !important;
  --andor-badge-color: var(--color-primary-button-text) !important;
  --andor-badge-radius: var(--style-border-radius-pills, 40px);
}
```