> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://rubik-combined-listings.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# CSS Variables Reference

Rubik Combined Listings exposes 70+ CSS custom properties, allowing advanced styling control without editing theme files. These variables can be overridden via the Custom CSS section using the `:host { }` syntax.

Below are the main variable groups:

**Visual swatch variables**

Control size, borders, shadows, typography, and active states. Examples:

`--rcl-swatch-width`
`--rcl-swatch-border-radius`
`--rcl-swatch-border-width`
`--rcl-swatch-border-color`
`--rcl-swatch-active-border-color`
`--rcl-swatch-shadow`
`--rcl-swatch-media-aspect-ratio`
`--rcl-swatch-hover-transform`
`--rcl-swatch-hover-shadow`
`--rcl-swatch-label-color`
`--rcl-swatch-label-font-size`
`--rcl-swatch-label-font-weight`
`--rcl-swatch-price-color`
`--rcl-swatch-price-font-size`
`--rcl-swatch-compare-price-color`
`--rcl-swatch-active-label-color`
`--rcl-swatch-active-price-color`
`--rcl-swatch-placeholder-bg`

**Button swatch variables**

Control background, border, typography, image size, and selected states. Examples:

`--rcl-button-border-radius`
`--rcl-button-bg-color`
`--rcl-button-text-color`
`--rcl-button-font-size`
`--rcl-button-padding`
`--rcl-button-border-width`
`--rcl-button-border-color`
`--rcl-button-active-border-color`
`--rcl-button-hover-bg-color`
`--rcl-button-hover-text-color`
`--rcl-button-active-bg-color`
`--rcl-button-active-text-color`
`--rcl-button-invert-bg-color`
`--rcl-button-invert-text-color`
`--rcl-button-image-size`
`--rcl-button-image-border-radius`

**Dropdown variables**

Control dropdown appearance and spacing. Examples:

`--rcl-dropdown-border-radius`
`--rcl-dropdown-bg-color`
`--rcl-dropdown-text-color`
`--rcl-dropdown-font-size`
`--rcl-dropdown-padding`
`--rcl-dropdown-width`
`--rcl-dropdown-border-width`

**Group label variables**

Control the option name and selected value styling. Examples:

`--rcl-group-label-color`
`--rcl-group-label-font-size`
`--rcl-group-label-font-weight`
`--rcl-group-label-margin-bottom`
`--rcl-group-label-text-transform`
`--rcl-group-selected-value-font-weight`

**Layout variables**

`--rcl-grid-gap`
`--rcl-grid-template-columns`

**Carousel variables**

`--rcl-carousel-nav-color`
`--rcl-carousel-nav-size`
`--rcl-carousel-nav-bg`
`--rcl-carousel-nav-hover-bg`

**Tooltip variables**

`--rcl-tooltip-bg-color`
`--rcl-tooltip-text-color`
`--rcl-tooltip-font-size`
`--rcl-tooltip-padding`
`--rcl-tooltip-border-radius`

**Out-of-stock variables**

`--rcl-out-of-stock-opacity`
`--rcl-out-of-stock-line-color`
`--rcl-out-of-stock-line-width`

**Overflow indicator variables**

`--rcl-overflow-color`
`--rcl-overflow-font-size`
`--rcl-overflow-hover-color`
`--rcl-overflow-button-*`

These variables make it possible to fully align swatches with your store’s branding while keeping styles isolated from your theme.