/*
 * <x-icon>: a Material Symbol at the size it is drawn.
 *
 * 24px unless `size` sets `--md-icon-size` (resources/views/components/icon.blade.php), which is
 * M3's default icon size (docs/reference/m3/styles.md § Icons). The symbol never shrinks in a flex
 * row, so a long label beside it cannot squeeze it. `data-md-mirror-rtl` flips a directional
 * symbol in a right-to-left document (docs/reference/m3/foundations.md § Layout → bidirectionality).
 */

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

@layer material.components {
    [data-md-icon] {
        flex-shrink: 0;
        inline-size: var(--md-icon-size, 24px);
        block-size: var(--md-icon-size, 24px);
    }

    [data-md-icon][data-md-mirror-rtl]:is([dir='rtl'], [dir='rtl'] *) {
        transform: scaleX(-1);
    }
}