/*
 * Livewire Material — the foundation, the one stylesheet every application imports, first:
 *
 *   @import '../../vendor/nonameweb/livewire-material/resources/css/foundation.css';
 *   @import './material-scheme.css';
 *
 * Plain CSS, no build step of its own: an application's bundler (Vite) inlines the imports, and a
 * browser could read the files as they are.
 *
 * Every rule of the package sits in a sub-layer of `material`, in this order, lowest first:
 *
 *   material.reset       foundation/reset.css — the browser's defaults taken back
 *   material.tokens      foundation/tokens.css — every `--md-sys-*` and `--md-ref-*` property
 *   material.base        foundation/base.css, foundation/interaction.css — the page, the font
 *                        face, and md-state-layer, md-focus-ring, md-touch-target, md-link
 *   material.layout      the layout components: scaffold, panes, the canonical layouts
 *   material.components  the components
 *   material.text        text.css — md-type-*, md-ink-*, and the few classes for text
 *   material.visibility  hiding an element below or from a breakpoint, over a component's display
 *
 * Every package stylesheet opens with the same layer statement, before its imports, so the order
 * holds whichever file a bundler reaches first. An application's own CSS is unlayered and
 * therefore outranks every package rule, whatever the selector — an application's broad selector
 * (`button { … }`) restyles the components too. foundation/hidden.css keeps its two `!important`
 * rules outside the layers, so `hidden` and `x-cloak` hide an element whatever sets its display.
 *
 * An application still building Tailwind keeps it in a separate entry and opens both entries with
 * `@layer properties, theme, base, material, components, utilities;`, so the `material` layers sit
 * above Tailwind's preflight and below its utilities (resources/css/tailwind.css's header).
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import './foundation/reset.css';
@import './foundation/hidden.css';
@import './foundation/tokens.css';
@import './foundation/base.css';
@import './foundation/interaction.css';
@import './text.css';