import styled, { css } from "styled-components";
import { component, mergeConfig } from "../../../engines";
import { fileConfig, fileTokens } from "../../File";
import { embedIconButtonConfig, embedIconButtonTokens } from "../../EmbedIconButton";
import { iconButtonConfig, iconButtonTokens } from "../../IconButton";
import { addScrollbar } from "../../../mixins";
import { tokens, classes } from "./Input.tokens";
const fileMergedConfig = mergeConfig(fileConfig);
const File = component(fileMergedConfig);
const embedIconButtonMergedConfig = mergeConfig(embedIconButtonConfig);
const EmbedIconButton = component(embedIconButtonMergedConfig);
const iconButtonMergedConfig = mergeConfig(iconButtonConfig);
const IconButton = component(iconButtonMergedConfig);
export const base = css([
    `box-sizing:border-box;display:block;padding-top:var(`,
    `);padding-right:var(`,
    `);padding-bottom:var(`,
    `);padding-left:var(`,
    `);border-radius:var(`,
    `);background:var(`,
    `);`
], tokens.paddingTop, tokens.paddingRight, tokens.paddingBottom, tokens.paddingLeft, tokens.borderRadius, tokens.background);
export const AttachmentsList = styled.div.withConfig({
    displayName: "Input.styles__AttachmentsList",
    componentId: "sc-71c708b2-0"
})([
    `display:flex;align-items:center;flex-wrap:nowrap;gap:var(`,
    `);margin-bottom:var(`,
    `);border-radius:var(`,
    `);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}`
], tokens.attachmentsGap, tokens.attachmentsListMargin, tokens.fileBorderRadius);
export const AttachedFile = styled(File).withConfig({
    displayName: "Input.styles__AttachedFile",
    componentId: "sc-71c708b2-1"
})([
    `background:var(`,
    `);padding-top:var(`,
    `);padding-right:var(`,
    `);padding-bottom:var(`,
    `);padding-left:var(`,
    `);border-radius:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], tokens.fileBackground, tokens.filePaddingTop, tokens.filePaddingRight, tokens.filePaddingBottom, tokens.filePaddingLeft, tokens.fileBorderRadius, fileTokens.embedIconButtonColor, tokens.fileEmbedIconButtonColor, fileTokens.embedIconButtonColorHover, tokens.fileEmbedIconButtonColorHover, fileTokens.embedIconButtonColorActive, tokens.fileEmbedIconButtonColorActive, fileTokens.embedIconButtonFocusColor, tokens.focusColor, fileTokens.cellTitleColor, tokens.fileCellTitleColor, fileTokens.cellSubtitleColor, tokens.fileCellSubtitleColor, fileTokens.embedIconButtonHeight, tokens.fileEmbedIconButtonHeight, fileTokens.embedIconButtonWidth, tokens.fileEmbedIconButtonWidth, fileTokens.embedIconButtonPadding, tokens.fileEmbedIconButtonPadding, fileTokens.embedIconButtonRadius, tokens.fileEmbedIconButtonRadius, fileTokens.cellHeight, tokens.fileCellHeight, fileTokens.cellTextboxGap, tokens.fileCellTextboxGap, fileTokens.cellGap, tokens.fileCellGap, fileTokens.cellTitleFontFamily, tokens.fileCellTitleFontFamily, fileTokens.cellTitleFontSize, tokens.fileCellTitleFontSize, fileTokens.cellTitleFontStyle, tokens.fileCellTitleFontStyle, fileTokens.cellTitleFontWeight, tokens.fileCellTitleFontWeight, fileTokens.cellTitleLetterSpacing, tokens.fileCellTitleLetterSpacing, fileTokens.cellTitleLineHeight, tokens.fileCellTitleLineHeight, fileTokens.cellSubtitleFontFamily, tokens.fileCellSubtitleFontFamily, fileTokens.cellSubtitleFontSize, tokens.fileCellSubtitleFontSize, fileTokens.cellSubtitleFontStyle, tokens.fileCellSubtitleFontStyle, fileTokens.cellSubtitleFontWeight, tokens.fileCellSubtitleFontWeight, fileTokens.cellSubtitleLetterSpacing, tokens.fileCellSubtitleLetterSpacing, fileTokens.cellSubtitleLineHeight, tokens.fileCellSubtitleLineHeight, fileTokens.fileThumbSize, tokens.fileThumbSize, fileTokens.fileThumbRadius, tokens.fileThumbRadius);
export const AttachedImage = styled.div.withConfig({
    displayName: "Input.styles__AttachedImage",
    componentId: "sc-71c708b2-2"
})([
    `position:relative;flex:none;background:none;padding:0;margin:0;border:none;width:calc(var(`,
    `) + var(`,
    `) + var(`,
    `));height:calc(var(`,
    `) + var(`,
    `) + var(`,
    `));line-height:0;border-radius:var(`,
    `);overflow:hidden;&:focus,&:focus-visible{outline:none;border:none;}&:hover .`,
    `,&:focus-visible .`,
    `{visibility:visible;}&:focus-visible button::before{border-color:var(`,
    `);}`
], tokens.fileCellHeight, tokens.filePaddingTop, tokens.filePaddingBottom, tokens.fileCellHeight, tokens.filePaddingTop, tokens.filePaddingBottom, tokens.fileBorderRadius, classes.attachedOverlay, classes.attachedOverlay, tokens.focusColor);
export const AttachedImageOverlay = styled.div.withConfig({
    displayName: "Input.styles__AttachedImageOverlay",
    componentId: "sc-71c708b2-3"
})([
    `visibility:hidden;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--overlay-blur);cursor:pointer;`
]);
export const RemoveButton = styled(EmbedIconButton).withConfig({
    displayName: "Input.styles__RemoveButton",
    componentId: "sc-71c708b2-4"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], embedIconButtonTokens.embedIconButtonWidth, tokens.fileEmbedIconButtonWidth, embedIconButtonTokens.embedIconButtonHeight, tokens.fileEmbedIconButtonHeight, embedIconButtonTokens.embedIconButtonRadius, tokens.fileEmbedIconButtonRadius, embedIconButtonTokens.embedIconButtonColor, tokens.fileEmbedIconButtonColor);
export const Thumb = styled.img.withConfig({
    displayName: "Input.styles__Thumb",
    componentId: "sc-71c708b2-5"
})([
    `width:100%;height:100%;object-fit:cover;`
]);
export const TextAreaWrapper = styled.div.withConfig({
    displayName: "Input.styles__TextAreaWrapper",
    componentId: "sc-71c708b2-6"
})([
    `padding-top:var(`,
    `);padding-right:var(`,
    `);padding-bottom:var(`,
    `);padding-left:var(`,
    `);line-height:0;`
], tokens.textareaPaddingTop, tokens.textareaPaddingRight, tokens.textareaPaddingBottom, tokens.textareaPaddingLeft);
export const TextArea = styled.textarea.withConfig({
    displayName: "Input.styles__TextArea",
    componentId: "sc-71c708b2-7"
})([
    `width:100%;background:transparent;border:none;color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);caret-color:var(`,
    `);resize:none;overflow:hidden;&::placeholder{color:var(`,
    `);}&:focus::placeholder{color:var(`,
    `);}&:focus,&:focus-visible{outline:none;box-shadow:none;}`,
    `;--textarea-scroll-offset:calc( var(`,
    `) + var(`,
    `) - var(`,
    `) );padding:0 var(--textarea-scroll-offset) 0 0;margin-right:calc(var(--textarea-scroll-offset) * -1);&[data-condensed='true']{padding:var(`,
    `);--textarea-scroll-offset:0rem;margin-right:0;box-sizing:border-box;}`
], tokens.textareaColor, tokens.textareaFontFamily, tokens.textareaFontSize, tokens.textareaFontStyle, tokens.textareaFontWeight, tokens.textareaLetterSpacing, tokens.textareaLineHeight, tokens.textareaCaretColor, tokens.textareaPlaceholderColor, tokens.textareaPlaceholderColorFocus, addScrollbar({
    scrollWidth: `var(${tokens.textareaScrollWidth})`,
    trackColor: `var(${tokens.textareaScrollTrackColor})`,
    thumbColor: `var(${tokens.textareaScrollThumbColor})`
}), tokens.textareaPaddingRight, tokens.paddingRight, tokens.textareaScrollWidth, tokens.inputFieldPadding);
export const Footer = styled.div.withConfig({
    displayName: "Input.styles__Footer",
    componentId: "sc-71c708b2-8"
})([
    `display:flex;align-items:center;justify-content:space-between;`
]);
export const ActionBefore = styled.div.withConfig({
    displayName: "Input.styles__ActionBefore",
    componentId: "sc-71c708b2-9"
})([
    `flex:none;line-height:0;`
]);
export const InputFieldWrapper = styled.div.withConfig({
    displayName: "Input.styles__InputFieldWrapper",
    componentId: "sc-71c708b2-10"
})([
    `flex:1;line-height:0;`
]);
export const ActionAfter = styled.div.withConfig({
    displayName: "Input.styles__ActionAfter",
    componentId: "sc-71c708b2-11"
})([
    `flex:none;line-height:0;`
]);
export const SubmitButton = styled(IconButton).withConfig({
    displayName: "Input.styles__SubmitButton",
    componentId: "sc-71c708b2-12"
})([
    `flex:none;margin-left:0.125rem;`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], iconButtonTokens.iconButtonColor, tokens.submitButtonColor, iconButtonTokens.iconButtonBackgroundColor, tokens.submitButtonBackgroundColor, iconButtonTokens.iconButtonBackgroundColorHover, tokens.submitButtonBackgroundColorHover, iconButtonTokens.iconButtonBackgroundColorActive, tokens.submitButtonBackgroundColorActive, iconButtonTokens.iconButtonLoadingBackgroundColor, tokens.submitButtonLoadingBackgroundColor, iconButtonTokens.iconButtonWidth, tokens.submitButtonWidth, iconButtonTokens.iconButtonHeight, tokens.submitButtonHeight, iconButtonTokens.iconButtonPadding, tokens.submitButtonPadding, iconButtonTokens.iconButtonRadius, tokens.submitButtonRadius, iconButtonTokens.iconButtonSpinnerSize, tokens.submitButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor, tokens.submitButtonSpinnerColor, iconButtonTokens.iconButtonFocusColor, tokens.focusColor);
