/*
 * <x-account-menu>: the avatar trigger of an `<x-menu>`, its name-and-email header and its theme
 * item — an M3 "extra" the audit found already inside the foundations (docs/audits/m3-alignment/
 * navigation.md): a 40px trigger reaching M3's 48px target through `md-touch-target` (N-01), with
 * `md-state-layer` for the hover and pressed feedback every other trigger in the library already
 * has (N-15) and `md-focus-ring` for its keyboard ring. The avatar image sits behind the state
 * layer's `::before` (z-index -1, foundation/interaction.css) at z-index -2, so a hover or a press
 * still washes over the picture instead of under it; nothing clips the pseudo-target the touch
 * class draws past the 40px circle.
 *
 * `[data-md-account-menu-header]` is the name-and-email block above the separator; its own type and
 * ink are the fixed text classes on the view (`md-type-title-sm md-ink`, `md-type-body-sm
 * md-ink-variant`), since this is prose the caller supplies, not the component's own part.
 */

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

@import './menu.css';
@import './menu-separator.css';
@import './menu-item.css';
@import './icon.css';

@layer material.components {
    [data-md-account-menu] {
        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;
        background-color: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
        font: var(--md-sys-typescale-label-lg);
        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
        font-variation-settings: normal;
    }

    [data-md-account-menu-avatar] {
        position: relative;
        z-index: -2;
        inline-size: 100%;
        block-size: 100%;
        border-radius: var(--md-sys-shape-corner-full);
        object-fit: cover;
    }

    [data-md-account-menu-header] {
        padding-inline: 12px;
        padding-block: var(--md-sys-measurement-space100) 12px;
    }
}