/*
 * `hide-below` and `hide-from`, the visibility props every layout component takes.
 *
 * The breakpoints are M3's (docs/reference/m3/foundations.md § Layout → Breakpoints): compact below
 * 600px, medium 600, expanded 840, large 1200, extra-large 1600, in px — a dp is a CSS pixel, so a
 * larger text size never moves them. `data-md-hide-below="expanded"` hides an element on a window
 * narrower than 840px; `data-md-hide-from="expanded"` hides it from 840px on. There is nothing
 * below compact and from compact is every width, so neither names it; `hidden` does that.
 *
 * In `material.visibility`, the last layer, so it beats the `display` of the component it sits on
 * and of every other package rule. An application's own unlayered rule still wins, by design.
 */

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

@layer material.visibility {
    @media (width < 600px) {
        [data-md-hide-below='medium'] {
            display: none;
        }
    }

    @media (width < 840px) {
        [data-md-hide-below='expanded'] {
            display: none;
        }
    }

    @media (width < 1200px) {
        [data-md-hide-below='large'] {
            display: none;
        }
    }

    @media (width < 1600px) {
        [data-md-hide-below='extra-large'] {
            display: none;
        }
    }

    @media (width >= 600px) {
        [data-md-hide-from='medium'] {
            display: none;
        }
    }

    @media (width >= 840px) {
        [data-md-hide-from='expanded'] {
            display: none;
        }
    }

    @media (width >= 1200px) {
        [data-md-hide-from='large'] {
            display: none;
        }
    }

    @media (width >= 1600px) {
        [data-md-hide-from='extra-large'] {
            display: none;
        }
    }
}