/*
 * Livewire Material's Tailwind half: the theme that turns the tokens into utilities, the token
 * utilities, and the component stylesheets still written for Tailwind (`@utility`, `@variant`,
 * `@layer components`). It goes when the last component leaves Tailwind.
 *
 * It carries no tokens, so it can sit behind the foundation without declaring them twice — the
 * Workbench imports it that way, after Tailwind:
 *
 *   @import '../../../resources/css/foundation.css';
 *   @import 'tailwindcss' source(none);
 *   @import '../../../resources/css/tailwind.css';
 *
 * An application on 1.x-style imports keeps importing material.css, which brings the tokens and
 * this file together.
 */

@import './tokens/theme.css';
@import './tokens/utilities.css';

/*
 * `rail-collapsed:` — Tailwind's, for the one class left that needs it:
 * scaffold.blade.php's `data-app-shell-actions` row (`rail-collapsed:flex-col`), stacking the
 * footer's icon buttons once the rail they sit in narrows. The definition used to live in
 * navigation.css; that file is gone (plan step 36, navigation group), so this is what is left of
 * it — updated to the `data-md-*` hooks navigation-rail.css now renders, otherwise identical to
 * every branch that file's own header still documents. Goes with the scaffold's own rewrite,
 * whenever `data-app-shell-actions` stops being a Tailwind class list.
 */
@custom-variant rail-collapsed {
    &:where([data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *) {
        @slot;
    }

    &:where([data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
        @slot;
    }

    &:where([data-md-navigation-rail='modal']:not([data-md-open]), [data-md-navigation-rail='modal']:not([data-md-open]) *) {
        @slot;
    }

    @media (width < 600px) {
        &:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
            @slot;
        }
    }

    @media (width < 840px) {
        &:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
            @slot;
        }
    }

    @media (840px <= width < 1200px) {
        &:where(:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]), :is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
            @slot;
        }
    }

    @media (width >= 1200px) {
        &:where([data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
            @slot;
        }
    }
}