/**
 * @file navItemStyles.stylex.ts
 * @input Uses theme tokens (color, spacing, radius, typography, transition, size)
 * @output Exports shared nav item appearance styles and NavItemSize type
 * @position Shared styles consumed by SideNavItem, TopNavItem (drawer mode),
 *   TopNavMenu (drawer mode), and any custom nav items that need to match.
 *
 * Centralizes the nav item appearance (layout, colors, hover/active/selected states,
 * disabled state) so all nav-like components stay in sync — especially important
 * when TopNav items render inside MobileNav drawers alongside SideNav items.
 *
 * Individual components layer their own overrides (e.g. collapsed mode, indentation,
 * focus outlines) via stylex.props composition.
 */
export type NavItemSize = 'sm' | 'md' | 'lg';
import * as stylex from '@stylexjs/stylex';
/**
 * Base styles shared by all nav item components.
 * Apply as a foundation and override specific properties as needed.
 *
 * @example
 * ```
 * import {navItemStyles} from '@astryxdesign/core/navItemStyles';
 *
 * const styles = stylex.create({
 *   indented: { paddingInlineStart: spacingVars['--spacing-6'] },
 * });
 *
 * <a {...stylex.props(navItemStyles.item, styles.indented)}>
 *   Dashboard
 * </a>
 * ```
 */
export declare const navItemStyles: Readonly<{
    readonly item: Readonly<{
        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
        readonly gap: stylex.StyleXClassNameFor<"gap", "8px">;
        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
        readonly height: stylex.StyleXClassNameFor<"height", "32px">;
        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "8px">;
        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "8px">;
        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">;
        readonly textDecoration: stylex.StyleXClassNameFor<"textDecoration", "none">;
        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", "inherit">;
        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-base)">;
        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "400">;
        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "1.4286">;
        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "start">;
        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
        readonly ':hover': stylex.StyleXClassNameFor<":hover", {
            readonly '@media (hover: hover)': {
                readonly backgroundColor: stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">;
            };
        }>;
        readonly ':active': stylex.StyleXClassNameFor<":active", {
            readonly backgroundColor: stylex.StyleXVar<"light-dark(#05365919, #FFFFFF19)">;
        }>;
    }>;
    readonly selected: Readonly<{
        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))">;
        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "500">;
        readonly ':hover': stylex.StyleXClassNameFor<":hover", {
            readonly '@media (hover: hover)': {
                readonly backgroundColor: stylex.StyleXVar<"light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))">;
            };
        }>;
        readonly ':active': stylex.StyleXClassNameFor<":active", {
            readonly backgroundColor: stylex.StyleXVar<"light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))">;
        }>;
    }>;
    readonly disabled: Readonly<{
        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#A4B0BC, #6F747C)">;
        readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
        readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
    }>;
    readonly sm: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "28px">;
        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "4px">;
    }>;
    readonly md: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "32px">;
        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "8px">;
    }>;
    readonly lg: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "36px">;
        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "8px">;
    }>;
}>;
//# sourceMappingURL=navItemStyles.stylex.d.ts.map