export declare const hideOnMobile: string;
export declare const hideOnTabletAndBelow: string;
export declare const toolbarWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
    size: {
        sm: {
            minHeight: "48px";
            padding: `var(--${string})`;
        };
        md: {
            minHeight: `var(--${string})`;
            padding: `var(--${string})`;
        };
        lg: {
            minHeight: "72px";
            padding: `var(--${string})`;
        };
    };
    layout: {
        horizontal: string;
        vertical: (string | {
            '@media': {
                'screen and (max-width: 767px)': {
                    flexDirection: "row";
                    flexWrap: "wrap";
                    alignItems: "center";
                    justifyContent: "space-between";
                    gap: `var(--${string})`;
                };
            };
        })[];
    };
    responsive: {
        true: {
            '@media': {
                'screen and (min-width: 768px) and (max-width: 1023px)': {
                    padding: `var(--${string})`;
                    justifyContent: "center";
                };
                'screen and (max-width: 767px)': {
                    padding: `var(--${string}) var(--${string})`;
                    minHeight: "48px";
                    flexDirection: "row";
                    flexWrap: "nowrap";
                    alignItems: "center";
                    justifyContent: "space-between";
                    gap: `var(--${string})`;
                    overflow: "hidden";
                };
            };
        };
        false: {};
    };
    sticky: {
        true: {
            position: "sticky";
            top: number;
            zIndex: `var(--${string})`;
            backdropFilter: "blur(16px)";
            WebkitBackdropFilter: "blur(16px)";
            background: `var(--${string})f0`;
            borderBottom: `1px solid var(--${string})20`;
            boxShadow: "0 2px 8px -2px rgba(0, 0, 0, 0.1)";
        };
        false: {};
    };
}>;
export declare const toolbarListItem: string;
export declare const contentWrapper: string;
export declare const iconWrapper: string;
export declare const toolbarSection: import('@vanilla-extract/recipes').RuntimeFn<{
    type: {
        navigation: {
            flexWrap: "nowrap";
            gap: `var(--${string})`;
        };
        search: {
            flex: "1 1 var(--timeline-search-width, 300px)";
            maxWidth: "var(--timeline-search-max-width, 600px)";
            justifyContent: "center";
            minWidth: "var(--timeline-search-min-width, 200px)";
        };
        actions: {
            flexWrap: "wrap";
            justifyContent: "flex-end";
            gap: `var(--${string})`;
        };
    };
    responsive: {
        true: {
            '@media': {
                'screen and (max-width: 767px)': {
                    width: "100%";
                    justifyContent: "center";
                };
            };
        };
        false: {};
    };
    visible: {
        true: {
            visibility: "visible";
            opacity: number;
        };
        false: {
            visibility: "hidden";
            opacity: number;
            width: number;
            overflow: "hidden";
        };
    };
}>;
export declare const searchWrapper: string;
export declare const searchInput: string;
export declare const searchInfo: string;
export declare const searchControls: string;
export declare const searchButton: string;
export declare const searchButtonIcon: string;
export declare const toolbarIconButton: import('@vanilla-extract/recipes').RuntimeFn<{
    state: {
        default: {};
        active: {
            backgroundColor: `var(--${string})15`;
            borderColor: `var(--${string})70`;
            color: `var(--${string})`;
            boxShadow: `0 0 0 2px var(--${string})25, 0 2px 8px -2px var(--${string})20`;
            fontWeight: `var(--${string})`;
            selectors: {
                '&:hover:not(:disabled)': {
                    backgroundColor: `var(--${string})`;
                    borderColor: `var(--${string})`;
                    color: "#ffffff";
                    transform: "translateY(-1px)";
                    boxShadow: `0 0 0 2px var(--${string})40, 0 4px 12px -2px var(--${string})30`;
                };
            };
        };
        minimized: {
            backgroundColor: `var(--${string})12`;
            borderColor: `var(--${string})50`;
            color: `var(--${string})`;
            opacity: number;
            selectors: {
                '&:hover:not(:disabled)': {
                    opacity: number;
                    backgroundColor: `var(--${string})`;
                    borderColor: `var(--${string})`;
                    color: "#ffffff";
                    transform: "translateY(-1px)";
                };
            };
        };
    };
    size: {
        sm: {
            width: "24px";
            height: "24px";
            fontSize: `var(--${string})`;
        };
        md: {
            width: `var(--${string})`;
            height: `var(--${string})`;
            fontSize: `var(--${string})`;
        };
        lg: {
            width: "32px";
            height: "32px";
            fontSize: `var(--${string})`;
        };
    };
    interactive: {
        true: string;
        false: {
            cursor: "default";
            selectors: {
                '&:hover': {
                    transform: "none";
                };
            };
        };
    };
}>;
export declare const extraControls: string;
export declare const extraControlChild: string;
export type ToolbarWrapperVariants = Parameters<typeof toolbarWrapper>[0];
export type ToolbarSectionVariants = Parameters<typeof toolbarSection>[0];
export type ToolbarIconButtonVariants = Parameters<typeof toolbarIconButton>[0];
export declare const navigationGroup: string;
export declare const actionGroup: string;
export declare const searchGroup: string;
export declare const toolbarPatterns: {
    basic: string;
    compact: string;
    fixed: (string | {
        position: string;
        top: number;
        left: number;
        right: number;
        zIndex: `var(--${string})`;
    })[];
};
//# sourceMappingURL=toolbar.css.d.ts.map