import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="FP.React Components/Popover/Styling" />

# Popover Styling Guide

Complete reference for theming and customizing the Popover component using CSS custom properties.

## CSS Custom Properties

### Background & Border

| Property | Default | Description |
|----------|---------|-------------|
| `--popover-bg` | `#ffffff` | Background color |
| `--popover-border` | `0.0625rem solid #ccc` | Border style |
| `--popover-border-radius` | `0.5rem` | Corner rounding |

### Spacing

| Property | Default | Description |
|----------|---------|-------------|
| `--popover-padding` | `1rem` | Internal padding |
| `--popover-margin` | `0.5rem` | Distance from trigger |
| `--popover-max-width` | `20rem` | Maximum width |

### Shadow

| Property | Default | Description |
|----------|---------|-------------|
| `--popover-shadow` | Box shadow value | Drop shadow effect |

### Arrow

| Property | Default | Description |
|----------|---------|-------------|
| `--popover-arrow-size` | `0.5rem` | Arrow dimensions |
| `--popover-arrow-color` | `var(--popover-bg)` | Arrow color |

### Close Button

| Property | Default | Description |
|----------|---------|-------------|
| `--popover-close-size` | `1.5rem` | Button dimensions |
| `--popover-close-color` | `#666` | Icon color |
| `--popover-close-hover-color` | `#000` | Hover icon color |
| `--popover-close-hover-bg` | `rgba(0, 0, 0, 0.05)` | Hover background |

## Theme Examples

### Dark Theme

```tsx
<Popover
  id="dark-popover"
  styles={{
    '--popover-bg': '#1a1a2e',
    '--popover-border': '0.0625rem solid #16213e',
    '--popover-padding': '1.5rem',
    '--popover-shadow': '0 0.5rem 1rem rgba(0, 0, 0, 0.5)',
    '--popover-arrow-color': '#1a1a2e',
    '--popover-close-color': '#aaa',
    '--popover-close-hover-color': '#fff',
    '--popover-close-hover-bg': 'rgba(255, 255, 255, 0.1)',
    color: '#eee',
  }}
>
  <p>Dark themed popover</p>
</Popover>
```

### Colorful Accent

```tsx
<Popover
  id="accent-popover"
  styles={{
    '--popover-bg': '#fff3e0',
    '--popover-border': '0.125rem solid #ff9800',
    '--popover-border-radius': '0.75rem',
    '--popover-shadow': '0 0.25rem 0.75rem rgba(255, 152, 0, 0.2)',
    '--popover-arrow-color': '#fff3e0',
  }}
>
  <p>Accent colored popover</p>
</Popover>
```

### Minimal (No Border/Shadow)

```tsx
<Popover
  id="minimal-popover"
  styles={{
    '--popover-bg': '#f5f5f5',
    '--popover-border': 'none',
    '--popover-border-radius': '0.25rem',
    '--popover-padding': '0.75rem',
    '--popover-shadow': 'none',
  }}
  showArrow={false}
>
  <p>Minimal popover</p>
</Popover>
```

### Large Content

```tsx
<Popover
  id="large-popover"
  styles={{
    '--popover-max-width': '30rem',
    '--popover-padding': '2rem',
    '--popover-border-radius': '1rem',
  }}
>
  <article>Large content here...</article>
</Popover>
```

## Global Theming

Define CSS variables globally to theme all popovers:

```css
:root {
  /* Light theme */
  --popover-bg: #ffffff;
  --popover-border: 0.0625rem solid #e0e0e0;
  --popover-border-radius: 0.5rem;
  --popover-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] {
  /* Dark theme */
  --popover-bg: #2d2d2d;
  --popover-border: 0.0625rem solid #404040;
  --popover-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
  --popover-close-color: #aaa;
  --popover-close-hover-color: #fff;
}
```

## Custom CSS Classes

Add custom styles via the `className` prop:

```tsx
<Popover
  id="custom-class-popover"
  className="my-custom-popover"
>
  <p>Content</p>
</Popover>
```

```css
.my-custom-popover {
  /* Override or extend default styles */
  border: 0.125rem dashed #0066cc;
  animation: pulse 2s infinite;
}

.my-custom-popover .fpkit-popover-content {
  /* Style content wrapper */
  font-family: monospace;
}
```

## Arrow Customization

### Hide Arrow

```tsx
<Popover showArrow={false}>
  <p>No arrow</p>
</Popover>
```

### Style Arrow

```tsx
<Popover
  styles={{
    '--popover-arrow-size': '0.75rem',
    '--popover-arrow-color': '#ff5722',
  }}
>
  <p>Custom arrow</p>
</Popover>
```

## Close Button Customization

### Hide Close Button

```tsx
<Popover mode="auto" showCloseButton={false}>
  <p>No close button</p>
</Popover>
```

### Style Close Button

```tsx
<Popover
  mode="manual"
  styles={{
    '--popover-close-size': '2rem',
    '--popover-close-color': '#d32f2f',
    '--popover-close-hover-bg': '#ffebee',
  }}
>
  <p>Custom close button</p>
</Popover>
```

## Trigger Button Styling

The default trigger can be styled via CSS:

```css
.fpkit-popover-trigger {
  /* Custom trigger styles */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}

.fpkit-popover-trigger:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.5rem rgba(102, 126, 234, 0.3);
}
```

Or use a custom trigger element:

```tsx
<Popover
  trigger={
    <button className="my-trigger">
      Custom Trigger
    </button>
  }
>
  <p>Content</p>
</Popover>
```

## Animation Customization

The popover uses CSS transitions. Customize via inline styles:

```tsx
<Popover
  id="animated-popover"
  styles={{
    transition: 'opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
  }}
>
  <p>Custom animation timing</p>
</Popover>
```

## Backdrop Styling (Manual Mode)

Style the backdrop overlay using `::backdrop`:

```css
.fpkit-popover::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(0.25rem);
}
```

Or via inline styles:

```tsx
<Popover
  mode="manual"
  className="custom-backdrop"
>
  <p>Content</p>
</Popover>
```

```css
.custom-backdrop::backdrop {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
}
```

## Responsive Sizing

Adjust sizing based on viewport:

```css
.fpkit-popover {
  --popover-max-width: 90vw;
}

@media (min-width: 48rem) {
  .fpkit-popover {
    --popover-max-width: 30rem;
  }
}

@media (min-width: 64rem) {
  .fpkit-popover {
    --popover-max-width: 40rem;
  }
}
```

## Best Practices

1. **Use rem units**: All spacing uses rem for accessibility
2. **Maintain contrast**: Ensure text/background contrast meets WCAG AA
3. **Test animations**: Verify animations work across browsers
4. **Consider reduced motion**: Respect `prefers-reduced-motion`
5. **Avoid over-styling**: Keep popovers simple and focused

## CSS Variables Reference

Full list of available CSS custom properties:

```css
.fpkit-popover {
  /* Background & Border */
  --popover-bg: #ffffff;
  --popover-border: 0.0625rem solid #ccc;
  --popover-border-radius: 0.5rem;

  /* Spacing */
  --popover-padding: 1rem;
  --popover-margin: 0.5rem;
  --popover-max-width: 20rem;

  /* Shadow */
  --popover-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1),
    0 0.125rem 0.25rem rgba(0, 0, 0, 0.06);

  /* Arrow */
  --popover-arrow-size: 0.5rem;
  --popover-arrow-color: var(--popover-bg);

  /* Close Button */
  --popover-close-size: 1.5rem;
  --popover-close-color: #666;
  --popover-close-hover-color: #000;
  --popover-close-hover-bg: rgba(0, 0, 0, 0.05);
}
```

## Debugging Tips

### Inspect Styles

Use browser DevTools to inspect and modify CSS variables:

```javascript
// Get computed value
getComputedStyle(popover).getPropertyValue('--popover-bg');

// Set value
popover.style.setProperty('--popover-bg', '#ff0000');
```

### Check Browser Support

Verify native popover support:

```javascript
if ('popover' in HTMLElement.prototype) {
  console.log('Popover API supported');
}
```

### Positioning Issues

If positioning seems off, check CSS anchor positioning support:

```javascript
if (CSS.supports('anchor-name', '--test')) {
  console.log('Anchor positioning supported');
}
```