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";
var mergedConfig = mergeConfig(tooltipConfig);
var Tooltip = component(mergedConfig);
export var InputWrapper = styled.div.withConfig({
    displayName: "TextField.styles__InputWrapper",
    componentId: "sc-57c16343-0"
})([
    "position:relative;display:flex;align-items:center;box-sizing:border-box;&:after{content:'';position:absolute;z-index:-2;inset:0;}"
]);
export var InputLabelWrapper = styled.div.withConfig({
    displayName: "TextField.styles__InputLabelWrapper",
    componentId: "sc-57c16343-1"
})([
    "flex:1;overflow:scroll;position:relative;width:100%;display:inline-flex;align-items:center;::-webkit-scrollbar{display:none;}scrollbar-width:none;overscroll-behavior:contain;&.",
    "{height:var(",
    ");border-radius:var(",
    ");}"
], String(classes.hasChips), tokens.chipHeight, tokens.chipBorderRadius);
export var StyledChips = styled.div.withConfig({
    displayName: "TextField.styles__StyledChips",
    componentId: "sc-57c16343-2"
})([
    "display:flex;gap:var(",
    ");margin-right:var(",
    ",var(",
    "));user-select:none;"
], tokens.chipGap, tokens.chipMarginRight, tokens.chipGap);
export var Input = styled.input.withConfig({
    displayName: "TextField.styles__Input",
    componentId: "sc-57c16343-3"
})([
    "box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;&.",
    "{",
    "}&::placeholder{opacity:0;}"
], classes.inputTextEllipsis, applyEllipsis());
export var InputContainer = styled.div.withConfig({
    displayName: "TextField.styles__InputContainer",
    componentId: "sc-57c16343-4"
})([
    "position:relative;display:flex;flex:1;min-width:",
    ";",
    "{max-width:",
    ";}"
], function(param) {
    var hasDynamicWidth = param.hasDynamicWidth;
    return hasDynamicWidth ? 'auto' : '60%';
}, Input, function(param) {
    var hasDynamicWidth = param.hasDynamicWidth;
    return hasDynamicWidth ? '100%' : 'none';
});
export var InputPlaceholder = styled.div.withConfig({
    displayName: "TextField.styles__InputPlaceholder",
    componentId: "sc-57c16343-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, function(param) {
    var hasPadding = param.hasPadding;
    return hasPadding ? "var(".concat(tokens.contentLabelInnerPadding, ")") : '0';
});
export var InputPlaceholderValue = styled.div.withConfig({
    displayName: "TextField.styles__InputPlaceholderValue",
    componentId: "sc-57c16343-6"
})([
    "&.",
    "{",
    "}"
], classes.inputTextEllipsis, applyEllipsis());
export var OuterLabelWrapper = styled.div.withConfig({
    displayName: "TextField.styles__OuterLabelWrapper",
    componentId: "sc-57c16343-7"
})([
    "display:flex;align-items:center;margin-bottom:",
    ";padding:",
    ";white-space:",
    ";"
], function(param) {
    var isInnerLabel = param.isInnerLabel;
    return isInnerLabel ? "var(".concat(tokens.titleCaptionInnerLabelOffset, ")") : "var(".concat(tokens.labelOffset, ")");
}, function(param) {
    var isInnerLabel = param.isInnerLabel;
    return isInnerLabel ? 0 : "var(".concat(tokens.labelPadding, ", 0)");
}, function(param) {
    var isInnerLabel = param.isInnerLabel;
    return isInnerLabel ? 'nowrap' : 'normal';
});
export var TitleCaption = styled.div.withConfig({
    displayName: "TextField.styles__TitleCaption",
    componentId: "sc-57c16343-8"
})([
    "display:inline-block;margin-left:auto;"
]);
export var StyledIndicatorWrapper = styled.div.withConfig({
    displayName: "TextField.styles__StyledIndicatorWrapper",
    componentId: "sc-57c16343-9"
})([
    "position:relative;display:inline-flex;align-items:center;"
]);
export var Label = styled.label.withConfig({
    displayName: "TextField.styles__Label",
    componentId: "sc-57c16343-10"
})([
    "display:inline-flex;"
]);
export var StyledContentLeft = styled.div.withConfig({
    displayName: "TextField.styles__StyledContentLeft",
    componentId: "sc-57c16343-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 var StyledContentRightWrapper = styled.div.withConfig({
    displayName: "TextField.styles__StyledContentRightWrapper",
    componentId: "sc-57c16343-12"
})([
    "display:flex;align-items:center;"
]);
export var StyledContentRight = styled.div.withConfig({
    displayName: "TextField.styles__StyledContentRight",
    componentId: "sc-57c16343-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 var LeftHelper = styled.div.withConfig({
    displayName: "TextField.styles__LeftHelper",
    componentId: "sc-57c16343-14"
})([
    "color:var(",
    ");&.",
    "{color:var(",
    ",var(",
    "));}"
], tokens.leftHelperColor, classes.hasFocus, tokens.leftHelperColorFocus, tokens.leftHelperColor);
export var StyledTextBefore = styled.div.withConfig({
    displayName: "TextField.styles__StyledTextBefore",
    componentId: "sc-57c16343-15"
})([
    "visibility:",
    ";"
], function(param) {
    var isHidden = param.isHidden;
    return isHidden ? 'hidden' : 'visible';
});
export var StyledTextAfter = styled.div.withConfig({
    displayName: "TextField.styles__StyledTextAfter",
    componentId: "sc-57c16343-16"
})([
    ""
]);
export var StyledOptionalText = styled.span.withConfig({
    displayName: "TextField.styles__StyledOptionalText",
    componentId: "sc-57c16343-17"
})([
    "color:var(",
    ");"
], tokens.optionalColor);
export var StyledHintWrapper = styled.div.withConfig({
    displayName: "TextField.styles__StyledHintWrapper",
    componentId: "sc-57c16343-18"
})([
    "display:inline-block;line-height:0;&.",
    "{position:absolute;margin:0;inset:var(",
    ");}"
], classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
export var HintTargetWrapper = styled.div.withConfig({
    displayName: "TextField.styles__HintTargetWrapper",
    componentId: "sc-57c16343-19"
})([
    "color:var(",
    ");display:flex;justify-content:center;align-items:center;"
], tokens.hintIconColor);
export var Hint = styled(Tooltip).withConfig({
    displayName: "TextField.styles__Hint",
    componentId: "sc-57c16343-20"
})([
    "",
    " .",
    "{width:fit-content;}"
], HintTargetWrapper, popoverClasses.root);
export var HintIconWrapper = styled.div.withConfig({
    displayName: "TextField.styles__HintIconWrapper",
    componentId: "sc-57c16343-21"
})([
    "display:flex;"
]);
export var StyledIndicator = styled.div.withConfig({
    displayName: "TextField.styles__StyledIndicator",
    componentId: "sc-57c16343-22"
})([
    "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);
