import styled from "@emotion/styled";
import { applyEllipsis } from "../../mixins";
import { component, mergeConfig } from "../../engines";
import { tooltipConfig } from "../Tooltip";
import { popoverClasses } from "../Popover";
import { classes, tokens } from "./TextField.tokens";
const mergedConfig = mergeConfig(tooltipConfig);
const Tooltip = component(mergedConfig);
export const InputWrapper = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz0",
    label: "InputWrapper"
})("position:relative;display:flex;align-items:center;box-sizing:border-box;&:after{content:'';position:absolute;z-index:-2;inset:0;}");
export const InputLabelWrapper = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz1",
    label: "InputLabelWrapper"
})("flex:1;overflow-x:var(", tokens.scrollableWrapperOverflow, ",scroll);position:relative;width:100%;display:inline-flex;align-items:center;flex-wrap:var(", tokens.chipsFlexWrap, ",nowrap);::-webkit-scrollbar{display:none;}scrollbar-width:none;&.", classes.hasChips, "{height:var(", tokens.scrollableWrapperHeight, ",var(", tokens.chipHeight, "));border-radius:var(", tokens.chipBorderRadius, ");}");
export const StyledChips = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz2",
    label: "StyledChips"
})("display:flex;flex-wrap:var(", tokens.chipsFlexWrap, ",nowrap);gap:var(", tokens.chipGap, ");margin-right:var(", tokens.chipMarginRight, ",var(", tokens.chipGap, "));user-select:none;");
export const Input = /*#__PURE__*/ styled("input", {
    target: "eq8x4yz3",
    label: "Input"
})("box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;field-sizing:var(", tokens.fieldSizing, ",fixed);z-index:1;&.", classes.inputTextEllipsis, "{", applyEllipsis(), "}&::placeholder{opacity:0;}");
export const InputContainer = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz4",
    label: "InputContainer"
})("position:relative;display:flex;flex:1;min-width:", ({ hasDynamicWidth })=>hasDynamicWidth ? 'auto' : '60%', ";", Input, "{max-width:", ({ hasDynamicWidth })=>hasDynamicWidth ? '100%' : 'none', ";}");
export const InputPlaceholder = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz5",
    label: "InputPlaceholder"
})("display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(", tokens.placeholderColor, ");padding:", ({ hasPadding })=>hasPadding ? `var(${tokens.contentLabelInnerPadding})` : '0', ";");
export const InputPlaceholderValue = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz6",
    label: "InputPlaceholderValue"
})("&.", classes.inputTextEllipsis, "{", applyEllipsis(), "}");
export const OuterLabelWrapper = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz7",
    label: "OuterLabelWrapper"
})("display:flex;align-items:center;margin-bottom:", ({ isInnerLabel })=>isInnerLabel ? `var(${tokens.titleCaptionInnerLabelOffset})` : `var(${tokens.labelOffset})`, ";padding:", ({ isInnerLabel })=>isInnerLabel ? 0 : `var(${tokens.labelPadding}, 0)`, ";white-space:", ({ isInnerLabel })=>isInnerLabel ? 'nowrap' : 'normal', ";");
export const TitleCaption = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz8",
    label: "TitleCaption"
})("display:inline-block;margin-left:auto;");
export const StyledIndicatorWrapper = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz9",
    label: "StyledIndicatorWrapper"
})("position:relative;display:inline-flex;align-items:center;");
export const Label = /*#__PURE__*/ styled("label", {
    target: "eq8x4yz10",
    label: "Label"
})("display:inline-flex;");
export const StyledContentLeft = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz11",
    label: "StyledContentLeft"
})("margin:var(", tokens.leftContentMargin, ");color:var(", tokens.contentSlotColor, ");line-height:0;&:hover{color:var(", tokens.contentSlotColorHover, ",var(", tokens.contentSlotColor, "));}&:active{color:var(", tokens.contentSlotColorActive, ",var(", tokens.contentSlotColor, "));}");
export const StyledContentRightWrapper = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz12",
    label: "StyledContentRightWrapper"
})("display:flex;align-items:center;");
export const StyledContentRight = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz13",
    label: "StyledContentRight"
})("line-height:0;margin:var(", tokens.rightContentMargin, ");color:var(", tokens.contentSlotRightColor, ",var(", tokens.contentSlotColor, "));&:hover{color:var(", tokens.contentSlotRightColorHover, ",var(", tokens.contentSlotColorHover, "));cursor:pointer;}&:active{color:var(", tokens.contentSlotRightColorActive, ",var(", tokens.contentSlotColorActive, "));}");
export const StyledHelpers = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz14",
    label: "StyledHelpers"
})("box-sizing:border-box;display:flex;justify-content:space-between;");
export const StyledLeftHelper = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz15",
    label: "StyledLeftHelper"
})();
export const StyledRightHelper = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz16",
    label: "StyledRightHelper"
})("margin-left:auto;");
export const StyledTextBefore = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz17",
    label: "StyledTextBefore"
})("visibility:", ({ isHidden })=>isHidden ? 'hidden' : 'visible', ";");
export const StyledTextAfter = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz18",
    label: "StyledTextAfter"
})();
export const StyledOptionalText = /*#__PURE__*/ styled("span", {
    target: "eq8x4yz19",
    label: "StyledOptionalText"
})("color:var(", tokens.optionalColor, ");");
export const StyledHintWrapper = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz20",
    label: "StyledHintWrapper"
})("display:inline-block;line-height:0;&.", classes.innerLabelPlacement, "{position:absolute;margin:0;inset:var(", tokens.hintInnerLabelPlacementOffset, ");}");
export const HintTargetWrapper = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz21",
    label: "HintTargetWrapper"
})("color:var(", tokens.hintIconColor, ");display:flex;justify-content:center;align-items:center;");
export const Hint = /*#__PURE__*/ styled(Tooltip, {
    target: "eq8x4yz22",
    label: "Hint"
})(HintTargetWrapper, " .", popoverClasses.root, "{width:fit-content;}");
export const HintIconWrapper = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz23",
    label: "HintIconWrapper"
})("display:flex;");
export const StyledIndicator = /*#__PURE__*/ styled("div", {
    target: "eq8x4yz24",
    label: "StyledIndicator"
})("position:absolute;border-radius:50%;background-color:var(", tokens.indicatorColor, ");&.", classes.outerLabelPlacement, "{width:var(", tokens.indicatorSizeOuter, ");height:var(", tokens.indicatorSizeOuter, ");inset:var(", tokens.indicatorLabelPlacementOuter, ");&.", classes.requiredAlignRight, "{inset:var(", tokens.indicatorLabelPlacementOuterRight, ");&.", classes.hasHint, "{right:calc(\n                    -1 * var(", tokens.indicatorSizeOuter, ") + var(", tokens.indicatorLabelPlacementHintOuterRight, ",0px)\n                );}}}&.", classes.innerLabelPlacement, "{width:var(", tokens.indicatorSizeInner, ");height:var(", tokens.indicatorSizeInner, ");inset:var(", tokens.indicatorLabelPlacementInner, ");&.", classes.requiredAlignRight, "{inset:var(", tokens.indicatorLabelPlacementInnerRight, ");}}");
