import styled, { css } from "styled-components";
import { spinnerConfig, spinnerTokens } from "../Spinner";
import { progressBarCircularConfig, progressBarCircularTokens } from "../ProgressBarCircular";
import { component, mergeConfig } from "../../engines";
import { tokens } from "./Loader.tokens";
const mergedSpinnerConfig = mergeConfig(spinnerConfig);
const Spinner = component(mergedSpinnerConfig);
const mergedProgressBarCircularConfig = mergeConfig(progressBarCircularConfig);
const ProgressBarCircular = component(mergedProgressBarCircularConfig);
export const base = css([
    `display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(`,
    `);height:var(`,
    `);`
], tokens.width, tokens.height);
export const StyledSpinner = styled(Spinner).withConfig({
    displayName: "Loader.styles__StyledSpinner",
    componentId: "sc-7a5b81df-0"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], spinnerTokens.size, tokens.spinnerSize, spinnerTokens.color, tokens.spinnerColor);
export const StyledProgressBarCircular = styled(ProgressBarCircular).withConfig({
    displayName: "Loader.styles__StyledProgressBarCircular",
    componentId: "sc-7a5b81df-1"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], progressBarCircularTokens.size, tokens.progressBarCircularSize, progressBarCircularTokens.width, tokens.progressBarCircularWidth, progressBarCircularTokens.height, tokens.progressBarCircularHeight, progressBarCircularTokens.strokeWidth, tokens.progressBarCircularStrokeWidth, progressBarCircularTokens.strokeSize, tokens.progressBarCircularStrokeSize, progressBarCircularTokens.backgroundStroke, tokens.progressBarCircularBackgroundStroke, progressBarCircularTokens.progressStroke, tokens.progressBarCircularStroke, progressBarCircularTokens.contentColor, tokens.progressBarCircularContentColor, progressBarCircularTokens.contentFontFamily, tokens.progressBarCircularContentFontFamily, progressBarCircularTokens.contentFontSize, tokens.progressBarCircularContentFontSize, progressBarCircularTokens.contentFontStyle, tokens.progressBarCircularContentFontStyle, progressBarCircularTokens.contentFontWeight, tokens.progressBarCircularContentFontWeight, progressBarCircularTokens.contentLetterSpacing, tokens.progressBarCircularContentLetterSpacing, progressBarCircularTokens.contentLineHeight, tokens.progressBarCircularContentLineHeight);
export const LoaderWrapper = styled.div.withConfig({
    displayName: "Loader.styles__LoaderWrapper",
    componentId: "sc-7a5b81df-2"
})([
    `position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:`,
    `;`
], ({ zIndex })=>zIndex || 9000);
export const StyledOverlay = styled.div.withConfig({
    displayName: "Loader.styles__StyledOverlay",
    componentId: "sc-7a5b81df-3"
})([
    `position:absolute;inset:0;background:var(--plasma_private-overlay-background-color);backdrop-filter:`,
    `;cursor:`,
    `;--plasma_private-overlay-background-color:`,
    `;`
], ({ withBlur })=>withBlur ? 'blur(1rem)' : 'none', ({ onClick })=>onClick ? 'pointer' : 'default', ({ backgroundColorToken })=>backgroundColorToken);
export const LoaderContentWrapper = styled.div.withConfig({
    displayName: "Loader.styles__LoaderContentWrapper",
    componentId: "sc-7a5b81df-4"
})([
    `position:relative;z-index:1;`
]);
