import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { component, mergeConfig } from "../../engines";
import { tooltipConfig } from "../Tooltip";
import { popoverClasses } from "../Popover";
import { classes, privateTokens, tokens } from "./InformationWrapper.tokens";
const mergedConfig = mergeConfig(tooltipConfig);
const Tooltip = component(mergedConfig);
export const base = /*#__PURE__*/ css("display:flex;flex-direction:column;", "base");
export const ContentWrapper = /*#__PURE__*/ styled("div", {
    target: "eerit8t0",
    label: "ContentWrapper"
})("display:flex;align-items:flex-start;gap:var(", tokens.contentGap, ");");
export const ContentChildrenWrapper = /*#__PURE__*/ styled("div", {
    target: "eerit8t1",
    label: "ContentChildrenWrapper"
})("display:flex;flex-direction:column;width:100%;");
export const LabelWrapper = /*#__PURE__*/ styled("div", {
    target: "eerit8t2",
    label: "LabelWrapper"
})("display:flex;align-items:center;white-space:", ({ hasLabel })=>hasLabel ? 'nowrap' : 'normal', ";margin-bottom:", ({ hasLabel })=>hasLabel ? `var(${tokens.labelWrapperOffset})` : `var(${tokens.labelWrapperTitleCaptionOffset})`, ";&.", classes.withoutLabel, "{position:relative;margin-bottom:", ({ hasCaption })=>hasCaption ? `var(${tokens.labelWrapperTitleCaptionOffset})` : '0', ";display:", ({ hasCaption })=>hasCaption ? 'flex' : 'block', ";height:", ({ hasCaption })=>hasCaption ? 'fit-content' : '0', ";}");
export const IndicatorWrapper = /*#__PURE__*/ styled("div", {
    target: "eerit8t3",
    label: "IndicatorWrapper"
})("position:", ({ hasLabel })=>hasLabel ? 'relative' : 'static', ";display:inline-flex;align-items:center;gap:var(", tokens.indicatorWrapperGap, ");");
export const Label = /*#__PURE__*/ styled("label", {
    target: "eerit8t4",
    label: "Label"
})("display:inline-flex;");
export const HintWrapper = /*#__PURE__*/ styled("div", {
    target: "eerit8t5",
    label: "HintWrapper"
})("display:flex;justify-content:center;align-items:center;line-height:0;&.", classes.withoutLabel, "{position:absolute;margin:0;z-index:2;inset:var(", tokens.hintWithoutLabelPlacementOffset, ");", privateTokens.translateYWithoutTitle, ":calc(-1 * var(", tokens.titleCaptionLineHeight, "));transform:", ({ hasCaption })=>hasCaption ? `translateY(var(${tokens.labelWrapperTitleCaptionOffset}))` : `translateY(var(${privateTokens.translateYWithoutTitle}))`, ";}");
export const HintTargetWrapper = /*#__PURE__*/ styled("div", {
    target: "eerit8t6",
    label: "HintTargetWrapper"
})("color:var(", tokens.hintIconColor, ");display:flex;justify-content:center;align-items:center;");
export const Hint = /*#__PURE__*/ styled(Tooltip, {
    target: "eerit8t7",
    label: "Hint"
})(HintTargetWrapper, " .", popoverClasses.root, "{width:fit-content;display:flex;align-items:center;justify-content:center;}");
export const HintIconWrapper = /*#__PURE__*/ styled("div", {
    target: "eerit8t8",
    label: "HintIconWrapper"
})("display:flex;");
export const Indicator = /*#__PURE__*/ styled("div", {
    target: "eerit8t9",
    label: "Indicator"
})("border-radius:50%;align-self:flex-start;background-color:var(", tokens.indicatorColor, ");width:var(", tokens.indicatorSizeOuter, ");height:var(", tokens.indicatorSizeOuter, ");margin-top:var(", tokens.indicatorMarginTop, ");z-index:2;&.", classes.requiredAlignLeft, "{position:absolute;top:50%;transform:translateY(-50%);left:var(", tokens.indicatorOuterLeft, ");margin-top:unset;align-self:unset;}&.", classes.withoutLabel, "{position:absolute;margin-top:unset;align-self:unset;width:var(", tokens.indicatorSizeInner, ");height:var(", tokens.indicatorSizeInner, ");inset:var(", tokens.indicatorWithoutLabelInner, ");transform:", ({ hasCaption })=>hasCaption ? `translateY(var(${tokens.labelWrapperTitleCaptionOffset}))` : 'translateY(0)', ";&.", classes.requiredAlignLeft, "{inset:var(", tokens.indicatorWithoutLabelInnerLeft, ");}}");
export const OptionalText = /*#__PURE__*/ styled("span", {
    target: "eerit8t10",
    label: "OptionalText"
})("color:var(", tokens.optionalColor, ");");
export const TitleCaption = /*#__PURE__*/ styled("div", {
    target: "eerit8t11",
    label: "TitleCaption"
})("display:inline-block;margin-left:auto;margin-top:", ({ hasLabel })=>hasLabel ? `var(${tokens.titleCaptionOffset})` : 'unset', ";");
export const Helpers = /*#__PURE__*/ styled("div", {
    target: "eerit8t12",
    label: "Helpers"
})("box-sizing:border-box;display:flex;justify-content:space-between;");
export const LeftHelper = /*#__PURE__*/ styled("div", {
    target: "eerit8t13",
    label: "LeftHelper"
})();
export const RightHelper = /*#__PURE__*/ styled("div", {
    target: "eerit8t14",
    label: "RightHelper"
})("margin-left:auto;");
