import styled from "styled-components";
import { tooltipConfig } from "../Tooltip";
import { component, mergeConfig } from "../../engines";
import { classes, tokens, privateTokens } from "./TextArea.tokens";
const mergedConfig = mergeConfig(tooltipConfig);
const Tooltip = component(mergedConfig);
export const Hint = styled(Tooltip).withConfig({
    displayName: "TextArea.styles__Hint",
    componentId: "sc-41c960b5-0"
})([
    ``
]);
export const OuterLabelWrapper = styled.div.withConfig({
    displayName: "TextArea.styles__OuterLabelWrapper",
    componentId: "sc-41c960b5-1"
})([
    `display:flex;align-items:center;margin-bottom:`,
    `;`
], ({ isInnerLabel })=>isInnerLabel ? `var(${tokens.titleCaptionInnerLabelOffset})` : `var(${tokens.labelMarginBottom})`);
export const StyledLabel = styled.div.withConfig({
    displayName: "TextArea.styles__StyledLabel",
    componentId: "sc-41c960b5-2"
})([
    `position:relative;display:inline-flex;color:var(`,
    `,var(`,
    `));font-family:var(`,
    `,var(`,
    `));font-size:var(`,
    `,var(`,
    `));font-style:var(`,
    `,var(`,
    `));font-weight:var(`,
    `,var(`,
    `));letter-spacing:var(`,
    `,var(`,
    `));line-height:var(`,
    `,var(`,
    `));`
], tokens.labelOuterColor, tokens.inputColor, tokens.labelOuterFontFamily, tokens.inputFontFamily, tokens.labelOuterFontSize, tokens.inputFontSize, tokens.labelOuterFontStyle, tokens.inputFontStyle, tokens.labelOuterFontWeight, tokens.inputFontWeight, tokens.labelOuterLetterSpacing, tokens.inputLetterSpacing, tokens.labelOuterLineHeight, tokens.inputLineHeight);
export const TitleCaption = styled.div.withConfig({
    displayName: "TextArea.styles__TitleCaption",
    componentId: "sc-41c960b5-3"
})([
    `display:inline-block;margin-left:auto;font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight);
export const StyledIndicatorWrapper = styled.div.withConfig({
    displayName: "TextArea.styles__StyledIndicatorWrapper",
    componentId: "sc-41c960b5-4"
})([
    `position:relative;display:inline-flex;align-items:center;`
]);
export const StyledOptionalText = styled.span.withConfig({
    displayName: "TextArea.styles__StyledOptionalText",
    componentId: "sc-41c960b5-5"
})([
    `color:var(`,
    `);font-family:`,
    `;font-size:`,
    `;font-style:`,
    `;font-weight:`,
    `;letter-spacing:`,
    `;line-height:`,
    `;`
], tokens.optionalColor, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontFamily}, var(${tokens.inputFontFamily}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontSize}, var(${tokens.inputFontSize}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontStyle}, var(${tokens.inputFontStyle}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontWeight}, var(${tokens.inputFontWeight}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterLetterSpacing}, var(${tokens.inputLetterSpacing}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterLineHeight}, var(${tokens.inputLineHeight}))`);
export const StyledHintWrapper = styled.div.withConfig({
    displayName: "TextArea.styles__StyledHintWrapper",
    componentId: "sc-41c960b5-6"
})([
    `display:inline-flex;line-height:0;margin:var(`,
    `);&.`,
    `{position:absolute;margin:0;inset:var(`,
    `);}`
], tokens.hintMargin, classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
export const HintTargetWrapper = styled.div.withConfig({
    displayName: "TextArea.styles__HintTargetWrapper",
    componentId: "sc-41c960b5-7"
})([
    `color:var(`,
    `);width:var(`,
    `);height:var(`,
    `);display:flex;justify-content:center;align-items:center;`
], tokens.hintIconColor, tokens.hintTargetSize, tokens.hintTargetSize);
export const HintIconWrapper = styled.div.withConfig({
    displayName: "TextArea.styles__HintIconWrapper",
    componentId: "sc-41c960b5-8"
})([
    ``
]);
export const StyledTextAreaWrapper = styled.div.withConfig({
    displayName: "TextArea.styles__StyledTextAreaWrapper",
    componentId: "sc-41c960b5-9"
})([
    `display:flex;flex-direction:column;background-color:var(`,
    `);flex:`,
    `;min-height:0;`,
    `:`,
    `;padding-top:`,
    `;padding-bottom:`,
    `;border-radius:`,
    `;&:after{content:'';position:absolute;z-index:-2;inset:0;}`
], tokens.inputBackgroundColor, ({ hasExplicitHeight })=>hasExplicitHeight ? '1' : 'unset', privateTokens.wrapperPaddingBottomInnerLabel, ({ hasHelper, isClear })=>hasHelper && !isClear ? '0rem' : `var(${tokens.inputPaddingBottomInnerLabel}, var(${tokens.inputPaddingBottom}))`, ({ hasHeader })=>hasHeader ? 'unset' : `var(${tokens.inputPaddingTop})`, ({ hasHelper, isClear })=>hasHelper && !isClear ? `var(${tokens.inputPaddingBottomWithHelpers})` : `var(${tokens.inputPaddingBottom})`, ({ hasHelper, isClear })=>hasHelper && !isClear ? `var(${tokens.borderRadiusWithHelpers})` : `var(${tokens.borderRadius})`);
export const StyledContentWrapper = styled.div.withConfig({
    displayName: "TextArea.styles__StyledContentWrapper",
    componentId: "sc-41c960b5-10"
})([
    `position:relative;width:100%;height:0;padding-top:`,
    `;`
], ({ hasHeader })=>hasHeader ? `var(${tokens.inputPaddingTop})` : 'unset');
export const StyledContent = styled.div.withConfig({
    displayName: "TextArea.styles__StyledContent",
    componentId: "sc-41c960b5-11"
})([
    `position:absolute;display:flex;align-items:center;justify-content:center;z-index:1;color:var(`,
    `);top:`,
    `;right:var(`,
    `);height:var(`,
    `);width:var(`,
    `,auto);&:hover{color:var(`,
    `);}&:active{color:var(`,
    `);}`
], tokens.rightContentColor, ({ hasHeader })=>hasHeader ? `var(${tokens.inputPaddingTop})` : `var(${tokens.rightContentTop})`, tokens.rightContentRight, tokens.rightContentHeight, tokens.rightContentWidth, tokens.rightContentColorHover, tokens.rightContentColorActive);
export const StyledHeaderSlot = styled.div.withConfig({
    displayName: "TextArea.styles__StyledHeaderSlot",
    componentId: "sc-41c960b5-12"
})([
    `display:flex;flex-direction:column;`
]);
export const DividerWrapper = styled.div.withConfig({
    displayName: "TextArea.styles__DividerWrapper",
    componentId: "sc-41c960b5-13"
})([
    `background:var(`,
    `);`
], tokens.backgroundColor);
export const Divider = styled.div.withConfig({
    displayName: "TextArea.styles__Divider",
    componentId: "sc-41c960b5-14"
})([
    `height:0.0625rem;background:var(`,
    `);`
], tokens.dividerColor);
export const StyledContainer = styled.div.withConfig({
    displayName: "TextArea.styles__StyledContainer",
    componentId: "sc-41c960b5-15"
})([
    `display:flex;flex-direction:column;flex:`,
    `;min-height:0;width:100%;position:relative;`
], ({ hasExplicitHeight })=>hasExplicitHeight ? '1' : 'unset');
export const StyledTextArea = styled.textarea.withConfig({
    displayName: "TextArea.styles__StyledTextArea",
    componentId: "sc-41c960b5-16"
})([
    `display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(`,
    `);caret-color:var(`,
    `);resize:`,
    `;width:`,
    `;`,
    `:`,
    `;height:`,
    `;min-height:var(`,
    `);padding-right:`,
    `;padding-left:var(`,
    `,0);padding-top:0;padding-bottom:0;font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);&::placeholder{opacity:0;}&:read-only{cursor:default;}&:focus:not(:disabled){color:var(`,
    `);}&::-webkit-scrollbar{width:var(`,
    `);}&::-webkit-scrollbar-thumb{background-color:var(`,
    `);background-clip:content-box;border:var(`,
    `) solid transparent;border-radius:var(`,
    `,1rem);}&::-webkit-scrollbar-track{background-color:var(`,
    `);background-clip:content-box;border:var(`,
    `) solid transparent;border-radius:var(`,
    `,1rem);}`
], tokens.inputColor, tokens.inputCaretColor, ({ resize })=>resize || 'none', ({ cols })=>cols ? 'unset' : '100%', privateTokens.inputActualHeight, ({ hasExplicitHeight })=>hasExplicitHeight ? '100%' : `calc(var(${tokens.inputHeight}) - var(${tokens.inputPaddingBottom}))`, ({ hasExplicitHeight, rows })=>rows || hasExplicitHeight ? 'unset' : `var(${privateTokens.inputActualHeight})`, tokens.inputMinHeight, ({ hasContentRight })=>hasContentRight ? `var(${tokens.inputPaddingRightWithRightContent}, 0)` : `var(${tokens.inputPaddingRight}, 0)`, tokens.inputPaddingLeft, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus, tokens.scrollbarWidth, tokens.scrollbarThumbBackgroundColor, tokens.scrollbarBorderWidth, tokens.scrollbarBorderRadius, tokens.scrollbarTrackBackgroundColor, tokens.scrollbarBorderWidth, tokens.scrollbarBorderRadius);
export const StyledHiddenTextArea = styled.textarea.withConfig({
    displayName: "TextArea.styles__StyledHiddenTextArea",
    componentId: "sc-41c960b5-17"
})([
    ``,
    `:calc(var(`,
    `,0.0625rem) + var(`,
    `,0rem));width:`,
    `;max-height:none !important;min-height:var(`,
    `) !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:`,
    `;border-width:0;padding-right:`,
    `;padding-left:var(`,
    `,0);padding-top:0;padding-bottom:0;box-sizing:border-box;text-indent:0;text-rendering:auto;text-transform:none;tab-size:8;font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], privateTokens.scrollbarCompensationPadding, tokens.borderSize, tokens.scrollbarMarginRight, ({ cols })=>cols ? 'unset' : '100%', tokens.inputMinHeight, ({ cols })=>cols ? 'unset' : '0.0625rem !important', ({ hasContentRight })=>hasContentRight ? `calc(var(${privateTokens.scrollbarCompensationPadding}, 0) + var(${tokens.inputPaddingRightWithRightContent}, 0))` : `calc(var(${privateTokens.scrollbarCompensationPadding}, 0) + var(${tokens.inputPaddingRight}, 0))`, tokens.inputPaddingLeft, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
export const StyledHelpers = styled.div.withConfig({
    displayName: "TextArea.styles__StyledHelpers",
    componentId: "sc-41c960b5-18"
})([
    `box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(`,
    `);padding-top:var(`,
    `);padding-right:var(`,
    `);padding-bottom:var(`,
    `);padding-left:var(`,
    `);border-bottom-left-radius:var(`,
    `);border-bottom-right-radius:var(`,
    `);`
], tokens.helpersBackgroundColor, tokens.helpersPaddingTop, tokens.helpersPaddingRight, tokens.helpersPaddingBottom, tokens.helpersPaddingLeft, tokens.borderRadius, tokens.borderRadius);
export const StyledOutsideHelpersWrapper = styled.div.withConfig({
    displayName: "TextArea.styles__StyledOutsideHelpersWrapper",
    componentId: "sc-41c960b5-19"
})([
    `box-sizing:border-box;display:flex;justify-content:space-between;padding-top:var(`,
    `);padding-right:var(`,
    `);padding-bottom:var(`,
    `);padding-left:var(`,
    `);`
], tokens.outsideHelpersPaddingTop, tokens.outsideHelpersPaddingRight, tokens.outsideHelpersPaddingBottom, tokens.outsideHelpersPaddingLeft);
export const StyledLeftHelper = styled.span.withConfig({
    displayName: "TextArea.styles__StyledLeftHelper",
    componentId: "sc-41c960b5-20"
})([
    `overflow:var(`,
    `,hidden);text-overflow:var(`,
    `,ellipsis);white-space:var(`,
    `,nowrap);display:block;font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);color:var(`,
    `);&.`,
    `{color:var(`,
    `,var(`,
    `));}`
], tokens.leftHelperOverflow, tokens.leftHelperTextOverflow, tokens.leftHelperWhiteSpace, tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor, classes.leftHelperFocus, tokens.leftHelperColorFocus, tokens.leftHelperColor);
export const StyledRightHelper = styled(StyledLeftHelper).withConfig({
    displayName: "TextArea.styles__StyledRightHelper",
    componentId: "sc-41c960b5-21"
})([
    `color:var(`,
    `);margin-left:auto;`
], tokens.rightHelperColor);
export const StyledPlaceholder = styled.label.withConfig({
    displayName: "TextArea.styles__StyledPlaceholder",
    componentId: "sc-41c960b5-22"
})([
    `box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(`,
    `,var(`,
    `));width:100%;height:auto;top:var(`,
    `);padding-left:var(`,
    `);padding-right:`,
    `;font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], tokens.labelInnerColor, tokens.placeholderColor, tokens.inputPaddingTop, tokens.inputPaddingLeft, ({ hasContentRight })=>hasContentRight ? `var(${tokens.inputPaddingRightWithRightContent})` : `var(${tokens.inputPaddingRight})`, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
export const StyledIndicator = styled.div.withConfig({
    displayName: "TextArea.styles__StyledIndicator",
    componentId: "sc-41c960b5-23"
})([
    `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);
