BreakoutContainer

---
import { breakoutContainerClassName } from '../../lib/breakout-container-classes'
import '../../styles/breakout-container.css'

/**
 * Ignores the parent’s width: spans the viewport (with caps) via negative
 * side margins and a computed width (`extrawide` ≈ gist code pane cap at 1320px).
 * Pair with `Container` when you need in-flow layout elsewhere. Site
 * `body { overflow-x: clip }` avoids horizontal scroll from `100vw` on `full`.
 *
 * `backgroundReset`: clears layered `background-image` / blend on this node
 * (e.g. under `/_/ui` where `html.ui-gallery-canvas` adds noise). Pair with
 * `bg-surface` or another `bg-*` utility for the fill color.
 */
interface Props {
  width?: 'default' | 'wide' | 'extrawide' | 'full'
  class?: string
  /** Strip wallpaper/gradient layers so `class` `bg-*` is a flat fill. */
  backgroundReset?: boolean
}

const { width = 'default', class: className, backgroundReset = false } = Astro.props

const spanClass = breakoutContainerClassName(width)

/** After `className` so it wins over any accidental `bg-gradient-*` in `class`. */
const backgroundResetClass = backgroundReset
  ? '[background-image:none] [background-blend-mode:normal]'
  : ''
---

<div class:list={[spanClass, className, backgroundResetClass]}>
  <slot />
</div>