/**
 * M3's window size classes, for scripts that ask the viewport width.
 *
 * The same four numbers as the `medium:`, `expanded:`, `large:` and `extra-large:` variants in
 * tokens/theme.css; compact is everything below `medium`. `from('expanded')` and `upTo('medium')`
 * return MediaQueryLists on the range syntax Tailwind compiles, so a script and a stylesheet
 * never disagree at the boundary pixel.
 */
export const breakpoints = Object.freeze({
    medium: 600,
    expanded: 840,
    large: 1200,
    'extra-large': 1600,
})

const width = (name) => {
    if (!(name in breakpoints)) {
        throw new Error(`Unknown breakpoint "${name}". Use one of: ${Object.keys(breakpoints).join(', ')}.`)
    }

    return breakpoints[name]
}

/** Matches at and above the class's lower edge, like `medium:`. */
export const from = (name) => window.matchMedia(`(width >= ${width(name)}px)`)

/** Matches below the class's lower edge, like `max-medium:`. */
export const upTo = (name) => window.matchMedia(`(width < ${width(name)}px)`)