import styled, { css } from "styled-components";
import { component, mergeConfig } from "../../../engines";
import { spinnerConfig, spinnerTokens } from "../../Spinner";
import { tokens } from "./Answer.tokens";
const mergedSpinnerConfig = mergeConfig(spinnerConfig);
export const SpinnerComponent = component(mergedSpinnerConfig);
export const base = css([
    `position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;`
]);
export const Title = styled.div.withConfig({
    displayName: "Answer.styles__Title",
    componentId: "sc-3ad342a0-0"
})([
    `box-sizing:border-box;color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], tokens.titleColor, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight);
export const ContentWrapper = styled.div.withConfig({
    displayName: "Answer.styles__ContentWrapper",
    componentId: "sc-3ad342a0-1"
})([
    `box-sizing:border-box;margin-top:var(`,
    `);color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], tokens.titleContentGap, tokens.textContentColor, tokens.textContentFontFamily, tokens.textContentFontSize, tokens.textContentFontStyle, tokens.textContentFontWeight, tokens.textContentLetterSpacing, tokens.textContentLineHeight);
export const FooterWrapper = styled.div.withConfig({
    displayName: "Answer.styles__FooterWrapper",
    componentId: "sc-3ad342a0-2"
})([
    `box-sizing:border-box;margin-top:var(`,
    `);`
], tokens.contentFooterGap);
export const LoadingWrapper = styled.div.withConfig({
    displayName: "Answer.styles__LoadingWrapper",
    componentId: "sc-3ad342a0-3"
})([
    `display:flex;flex-direction:row;align-items:center;gap:0.5rem;margin-top:var(`,
    `);`
], tokens.titleContentGap);
export const LoadingTitle = styled.div.withConfig({
    displayName: "Answer.styles__LoadingTitle",
    componentId: "sc-3ad342a0-4"
})([
    `box-sizing:border-box;color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], tokens.loadingTitleColor, tokens.loadingTitleFontFamily, tokens.loadingTitleFontSize, tokens.loadingTitleFontStyle, tokens.loadingTitleFontWeight, tokens.loadingTitleLetterSpacing, tokens.loadingTitleLineHeight);
export const SpinnerUI = styled(SpinnerComponent).withConfig({
    displayName: "Answer.styles__SpinnerUI",
    componentId: "sc-3ad342a0-5"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], spinnerTokens.size, tokens.spinnerSize, spinnerTokens.color, tokens.spinnerColor);
export const ErrorContainer = styled.div.withConfig({
    displayName: "Answer.styles__ErrorContainer",
    componentId: "sc-3ad342a0-6"
})([
    `display:flex;flex-direction:column;box-sizing:border-box;margin-top:var(`,
    `);background:var(`,
    `);border-radius:var(`,
    `);padding:var(`,
    `);gap:var(`,
    `);`
], tokens.titleContentGap, tokens.errorContainerBackgroundColor, tokens.errorContainerBorderRadius, tokens.errorContainerPadding, tokens.errorContainerGap);
export const ErrorTitle = styled.div.withConfig({
    displayName: "Answer.styles__ErrorTitle",
    componentId: "sc-3ad342a0-7"
})([
    `box-sizing:border-box;color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], tokens.errorTitleColor, tokens.errorTitleFontFamily, tokens.errorTitleFontSize, tokens.errorTitleFontStyle, tokens.errorTitleFontWeight, tokens.errorTitleLetterSpacing, tokens.errorTitleLineHeight);
export const ErrorTextContent = styled.div.withConfig({
    displayName: "Answer.styles__ErrorTextContent",
    componentId: "sc-3ad342a0-8"
})([
    `box-sizing:border-box;color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], tokens.errorTextContentColor, tokens.errorTextContentFontFamily, tokens.errorTextContentFontSize, tokens.errorTextContentFontStyle, tokens.errorTextContentFontWeight, tokens.errorTextContentLetterSpacing, tokens.errorTextContentLineHeight);
