import styled from "styled-components";
import { css } from "styled-components";
import { component, mergeConfig } from "../../engines";
import { tooltipConfig } from "../Tooltip";
import { popoverClasses } from "../Popover";
import { classes, privateTokens, tokens } from "./InformationWrapper.tokens";
var mergedConfig = mergeConfig(tooltipConfig);
var Tooltip = component(mergedConfig);
export var base = css([
    "display:flex;flex-direction:column;"
]);
export var ContentWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__ContentWrapper",
    componentId: "sc-7c3fe949-0"
})([
    "display:flex;align-items:flex-start;gap:var(",
    ");"
], tokens.contentGap);
export var ContentChildrenWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__ContentChildrenWrapper",
    componentId: "sc-7c3fe949-1"
})([
    "display:flex;flex-direction:column;width:100%;"
]);
export var LabelWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__LabelWrapper",
    componentId: "sc-7c3fe949-2"
})([
    "display:flex;align-items:center;white-space:",
    ";margin-bottom:",
    ";&.",
    "{position:relative;margin-bottom:",
    ";display:",
    ";height:",
    ";}"
], function(param) {
    var hasLabel = param.hasLabel;
    return hasLabel ? 'nowrap' : 'normal';
}, function(param) {
    var hasLabel = param.hasLabel;
    return hasLabel ? "var(".concat(tokens.labelWrapperOffset, ")") : "var(".concat(tokens.labelWrapperTitleCaptionOffset, ")");
}, classes.withoutLabel, function(param) {
    var hasCaption = param.hasCaption;
    return hasCaption ? "var(".concat(tokens.labelWrapperTitleCaptionOffset, ")") : '0';
}, function(param) {
    var hasCaption = param.hasCaption;
    return hasCaption ? 'flex' : 'block';
}, function(param) {
    var hasCaption = param.hasCaption;
    return hasCaption ? 'fit-content' : '0';
});
export var IndicatorWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__IndicatorWrapper",
    componentId: "sc-7c3fe949-3"
})([
    "position:",
    ";display:inline-flex;align-items:center;gap:var(",
    ");"
], function(param) {
    var hasLabel = param.hasLabel;
    return hasLabel ? 'relative' : 'static';
}, tokens.indicatorWrapperGap);
export var Label = styled.label.withConfig({
    displayName: "InformationWrapper.styles__Label",
    componentId: "sc-7c3fe949-4"
})([
    "display:inline-flex;"
]);
export var HintWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__HintWrapper",
    componentId: "sc-7c3fe949-5"
})([
    "display:flex;justify-content:center;align-items:center;line-height:0;&.",
    "{position:absolute;margin:0;z-index:2;inset:var(",
    ");",
    ":calc(-1 * var(",
    "));transform:",
    ";}"
], classes.withoutLabel, tokens.hintWithoutLabelPlacementOffset, privateTokens.translateYWithoutTitle, tokens.titleCaptionLineHeight, function(param) {
    var hasCaption = param.hasCaption;
    return hasCaption ? "translateY(var(".concat(tokens.labelWrapperTitleCaptionOffset, "))") : "translateY(var(".concat(privateTokens.translateYWithoutTitle, "))");
});
export var HintTargetWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__HintTargetWrapper",
    componentId: "sc-7c3fe949-6"
})([
    "color:var(",
    ");display:flex;justify-content:center;align-items:center;"
], tokens.hintIconColor);
export var Hint = styled(Tooltip).withConfig({
    displayName: "InformationWrapper.styles__Hint",
    componentId: "sc-7c3fe949-7"
})([
    "",
    " .",
    "{width:fit-content;display:flex;align-items:center;justify-content:center;}"
], HintTargetWrapper, popoverClasses.root);
export var HintIconWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__HintIconWrapper",
    componentId: "sc-7c3fe949-8"
})([
    "display:flex;"
]);
export var Indicator = styled.div.withConfig({
    displayName: "InformationWrapper.styles__Indicator",
    componentId: "sc-7c3fe949-9"
})([
    "border-radius:50%;align-self:flex-start;background-color:var(",
    ");width:var(",
    ");height:var(",
    ");margin-top:var(",
    ");z-index:2;&.",
    "{position:absolute;top:50%;transform:translateY(-50%);left:var(",
    ");margin-top:unset;align-self:unset;}&.",
    "{position:absolute;margin-top:unset;align-self:unset;width:var(",
    ");height:var(",
    ");inset:var(",
    ");transform:",
    ";&.",
    "{inset:var(",
    ");}}"
], tokens.indicatorColor, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorMarginTop, classes.requiredAlignLeft, tokens.indicatorOuterLeft, classes.withoutLabel, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorWithoutLabelInner, function(param) {
    var hasCaption = param.hasCaption;
    return hasCaption ? "translateY(var(".concat(tokens.labelWrapperTitleCaptionOffset, "))") : 'translateY(0)';
}, classes.requiredAlignLeft, tokens.indicatorWithoutLabelInnerLeft);
export var OptionalText = styled.span.withConfig({
    displayName: "InformationWrapper.styles__OptionalText",
    componentId: "sc-7c3fe949-10"
})([
    "color:var(",
    ");"
], tokens.optionalColor);
export var TitleCaption = styled.div.withConfig({
    displayName: "InformationWrapper.styles__TitleCaption",
    componentId: "sc-7c3fe949-11"
})([
    "display:inline-block;margin-left:auto;margin-top:",
    ";"
], function(param) {
    var hasLabel = param.hasLabel;
    return hasLabel ? "var(".concat(tokens.titleCaptionOffset, ")") : 'unset';
});
export var Helpers = styled.div.withConfig({
    displayName: "InformationWrapper.styles__Helpers",
    componentId: "sc-7c3fe949-12"
})([
    "box-sizing:border-box;display:flex;justify-content:space-between;"
]);
export var LeftHelper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__LeftHelper",
    componentId: "sc-7c3fe949-13"
})([
    ""
]);
export var RightHelper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__RightHelper",
    componentId: "sc-7c3fe949-14"
})([
    ""
]);
