import styled, { css } from "styled-components";
import { component, mergeConfig } from "../../engines";
import { badgeConfig, badgeTokens } from "../Badge";
import { counterConfig, counterTokens } from "../Counter";
import { classes, tokens } from "./Avatar.tokens";
const mergedBadgeConfig = mergeConfig(badgeConfig);
const Badge = component(mergedBadgeConfig);
const mergedCounterConfig = mergeConfig(counterConfig);
const Counter = component(mergedCounterConfig);
export const base = css([
    `position:relative;`
]);
export const Wrapper = styled.div.withConfig({
    displayName: "Avatar.styles__Wrapper",
    componentId: "sc-8d25cd61-0"
})([
    `display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:var(`,
    `);overflow:hidden;border-radius:`,
    `;&:hover{scale:`,
    `;cursor:`,
    `;}`
], tokens.backgroundColor, ({ borderRadius })=>borderRadius || `var(${tokens.borderRadius})`, ({ isScalable })=>isScalable ? `var(${tokens.scaleHover})` : '1', ({ isScalable })=>isScalable ? 'pointer' : 'inherit');
export const StatusIcon = styled.div.withConfig({
    displayName: "Avatar.styles__StatusIcon",
    componentId: "sc-8d25cd61-1"
})([
    `position:absolute;`
]);
export const Image = styled.img.withConfig({
    displayName: "Avatar.styles__Image",
    componentId: "sc-8d25cd61-2"
})([
    `width:100%;height:100%;border-radius:`,
    `;`
], ({ borderRadius })=>borderRadius || `var(${tokens.borderRadius})`);
export const Text = styled.span.withConfig({
    displayName: "Avatar.styles__Text",
    componentId: "sc-8d25cd61-3"
})([
    `font-size:var(`,
    `);font-family:var(`,
    `);font-weight:var(`,
    `);line-height:var(`,
    `);background-image:var(`,
    `);background-color:var(`,
    `);background-size:100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;`
], tokens.fontSize, tokens.fontFamily, tokens.fontWeight, tokens.lineHeight, tokens.color, tokens.color);
export const ExtraContent = styled.div.withConfig({
    displayName: "Avatar.styles__ExtraContent",
    componentId: "sc-8d25cd61-4"
})([
    `max-width:100%;display:flex;position:absolute;z-index:2;&.`,
    `{top:calc(-0.063rem * var(`,
    `,0));left:calc(-0.063rem * var(`,
    `,0));}&.`,
    `{top:calc(-0.063rem * var(`,
    `,0));right:calc(-0.063rem * var(`,
    `,0));}&.`,
    `{bottom:calc(-0.063rem * var(`,
    `,0));right:calc(-0.063rem * var(`,
    `,0));}&.`,
    `{bottom:calc(-0.063rem * var(`,
    `,0));left:calc(-0.063rem * var(`,
    `,0));}`
], classes.extraPlacementTopLeft, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementTopRight, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementBottomRight, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementBottomLeft, tokens.extraPlacementFactor, tokens.extraPlacementFactor);
export const ExtraBadge = styled(Badge).withConfig({
    displayName: "Avatar.styles__ExtraBadge",
    componentId: "sc-8d25cd61-5"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], badgeTokens.background, tokens.badgeBackground, badgeTokens.color, tokens.badgeColor, badgeTokens.backgroundTransparent, tokens.badgeBackgroundTransparent, badgeTokens.colorTransparent, tokens.badgeColorTransparent, badgeTokens.colorClear, tokens.badgeColorClear, badgeTokens.backgroundClear, tokens.badgeBackgroundClear, badgeTokens.borderRadius, tokens.badgeBorderRadius, badgeTokens.pilledBorderRadius, tokens.badgePilledBorderRadius, badgeTokens.height, tokens.badgeHeight, badgeTokens.padding, tokens.badgePadding, badgeTokens.paddingIconOnly, tokens.badgePaddingIconOnly, badgeTokens.fontFamily, tokens.badgeFontFamily, badgeTokens.fontSize, tokens.badgeFontSize, badgeTokens.fontStyle, tokens.badgeFontStyle, badgeTokens.fontWeight, tokens.badgeFontWeight, badgeTokens.letterSpacing, tokens.badgeLetterSpacing, badgeTokens.lineHeight, tokens.badgeLineHeight, badgeTokens.leftContentMarginLeft, tokens.badgeLeftContentMarginLeft, badgeTokens.leftContentMarginRight, tokens.badgeLeftContentMarginRight, badgeTokens.rightContentMarginLeft, tokens.badgeRightContentMarginLeft, badgeTokens.rightContentMarginRight, tokens.badgeRightContentMarginRight);
export const ExtraCounter = styled(Counter).withConfig({
    displayName: "Avatar.styles__ExtraCounter",
    componentId: "sc-8d25cd61-6"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], counterTokens.background, tokens.counterBackground, counterTokens.color, tokens.counterColor, counterTokens.borderRadius, tokens.counterBorderRadius, counterTokens.height, tokens.counterHeight, counterTokens.padding, tokens.counterPadding, counterTokens.fontFamily, tokens.counterFontFamily, counterTokens.fontSize, tokens.counterFontSize, counterTokens.fontStyle, tokens.counterFontStyle, counterTokens.fontWeight, tokens.counterFontWeight, counterTokens.letterSpacing, tokens.counterLetterSpacing, counterTokens.lineHeight, tokens.counterLineHeight);
