import styled, { css } from "styled-components";
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 = css([
    `display:flex;flex-direction:column;`
]);
export const ContentWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__ContentWrapper",
    componentId: "sc-e2bd6375-0"
})([
    `display:flex;align-items:flex-start;gap:var(`,
    `);`
], tokens.contentGap);
export const ContentChildrenWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__ContentChildrenWrapper",
    componentId: "sc-e2bd6375-1"
})([
    `display:flex;flex-direction:column;width:100%;`
]);
export const LabelWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__LabelWrapper",
    componentId: "sc-e2bd6375-2"
})([
    `display:flex;align-items:center;white-space:`,
    `;margin-bottom:`,
    `;&.`,
    `{position:relative;margin-bottom:`,
    `;display:`,
    `;height:`,
    `;}`
], ({ hasLabel })=>hasLabel ? 'nowrap' : 'normal', ({ hasLabel })=>hasLabel ? `var(${tokens.labelWrapperOffset})` : `var(${tokens.labelWrapperTitleCaptionOffset})`, classes.withoutLabel, ({ hasCaption })=>hasCaption ? `var(${tokens.labelWrapperTitleCaptionOffset})` : '0', ({ hasCaption })=>hasCaption ? 'flex' : 'block', ({ hasCaption })=>hasCaption ? 'fit-content' : '0');
export const IndicatorWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__IndicatorWrapper",
    componentId: "sc-e2bd6375-3"
})([
    `position:`,
    `;display:inline-flex;align-items:center;gap:var(`,
    `);`
], ({ hasLabel })=>hasLabel ? 'relative' : 'static', tokens.indicatorWrapperGap);
export const Label = styled.label.withConfig({
    displayName: "InformationWrapper.styles__Label",
    componentId: "sc-e2bd6375-4"
})([
    `display:inline-flex;`
]);
export const HintWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__HintWrapper",
    componentId: "sc-e2bd6375-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, ({ hasCaption })=>hasCaption ? `translateY(var(${tokens.labelWrapperTitleCaptionOffset}))` : `translateY(var(${privateTokens.translateYWithoutTitle}))`);
export const HintTargetWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__HintTargetWrapper",
    componentId: "sc-e2bd6375-6"
})([
    `color:var(`,
    `);display:flex;justify-content:center;align-items:center;`
], tokens.hintIconColor);
export const Hint = styled(Tooltip).withConfig({
    displayName: "InformationWrapper.styles__Hint",
    componentId: "sc-e2bd6375-7"
})([
    ``,
    ` .`,
    `{width:fit-content;display:flex;align-items:center;justify-content:center;}`
], HintTargetWrapper, popoverClasses.root);
export const HintIconWrapper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__HintIconWrapper",
    componentId: "sc-e2bd6375-8"
})([
    `display:flex;`
]);
export const Indicator = styled.div.withConfig({
    displayName: "InformationWrapper.styles__Indicator",
    componentId: "sc-e2bd6375-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, ({ hasCaption })=>hasCaption ? `translateY(var(${tokens.labelWrapperTitleCaptionOffset}))` : 'translateY(0)', classes.requiredAlignLeft, tokens.indicatorWithoutLabelInnerLeft);
export const OptionalText = styled.span.withConfig({
    displayName: "InformationWrapper.styles__OptionalText",
    componentId: "sc-e2bd6375-10"
})([
    `color:var(`,
    `);`
], tokens.optionalColor);
export const TitleCaption = styled.div.withConfig({
    displayName: "InformationWrapper.styles__TitleCaption",
    componentId: "sc-e2bd6375-11"
})([
    `display:inline-block;margin-left:auto;margin-top:`,
    `;`
], ({ hasLabel })=>hasLabel ? `var(${tokens.titleCaptionOffset})` : 'unset');
export const Helpers = styled.div.withConfig({
    displayName: "InformationWrapper.styles__Helpers",
    componentId: "sc-e2bd6375-12"
})([
    `box-sizing:border-box;display:flex;justify-content:space-between;`
]);
export const LeftHelper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__LeftHelper",
    componentId: "sc-e2bd6375-13"
})([
    ``
]);
export const RightHelper = styled.div.withConfig({
    displayName: "InformationWrapper.styles__RightHelper",
    componentId: "sc-e2bd6375-14"
})([
    `margin-left:auto;`
]);
