# CSS Variables

Amondo exposes a wide range of CSS custom properties via the SDK, giving you full control over how Imprints look and feel within your digital environment. You can override layout, colours, typography and styling for specific components using your own stylesheet, all without modifying the SDK itself.

Use this guide to understand which variables are available and how to apply them.

#### How to use

To customise an Imprint:

1. Add the desired CSS variables to your global stylesheet or inline styles.
2. Apply them to the container wrapping the Amondo Imprint embed.
3. Variables will automatically be applied by the SDK.

```css
/* Example */
:root .amondo-sdk-container {
  --amo-font-size-base: 18px;
  --amo-carousel-arrow-background-color: #ffffff;
}
```

To customise multiple SDK on the page independently, use custom class `.amondo-sdk-container-${imprintId}`

```css
:root .amondo-sdk-container-1a6baa8f-f78b-4429-a8c3-470b5a98d153 {
  --amo-font-size-base: 18px;
  --amo-carousel-arrow-background-color: #ffffff;
}

:root .amondo-sdk-container-bc719aca-88a9-4b41-8185-dc713f2ebf93 {
  --amo-font-size-base: 24px;
  --amo-carousel-arrow-background-color: #000000;
}
```

#### Base variables

| Variable                            | Default                        | Description                                  |
| ----------------------------------- | ------------------------------ | -------------------------------------------- |
| `--amo-font-size-base`              | `16px`                         | Base font size                               |
| `--amo-mobile-popup-gradient-color` | `var(--amo-color-black)`       | Gradient background colour for mobile popups |
| `--amo-primary-roundness`           | `12px`                         |                                              |
| `--amo-secondary-roundness`         | `8px`                          |                                              |
| `--amo-color-button`                | `var(--amo-color-white)`       |                                              |
| `--amo-color-button-text`           | `var(--amo-color-black)`       |                                              |
| `--amo-color-button-icon`           | `var(--amo-color-button-text)` |                                              |

### Imprint formats

#### Layout

| Variable                     | Default                       | Description             |
| ---------------------------- | ----------------------------- | ----------------------- |
| `--amo-grid-spacing-desktop` | `var(--amo-grid-gap-desktop)` | Grid spacing on desktop |
| `--amo-grid-spacing-mobile`  | `var(--amo-grid-gap-mobile)`  | Grid spacing on mobile  |

#### Carousel

| Variable                                 | Default                                     | Description                 |
| ---------------------------------------- | ------------------------------------------- | --------------------------- |
| `--amo-carousel-arrow-border-radius`     | `50%`                                       | Border radius of arrows     |
| `--amo-carousel-arrow-background-color`  | `transparent`                               | Background colour of arrows |
| `--amo-carousel-progress-active-color`   | `var(--amo-color-accent, --amo-color-blue)` | Progress indicator (active) |
| `--amo-carousel-max-width`               | `1200px`                                    | Max width of carousel       |
| `--amo-carousel-arrow-border-color`      | no default value                            |                             |
| `--amo-carousel-arrow-color`             | no default value                            |                             |
| `--amo-carousel-progress-inactive-color` | no default value                            |                             |

#### Stories

| Variable                       | Default                                       | Description             |
| ------------------------------ | --------------------------------------------- | ----------------------- |
| `--amo-story-inner-ring-color` | `var(--amo-color-white)`                      | Inner ring colour       |
| `--amo-story-outer-ring-color` | `var(--amo-color-accent)`                     | Outer ring colour       |
| `--amo-story-border-radius`    | `50%`                                         | Shape of story items    |
| `--amo-story-background-color` | `var(--amo-color-accent)`                     | Background colour       |
| `--amo-story-size-mobile`      | `60px`                                        | Size on mobile          |
| `--amo-story-size-desktop`     | `90px`                                        | Size on desktop         |
| `--amo-story-spacing`          | `16px`                                        | Spacing between stories |
| `--amo-story-title-font`       | `var(--amo-system-font, 'Inter, sans-serif')` | Font for story titles   |
| `--amo-story-title-color`      | `var(--amo-color-black)`                      | Colour of story titles  |
| `--amo-story-title-size`       | `0.75em`                                      | Size of story titles    |

#### Gallery

| Variable                                                     | Default                                       | Description |
| ------------------------------------------------------------ | --------------------------------------------- | ----------- |
| `--amo-pagination-bar-background`                            | `var(--amo-color-system-background)`          |             |
| `--amo-pagination-bar-border-radius`                         | `var(--amo-secondary-roundness)`              |             |
| `--amo-pagination-bar-font`                                  | `var(--amo-system-font, 'Inter, sans-serif')` |             |
| `--amo-pagination-bar-button-border-radius`                  | `var(--amo-secondary-roundness)`              |             |
| `--amo-pagination-bar-button-background`                     | `var(--amo-color-system-background)`          |             |
| `--amo-pagination-bar-button-text-hover-color`               | `unset`                                       |             |
| `--amo-pagination-bar-button-text-color`                     | `var(--amo-color-details-text-secondary)`     |             |
| `--amo-pagination-bar-selected-page-button-background-color` | `var(--amo-color-accent)`                     |             |
| `--amo-pagination-bar-selected-page-button-text-color`       | `var(--amo-color-tile-text-primary)`          |             |
| `--amo-pagination-scroll-top-offset`                         | `200px`                                       |             |

### Tiles

#### General

| Variable                      | Default                        | Description                  |
| ----------------------------- | ------------------------------ | ---------------------------- |
| `--amo-tile-border-radius`    | `var(--amo-primary-roundness)` | Tile shape                   |
| `--amo-tile-background-color` | `var(--amo-color-accent)`      | Background colour            |
| `--amo-mobile-author-color`   | `var(--amo-color-white)`       | Author text colour on mobile |

#### Frame

| Variable                                    | Default                          | Description                         |
| ------------------------------------------- | -------------------------------- | ----------------------------------- |
| `--amo-frame-background-color`              | `var(--amo-color-black)`         | Frame background                    |
| `--amo-frame-font`                          | `Inter, sans-serif`              | Default font                        |
| `--amo-frame-arrow-background-color`        | `rgba(255, 255, 255, 0.1)`       | Arrow background (default)          |
| `--amo-frame-arrow-active-background-color` | `rgba(255, 255, 255, 0.2)`       | Arrow background (active)           |
| `--amo-frame-arrow-border-color`            | `rgba(255, 255, 255, 0.1)`       | Border colour                       |
| `--amo-frame-arrow-border-radius`           | `50%`                            | Shape of arrows                     |
| `--amo-frame-avatar-border-radius`          | `50%`                            | Avatar shape                        |
| `--amo-frame-button-border-radius`          | `var(--amo-secondary-roundness)` | Button shape                        |
| `--amo-frame-button-font`                   | `Inter, sans-serif`              | Button font                         |
| `--amo-frame-button-color`                  | `var(--amo-color-button-text)`   | Button text                         |
| `--amo-frame-button-background-color`       | `var(--amo-color-button)`        | Button background                   |
| `--amo-frame-icon-color`                    | `var(--amo-color-white)`         | Icon colour                         |
| `--amo-frame-mobile-padding`                | `100px`                          | Bottom padding for the mobile frame |

#### Frame details

| Variable                                            | Default                                     | Description             |
| --------------------------------------------------- | ------------------------------------------- | ----------------------- |
| `--amo-frame-details-background-color`              | `var(--amo-color-system-background)`        | Base details background |
| `--amo-frame-details-background-color-media`        | `var(--amo-frame-details-background-color)` | Media tile              |
| `--amo-frame-details-background-color-text`         | `var(--amo-frame-details-background-color)` | Text tile               |
| `--amo-frame-details-background-color-submission`   | `var(--amo-frame-details-background-color)` | Submission tile         |
| `--amo-frame-details-background-color-tiktok`       | `var(--amo-frame-details-background-color)` | TikTok tile             |
| `--amo-frame-details-background-color-article`      | `var(--amo-frame-details-background-color)` | Article tile            |
| `--amo-frame-details-background-color-quiz`         | `var(--amo-frame-details-background-color)` | Quiz tile               |
| `--amo-frame-details-background-color-poll`         | `var(--amo-frame-details-background-color)` | Poll tile               |
| `--amo-frame-details-background-color-spotify`      | `var(--amo-frame-details-background-color)` | Spotify tile            |
| `--amo-frame-details-background-color-youtube`      | `var(--amo-frame-details-background-color)` | YouTube tile            |
| `--amo-frame-details-background-color-clickthrough` | `var(--amo-frame-details-background-color)` | Clickthrough tile       |

#### Media tile

| Variable                      | Default                     | Description |
| ----------------------------- | --------------------------- | ----------- |
| `--amo-media-tile-text-font`  | `Inter, sans-serif`         | Font        |
| `--amo-media-tile-text-color` | `var(--amo-color-white-80)` | Text colour |

#### Text tile

| Variable                     | Default                              | Description |
| ---------------------------- | ------------------------------------ | ----------- |
| `--amo-text-tile-text-color` | `var(--amo-color-tile-text-primary)` | Text colour |
| `--amo-text-tile-text-font`  | `Inter, sans-serif`                  | Text font   |

#### Quiz tile

| Variable                                                 | Default                  | Description                       |
| -------------------------------------------------------- | ------------------------ | --------------------------------- |
| `--amo-quiz-tile-title-font`                             | `Inter, sans-serif`      | Title font                        |
| `--amo-quiz-tile-title-color`                            | `var(--amo-color-white)` | Title colour                      |
| `--amo-quiz-tile-title-with-background-title-color`      | `var(--amo-color-black)` | Title on coloured background      |
| `--amo-quiz-tile-title-with-background-background-color` | `var(--amo-color-white)` | Background colour for quiz titles |
| `--amo-quiz-tile-title-font-size-mobile`                 | `1em`                    | Title font size on mobile         |
| `--amo-quiz-tile-title-font-size-desktop`                | `1.5em`                  | Title font size on desktop        |
| `--amo-quiz-tile-title-font-weight`                      | `700`                    | Title font weight                 |
| `--amo-quiz-tile-title-padding-mobile`                   | `4px`                    | Title padding on mobile           |
| `--amo-quiz-tile-title-padding-desktop`                  | `8px`                    | Title padding on desktop          |
| `--amo-quiz-tile-button-font-size-mobile`                | `0.75em`                 | Button font size on mobile        |
| `--amo-quiz-tile-button-font-size-desktop`               | `1em`                    | Button font size on desktop       |
| `--amo-quiz-tile-button-padding-mobile`                  | `2px 12px`               | Button padding on mobile          |
| `--amo-quiz-tile-button-padding-desktop`                 | `8px 16px`               | Button padding on desktop         |

#### Quiz leaderboard

| Variable                                        | Default                              | Description            |
| ----------------------------------------------- | ------------------------------------ | ---------------------- |
| `--amo-leaderboard-progress-color`              | `var(--amo-color-accent)`            | Progress bar colour    |
| `--amo-leaderboard-progress-height`             | `16px`                               | Progress bar height    |
| `--amo-leaderboard-progress-radius`             | `16px`                               | Progress bar roundness |
| `--amo-leaderboard-tooltip-color`               | `var(--amo-color-accent)`            | Tooltip colour         |
| `--amo-leaderboard-tooltip-padding`             | `6px 12px`                           | Tooltip padding        |
| `--amo-leaderboard-tooltip-font-size`           | `16px`                               | Tooltip font size      |
| `--amo-leaderboard-progress-background-opacity` | `20%`                                | Background opacity     |
| `--amo-leaderboard-tooltip-text`                | `var(--amo-color-tile-text-primary)` | Tooltip text colour    |
| `--amo-leaderboard-tooltip-radius`              | `8px`                                | Tooltip roundness      |
| `--amo-leaderboard-tooltip-font`                | `var(--amo-system-font)`             | Tooltip font           |

#### Poll tile

| Variable                       | Default                     | Description        |
| ------------------------------ | --------------------------- | ------------------ |
| `--amo-poll-title-color`       | `var(--amo-color-white)`    | Title colour       |
| `--amo-poll-label-color`       | `var(--amo-color-white-80)` | Label colour       |
| `--amo-poll-description-color` | `var(--amo-color-white-80)` | Description colour |

#### Poll options

| Variable                                       | Default                     | Description                  |
| ---------------------------------------------- | --------------------------- | ---------------------------- |
| `--amo-poll-option-radius`                     | `12px`                      | Option shape                 |
| `--amo-poll-option-text-title`                 | `var(--amo-color-black)`    | Option title text            |
| `--amo-poll-option-text-description`           | `var(--amo-color-black)`    | Option description text      |
| `--amo-poll-option-text-primary`               | `var(--amo-color-blue-600)` | Primary option text          |
| `--amo-poll-option-bg-voted-for`               | `var(--amo-color-blue-100)` | Background when selected     |
| `--amo-poll-option-bg-not-voted-for`           | `var(--amo-color-zinc-200)` | Background when not selected |
| `--amo-poll-option-border`                     | `var(--amo-color-blue-600)` | Option border colour         |
| `--amo-poll-option-background`                 | `var(--amo-color-white)`    | Background colour            |
| `--amo-poll-option-confirm-button-bg`          | `var(--amo-color-blue-600)` | Confirm button background    |
| `--amo-poll-option-confirm-button-text`        | `var(--amo-color-white)`    | Confirm button text colour   |
| `--amo-poll-option-cancel-button-text`         | `var(--amo-color-black)`    | Cancel button text colour    |
| `--amo-poll-option-cancel-primary-button-bg`   | `#e4e4e7`                   | Cancel primary button bg     |
| `--amo-poll-option-cancel-secondary-button-bg` | `#a1a1aa`                   | Cancel secondary button bg   |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.amondo.com/developer-guides/css-variables.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.