import styled, { css } from "styled-components";
import { addFocus } from "../../../mixins";
import { component, mergeConfig } from "../../../engines";
import { spinnerConfig, spinnerTokens } from "../../Spinner";
import { tokens } from "./EmbeddedButton.tokens";
const mergedConfig = mergeConfig(spinnerConfig);
const Spinner = component(mergedConfig);
const positionAlignItems = {
    center: 'center',
    'center-left': 'center',
    'center-right': 'center',
    top: 'start',
    'top-left': 'start',
    'top-right': 'start',
    bottom: 'end',
    'bottom-left': 'end',
    'bottom-right': 'end'
};
const positionJustifyItems = {
    center: 'center',
    'center-left': 'start',
    'center-right': 'end',
    top: 'center',
    'top-left': 'start',
    'top-right': 'end',
    bottom: 'center',
    'bottom-left': 'start',
    'bottom-right': 'end'
};
export const LoadWrap = styled.div.withConfig({
    displayName: "EmbeddedButton.styles__LoadWrap",
    componentId: "sc-311bee48-0"
})([
    `opacity:`,
    `;display:grid;width:100%;height:100%;align-items:`,
    `;justify-items:`,
    `;`
], ({ isLoading })=>isLoading ? `var(${tokens.loadingIconOpacity})` : '1', ({ position })=>positionAlignItems[position], ({ position })=>positionJustifyItems[position]);
export const IconContainer = styled.div.withConfig({
    displayName: "EmbeddedButton.styles__IconContainer",
    componentId: "sc-311bee48-1"
})([
    `display:flex;align-items:center;justify-content:center;flex-shrink:0;`
]);
export const Loader = styled.div.withConfig({
    displayName: "EmbeddedButton.styles__Loader",
    componentId: "sc-311bee48-2"
})([
    `position:absolute;inset:0;display:flex;align-items:center;justify-content:center;`
]);
export const StyledSpinner = styled(Spinner).withConfig({
    displayName: "EmbeddedButton.styles__StyledSpinner",
    componentId: "sc-311bee48-3"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], spinnerTokens.size, tokens.spinnerSize, spinnerTokens.color, tokens.spinnerColor);
export const base = css([
    `position:relative;display:block;width:100%;height:100%;border-radius:var(`,
    `);box-sizing:border-box;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);background:transparent;padding:0;a&{text-decoration:none;}:focus-visible{outline:none;}`,
    ``
], tokens.borderRadius, addFocus({
    outlineOffset: '0.125rem',
    outlineSize: '0.0625rem',
    outlineRadius: `var(${tokens.borderRadius})`,
    outlineColor: `var(${tokens.focusColor})`
}));
