import { popoverPrimaryBgColor } from '../../../Popover/styles/base';
/**
 * For the Popover + Tooltip style files:
 *
 * 'above' + 'below' map to position, 'top' + 'bottom' map to beak alignment
 *  variants for both follow this formula: `position`-`beakPosition`
 *  Popovers additionally will have `-sml` added to the end of this string if they are the `secondary` variant
 *
 */
export declare const tooltipBgColor = "background-contrast";
export declare const tooltipArrowHeight = "1rem";
export declare const tooltipArrowHeightPx = 14;
export declare const narrowWidth = 64;
export declare const verticalCenterWidths: {
    readonly minWidth: 64;
    readonly maxWidth: 128;
};
export declare const horizontalCenterWidths: {
    readonly height: "fit-content";
    readonly minWidth: 4;
    readonly maxWidth: 128;
};
export declare const centerHorizontal: {
    readonly top: "0";
    readonly bottom: "0";
    readonly my: "auto";
};
declare const beakBackgroundRotation: {
    readonly above: "rotate(45deg)";
    readonly below: "rotate(-135deg)";
    readonly right: "rotate(135deg)";
    readonly left: "rotate(-45deg)";
};
type SideCenterBeakSide = 'left' | 'right';
/** Popover beak is a real node; `:dir(rtl)` applies on that element (not under `&::after`). */
export declare const horizontalCenterBeakRtlPopover: (side: SideCenterBeakSide) => {
    '&:dir(rtl)': {
        transform: "rotate(135deg)" | "rotate(-45deg)";
    };
};
/**
 * Inline ToolTip / InfoTip: RTL beak rotation on the container that owns `::after`
 * (avoids invalid `::after:dir(rtl)` when the same beak object is merged under `&::after`).
 */
export declare const horizontalCenterBeakRtlInline: (side: SideCenterBeakSide) => {
    '&:dir(rtl)': {
        '&::after': {
            transform: "rotate(135deg)" | "rotate(-45deg)";
        };
    };
};
type GetBeakBackgroundType = {
    alignment: keyof typeof beakBackgroundRotation;
    color: typeof tooltipBgColor | typeof popoverPrimaryBgColor;
};
export declare const getBeakBgAndRotation: ({ alignment, color, }: GetBeakBackgroundType) => {
    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
    backgroundImage: string;
};
export declare const beakStylesBase: {
    borderColor: string;
    borderWidth: string;
};
export declare const beakTopStyles: {
    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
    backgroundImage: string;
    borderColor: string;
    borderWidth: string;
};
export declare const beakBottomStyles: {
    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
    backgroundImage: string;
    borderColor: string;
    borderWidth: string;
};
export declare const beakRightCenterStyles: {
    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
    backgroundImage: string;
    borderColor: string;
    borderWidth: string;
};
export declare const beakLeftCenterStyles: {
    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
    backgroundImage: string;
    borderColor: string;
    borderWidth: string;
};
export declare const topStyles: {
    readonly bottom: "calc(100% + 4px)";
    readonly pb: 12;
};
export declare const topStylesAfter: {
    readonly bottom: "0.25rem";
    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
    readonly backgroundImage: string;
    readonly borderColor: string;
    readonly borderWidth: string;
};
export declare const topStylesBefore: {
    height: number;
    bottom: string;
    content: string;
    position: string;
    width: string;
};
export declare const bottomStyles: {
    readonly top: "calc(100% + 4px)";
    readonly pt: 12;
};
export declare const beforeStylesHorizontal: {
    content: string;
    position: string;
    height: string;
};
export declare const bottomStylesBefore: {
    height: number;
    top: string;
    content: string;
    position: string;
    width: string;
};
export declare const bottomStylesAfter: {
    readonly top: "0.25rem";
    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
    readonly backgroundImage: string;
    readonly borderColor: string;
    readonly borderWidth: string;
};
export declare const rightAlignStyles: {
    '&:dir(rtl)': {
        '&::after': {
            transform: "rotate(135deg)" | "rotate(-45deg)";
        };
    };
    paddingInlineStart: number;
    insetInlineStart: string;
};
export declare const horizontalCenterStyles: {
    readonly maxWidth: number;
    readonly top: "0";
    readonly bottom: "0";
    readonly my: "auto";
    readonly height: "fit-content";
    readonly minWidth: 4;
};
export declare const leftAlignStyles: {
    '&:dir(rtl)': {
        '&::after': {
            transform: "rotate(135deg)" | "rotate(-45deg)";
        };
    };
    paddingInlineEnd: number;
    insetInlineEnd: string;
};
export declare const verticalCenterStyles: {
    readonly left: "calc(50% - 4rem)";
    readonly width: "70vw";
    readonly minWidth: 64;
    readonly maxWidth: 128;
};
export declare const verticalCenterStylesAfter: {
    left: string;
};
export declare const leftVertStyles: {
    readonly justifyContent: "flex-end";
    readonly right: "calc(50% - 2rem)";
};
export declare const leftVertStylesAfter: {
    readonly right: "1.5rem";
};
export declare const rightVertStyles: {
    readonly left: "calc(50% - 2rem)";
};
export declare const rightVertStylesAfter: {
    readonly left: "1.5rem";
};
export declare const rightAlignStylesAfter: {
    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
    readonly backgroundImage: string;
    readonly borderColor: string;
    readonly borderWidth: string;
    readonly insetInlineStart: "4px";
};
export declare const leftAlignStylesAfter: {
    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
    readonly backgroundImage: string;
    readonly borderColor: string;
    readonly borderWidth: string;
    readonly insetInlineEnd: "4px";
};
export declare const tooltipVariantStyles: {
    [k: string]: {};
};
export declare const tooltipCenteredPadding = 4;
export declare const toolTipAlignmentVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"alignment", string | number | false> & {
    theme?: import("@emotion/react").Theme;
}) => import("@codecademy/variance").CSSObject;
export declare const inlineToolTipBodyAlignments: (props: import("@codecademy/variance/dist/types/config").VariantProps<"alignment", false | "avatarAligned" | "previewAligned" | "horizontalCenter" | "vertCenter" | "aligned"> & {
    theme?: import("@emotion/react").Theme;
}) => import("@codecademy/variance").CSSObject;
export declare const popoverToolTipBodyAlignments: (props: import("@codecademy/variance/dist/types/config").VariantProps<"alignment", false | "aligned" | "centered"> & {
    theme?: import("@emotion/react").Theme;
}) => import("@codecademy/variance").CSSObject;
export declare const toolTipWidthRestrictions: (props: import("@codecademy/variance/dist/types/config").VariantProps<"dims", false | "avatarAligned" | "previewAligned" | "horizontalCenter" | "vertCenter" | "aligned"> & {
    theme?: import("@emotion/react").Theme;
}) => import("@codecademy/variance").CSSObject;
export declare const toolTipBodyCss: {
    readonly bg: "background-contrast";
    readonly color: "text";
    readonly border: 1;
    readonly boxShadow: "none";
    readonly borderRadius: "sm";
    readonly display: "inline-block";
    readonly fontSize: 14;
    readonly lineHeight: "base";
};
export {};