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

# CSS Patterns

> Follow best practices for advanced customization of the Embedded UI

Tight uses specialized CSS patterns in certain components to ensure consistent behavior. When customizing these
components beyond what design tokens provide, you'll need to match these patterns to maintain the intended
functionality. This reference documents these patterns and explains how to work with them effectively.

## Hover Styles

Tight uses a CSS selector for the hover pseudo-class that ensures consistent behavior across touch-based devices.

**Recommended approach:** Modify the `hover` [design tokens](/embeddable-ui/react/reference/design-tokens#surface-colors) to customize hover styles. This is the simplest and most maintainable way to adjust hover colors and states.

**If design tokens aren't sufficient:** You may override the hover pseudo-class on a specific class directly for more granular control. Use the following selector pattern to ensure your rule takes precedence over the default:

```css theme={null}
@media (hover: hover) and (pointer: fine) {
  &:hover {
    /* Your hover styles here */
  }
}
```

This ensures hover styles only apply on devices that support hovering, preventing issues on touch-based devices where interactions could otherwise trigger unintended hover states.