import { CSSObject } from 'styled-components';
import { FoundationTokenType } from '../../tokens/theme.token';
import { BreakpointType } from '../../breakpoints/breakPoints';
export type TopbarState = 'default' | 'hover' | 'active';
/**
 * Topbar Tokens following the pattern: [target].CSSProp.[variant].[state]
 *
 * Structure matches Sidebar pattern for consistency:
 * - Base properties: borderBottom, backgroundColor, backdropFilter, padding, gap
 * - Target sections: toggleButton.*, actionButton.*, tenantIconButton.*, merchantSelectTrigger.*, leftSection.*, rightSection.*, sidebarSection.*
 * - Each target has: backgroundColor, padding, borderRadius, gap, specific properties
 * - Interactive elements have state-based styling: [state] = default | hover | active
 *
 * Pattern examples:
 * - backgroundColor (topbar background color)
 * - padding (topbar content padding)
 * - toggleButton.backgroundColor.[state] (interactive toggle button)
 * - actionButton.padding (action button spacing)
 * - leftSection.gap (left section item spacing)
 * - merchantSelectTrigger.text.color (merchant text color)
 */
export type TopbarTokenType = {
    zIndex: CSSObject['zIndex'];
    borderBottom: CSSObject['borderBottom'];
    backgroundColor: CSSObject['backgroundColor'];
    backdropFilter: CSSObject['backdropFilter'];
    padding: CSSObject['padding'];
    gap: CSSObject['gap'];
    toggleButton: {
        borderRadius: CSSObject['borderRadius'];
        padding: CSSObject['padding'];
        backgroundColor: {
            [key in TopbarState]: CSSObject['backgroundColor'];
        };
        transition: CSSObject['transition'];
        icon: {
            size: CSSObject['width'];
            color: CSSObject['color'];
        };
    };
    actionButton: {
        borderRadius: CSSObject['borderRadius'];
        padding: CSSObject['padding'];
        minWidth: CSSObject['minWidth'];
        height: CSSObject['height'];
        backgroundColor: {
            [key in TopbarState]: CSSObject['backgroundColor'];
        };
        transition: CSSObject['transition'];
        icon: {
            size: CSSObject['width'];
            color: CSSObject['color'];
        };
    };
    tenantIconButton: {
        borderRadius: CSSObject['borderRadius'];
        minHeight: CSSObject['minHeight'];
        backgroundColor: {
            [key in TopbarState]: CSSObject['backgroundColor'];
        };
        transition: CSSObject['transition'];
    };
    merchantSelectTrigger: {
        gap: CSSObject['gap'];
        icon: {
            size: CSSObject['width'];
            color: CSSObject['color'];
        };
        text: {
            fontSize: CSSObject['fontSize'];
            fontWeight: CSSObject['fontWeight'];
            color: CSSObject['color'];
        };
    };
    leftSection: {
        gap: CSSObject['gap'];
        maxHeight: CSSObject['maxHeight'];
        divider: {
            fontSize: CSSObject['fontSize'];
            fontWeight: CSSObject['fontWeight'];
            color: CSSObject['color'];
        };
    };
    rightSection: {
        gap: CSSObject['gap'];
    };
    sidebarSection: {
        gap: CSSObject['gap'];
    };
};
export type ResponsiveTopbarTokens = {
    [key in keyof BreakpointType]: TopbarTokenType;
};
export declare const getTopbarTokens: (foundationToken: FoundationTokenType) => ResponsiveTopbarTokens;