> ## Documentation Index
> Fetch the complete documentation index at: https://docs.resurs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Customize the appearance of payment method components with CSS custom properties.

## CSS custom properties

```css theme={"theme":{"light":"catppuccin-latte","dark":"one-dark-pro"}}
:root {
  /** The main accent color  */
  --resurs-checkout-accent-color: light-dark(#8ca101, #a7c080);

  /** Text color */
  --resurs-checkout-text-color: light-dark(#272e33, #d2c5a9);

  /** Background color of the component */
  --resurs-checkout-background: light-dark(#fff, #212529);

  /** Border Radius, a value between 0-30px or equivalent unit of your choice */
  --resurs-checkout-border-radius: 8px;

  /** Font family for all widget text */
  --resurs-checkout-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /** Animation duration for the expand/collapse transition */
  --resurs-checkout-transition-duration: 0.25s;

  /** Easing function for the expand/collapse transition */
  --resurs-checkout-transition-easing: ease-out;

  /** Secondary vars */
  /** Header and subtitle color; defaults to primary foreground */
  --resurs-checkout-header-color: light-dark(#272e33, #d2c5a9);

  /** Hyperlink color; defaults to primary foreground */
  --resurs-checkout-link-color: light-dark(#272e33, #d2c5a9);

  /** Text color for the collapsed view; defaults to the text color */
  --resurs-checkout-collapsed-text-color: light-dark(#272e33, #d2c5a9);

  /** Radiobutton color; defaults to primary color */
  --resurs-checkout-checkbox-color: light-dark(#8ca101, #a7c080);

  /**Radiobutton dot color; defaults to primary color */
  --resurs-checkout-checkbox-checkmark: light-dark(#8ca101, #a7c080);
}
```

## Font size

The widget inherits `font-size` from its placement context. Text scales with the surrounding page rather than using a fixed size. There is no `--resurs-checkout-*` property for size; control it with the native CSS `font-size` property on the component.

```css theme={"theme":{"light":"catppuccin-latte","dark":"one-dark-pro"}}
/* Managed: overrides the 14px default */
resurs-payment-method-selector {
  font-size: 16px;
}

/* Full control: sets the inherited value */
resurs-payment-method-group {
  font-size: 14px;
}
```

Primary content (payment option names, selling points, and links) renders at that size. The collapsed title is 2px larger and fine print is 2px smaller.

In full control, set `font-size` on the group to match your own subtitle (the component can't read it; it's a sibling in your DOM).

## Animation

The widget animates its expand and collapse using a CSS Grid row height transition. If your checkout already animates other payment methods, you can match the timing so all cards feel consistent.

```css theme={"theme":{"light":"catppuccin-latte","dark":"one-dark-pro"}}
resurs-payment-method-selector,
resurs-payment-method-group {
  --resurs-checkout-transition-duration: 300ms;
  --resurs-checkout-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}
```

Set `--resurs-checkout-transition-duration: 0s` to disable animation entirely.

<Tip>
  See [Accessibility](/developer-guide/checkout/payment-methods/accessibility) for keyboard navigation, ARIA roles, reduced motion, and contrast guidance.
</Tip>