/*
 * <x-choices>: choosing from a list, as M3's filter chips or as a searchable field with a menu
 * (resources/views/components/choices.blade.php).
 *
 * Almost nothing of its own to draw: the chips are <x-chip-set>'s and <x-chip>'s, the searchable
 * field is <x-field>'s with its arrow turning over while the list is open (components/field.css),
 * and the open list is M3's menu, drawn by components/menu.css on `data-md-field-menu` and
 * `data-md-field-option`. What is left is the row that says nothing matches: body-medium in
 * on-surface-variant, padded like a menu row (16px across, 12px down).
 *
 *   [data-md-choices]            the root; data-md-searchable
 *     [data-md-choices-empty]    the list's "Nothing matches" row
 */

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

@import './field.css';
@import './icon.css';
@import './chip-set.css';
@import './chip.css';
@import './menu.css';

@layer material.components {
    [data-md-choices-empty] {
        padding: 12px var(--md-sys-measurement-space200);
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-body-md);
        letter-spacing: var(--md-sys-typescale-body-md-tracking);
        font-variation-settings: normal;
    }
}