import styled from "styled-components";
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 = styled.div.withConfig({
    displayName: "TextField.styles__InputWrapper",
    componentId: "sc-1416c3df-0"
})([
    `position:relative;display:flex;align-items:center;box-sizing:border-box;&:after{content:'';position:absolute;z-index:-2;inset:0;}`
]);
export const InputLabelWrapper = styled.div.withConfig({
    displayName: "TextField.styles__InputLabelWrapper",
    componentId: "sc-1416c3df-1"
})([
    `flex:1;overflow-x:var(`,
    `,scroll);position:relative;width:100%;display:inline-flex;align-items:center;flex-wrap:var(`,
    `,nowrap);::-webkit-scrollbar{display:none;}scrollbar-width:none;&.`,
    `{height:var(`,
    `,var(`,
    `));border-radius:var(`,
    `);}`
], tokens.scrollableWrapperOverflow, tokens.chipsFlexWrap, classes.hasChips, tokens.scrollableWrapperHeight, tokens.chipHeight, tokens.chipBorderRadius);
export const StyledChips = styled.div.withConfig({
    displayName: "TextField.styles__StyledChips",
    componentId: "sc-1416c3df-2"
})([
    `display:flex;flex-wrap:var(`,
    `,nowrap);gap:var(`,
    `);margin-right:var(`,
    `,var(`,
    `));user-select:none;`
], tokens.chipsFlexWrap, tokens.chipGap, tokens.chipMarginRight, tokens.chipGap);
export const Input = styled.input.withConfig({
    displayName: "TextField.styles__Input",
    componentId: "sc-1416c3df-3"
})([
    `box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;field-sizing:var(`,
    `,fixed);z-index:1;&.`,
    `{`,
    `}&::placeholder{opacity:0;}`
], tokens.fieldSizing, classes.inputTextEllipsis, applyEllipsis());
export const InputContainer = styled.div.withConfig({
    displayName: "TextField.styles__InputContainer",
    componentId: "sc-1416c3df-4"
})([
    `position:relative;display:flex;flex:1;min-width:`,
    `;`,
    `{max-width:`,
    `;}`
], ({ hasDynamicWidth })=>hasDynamicWidth ? 'auto' : '60%', Input, ({ hasDynamicWidth })=>hasDynamicWidth ? '100%' : 'none');
export const InputPlaceholder = styled.div.withConfig({
    displayName: "TextField.styles__InputPlaceholder",
    componentId: "sc-1416c3df-5"
})([
    `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(`,
    `);padding:`,
    `;`
], tokens.placeholderColor, ({ hasPadding })=>hasPadding ? `var(${tokens.contentLabelInnerPadding})` : '0');
export const InputPlaceholderValue = styled.div.withConfig({
    displayName: "TextField.styles__InputPlaceholderValue",
    componentId: "sc-1416c3df-6"
})([
    `&.`,
    `{`,
    `}`
], classes.inputTextEllipsis, applyEllipsis());
export const OuterLabelWrapper = styled.div.withConfig({
    displayName: "TextField.styles__OuterLabelWrapper",
    componentId: "sc-1416c3df-7"
})([
    `display:flex;align-items:center;margin-bottom:`,
    `;padding:`,
    `;white-space:`,
    `;`
], ({ isInnerLabel })=>isInnerLabel ? `var(${tokens.titleCaptionInnerLabelOffset})` : `var(${tokens.labelOffset})`, ({ isInnerLabel })=>isInnerLabel ? 0 : `var(${tokens.labelPadding}, 0)`, ({ isInnerLabel })=>isInnerLabel ? 'nowrap' : 'normal');
export const TitleCaption = styled.div.withConfig({
    displayName: "TextField.styles__TitleCaption",
    componentId: "sc-1416c3df-8"
})([
    `display:inline-block;margin-left:auto;`
]);
export const StyledIndicatorWrapper = styled.div.withConfig({
    displayName: "TextField.styles__StyledIndicatorWrapper",
    componentId: "sc-1416c3df-9"
})([
    `position:relative;display:inline-flex;align-items:center;`
]);
export const Label = styled.label.withConfig({
    displayName: "TextField.styles__Label",
    componentId: "sc-1416c3df-10"
})([
    `display:inline-flex;`
]);
export const StyledContentLeft = styled.div.withConfig({
    displayName: "TextField.styles__StyledContentLeft",
    componentId: "sc-1416c3df-11"
})([
    `margin:var(`,
    `);color:var(`,
    `);line-height:0;&:hover{color:var(`,
    `,var(`,
    `));}&:active{color:var(`,
    `,var(`,
    `));}`
], tokens.leftContentMargin, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColor, tokens.contentSlotColorActive, tokens.contentSlotColor);
export const StyledContentRightWrapper = styled.div.withConfig({
    displayName: "TextField.styles__StyledContentRightWrapper",
    componentId: "sc-1416c3df-12"
})([
    `display:flex;align-items:center;`
]);
export const StyledContentRight = styled.div.withConfig({
    displayName: "TextField.styles__StyledContentRight",
    componentId: "sc-1416c3df-13"
})([
    `line-height:0;margin:var(`,
    `);color:var(`,
    `,var(`,
    `));&:hover{color:var(`,
    `,var(`,
    `));cursor:pointer;}&:active{color:var(`,
    `,var(`,
    `));}`
], tokens.rightContentMargin, tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);
export const StyledHelpers = styled.div.withConfig({
    displayName: "TextField.styles__StyledHelpers",
    componentId: "sc-1416c3df-14"
})([
    `box-sizing:border-box;display:flex;justify-content:space-between;`
]);
export const StyledLeftHelper = styled.div.withConfig({
    displayName: "TextField.styles__StyledLeftHelper",
    componentId: "sc-1416c3df-15"
})([
    ``
]);
export const StyledRightHelper = styled.div.withConfig({
    displayName: "TextField.styles__StyledRightHelper",
    componentId: "sc-1416c3df-16"
})([
    `margin-left:auto;`
]);
export const StyledTextBefore = styled.div.withConfig({
    displayName: "TextField.styles__StyledTextBefore",
    componentId: "sc-1416c3df-17"
})([
    `visibility:`,
    `;`
], ({ isHidden })=>isHidden ? 'hidden' : 'visible');
export const StyledTextAfter = styled.div.withConfig({
    displayName: "TextField.styles__StyledTextAfter",
    componentId: "sc-1416c3df-18"
})([
    ``
]);
export const StyledOptionalText = styled.span.withConfig({
    displayName: "TextField.styles__StyledOptionalText",
    componentId: "sc-1416c3df-19"
})([
    `color:var(`,
    `);`
], tokens.optionalColor);
export const StyledHintWrapper = styled.div.withConfig({
    displayName: "TextField.styles__StyledHintWrapper",
    componentId: "sc-1416c3df-20"
})([
    `display:inline-block;line-height:0;&.`,
    `{position:absolute;margin:0;inset:var(`,
    `);}`
], classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
export const HintTargetWrapper = styled.div.withConfig({
    displayName: "TextField.styles__HintTargetWrapper",
    componentId: "sc-1416c3df-21"
})([
    `color:var(`,
    `);display:flex;justify-content:center;align-items:center;`
], tokens.hintIconColor);
export const Hint = styled(Tooltip).withConfig({
    displayName: "TextField.styles__Hint",
    componentId: "sc-1416c3df-22"
})([
    ``,
    ` .`,
    `{width:fit-content;}`
], HintTargetWrapper, popoverClasses.root);
export const HintIconWrapper = styled.div.withConfig({
    displayName: "TextField.styles__HintIconWrapper",
    componentId: "sc-1416c3df-23"
})([
    `display:flex;`
]);
export const StyledIndicator = styled.div.withConfig({
    displayName: "TextField.styles__StyledIndicator",
    componentId: "sc-1416c3df-24"
})([
    `position:absolute;border-radius:50%;background-color:var(`,
    `);&.`,
    `{width:var(`,
    `);height:var(`,
    `);inset:var(`,
    `);&.`,
    `{inset:var(`,
    `);&.`,
    `{right:calc( -1 * var(`,
    `) + var(`,
    `,0px) );}}}&.`,
    `{width:var(`,
    `);height:var(`,
    `);inset:var(`,
    `);&.`,
    `{inset:var(`,
    `);}}`
], tokens.indicatorColor, classes.outerLabelPlacement, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, classes.requiredAlignRight, tokens.indicatorLabelPlacementOuterRight, classes.hasHint, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementHintOuterRight, classes.innerLabelPlacement, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, classes.requiredAlignRight, tokens.indicatorLabelPlacementInnerRight);
