/*
 * <x-theme-toggle>: `mode="toggle"|"cycle"` an icon button between light, dark (and system for
 * cycle); `mode="picker"|"contrast"` a connected group over native radios (docs/audits/m3-alignment/
 * navigation.md N-04, N-17 — the Expressive-deprecated segmented button's successor,
 * `<x-group>`, already fixes both there). This file only draws the icon button; the group's own
 * shape, colour and 48px minimum below `medium` are group.css's.
 *
 *   [data-md-theme-toggle="toggle"|"cycle"]     the icon button: 40px reaching 48px through
 *                                                md-touch-target (N-01), morphing corner
 *   [data-md-theme-toggle="picker"|"contrast"]  the group's own wrapper (`role="group"`)
 *
 * The icon button also carries `data-md-icon-button`, the hook `resources/css/components/
 * toolbar.css` matches generically (not `[data-md-button][data-md-icon-button]`, as button.css
 * requires): a theme toggle placed in a toolbar's `actions` takes the toolbar's own icon colour
 * (N-13) the same way one of its `<x-button icon>` children would.
 *
 * The corner morphs from full to `sm` while pressed on the fast spatial spring — M3 Expressive's
 * pressed-state shape change, the same motion `<x-button>`'s own icon buttons use
 * (button.css, `:active`).
 */

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

@import './group.css';
@import './icon.css';

@layer material.components {
    [data-md-theme-toggle='toggle'],
    [data-md-theme-toggle='cycle'] {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        inline-size: var(--md-sys-measurement-space500);
        block-size: var(--md-sys-measurement-space500);
        border-radius: var(--md-sys-shape-corner-full);
        cursor: pointer;
        color: var(--md-sys-color-on-surface-variant);
        transition: border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);

        &:active {
            border-radius: var(--md-sys-shape-corner-sm);
        }
    }
}