import styled, { css } from "styled-components";
import { applyEllipsis, addFocus } from "../../mixins";
import { component, mergeConfig } from "../../engines";
import { spinnerConfig, spinnerTokens } from "../Spinner";
import { tokens } from "./LinkButton.tokens";
const mergedConfig = mergeConfig(spinnerConfig);
const Spinner = component(mergedConfig);
export const base = css([
    `position:relative;display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;text-decoration:none;appearance:none;outline:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);`,
    ``
], addFocus({
    outlineOffset: '0.125rem',
    outlineSize: '0.063rem',
    outlineRadius: `var(${tokens.linkButtonRadius})`,
    outlineColor: `var(${tokens.linkButtonFocusColor})`
}));
export const StyledAdditionalContent = styled.div.withConfig({
    displayName: "LinkButton.styles__StyledAdditionalContent",
    componentId: "sc-f4ed9abb-0"
})([
    `display:flex;align-items:center;margin:var(`,
    `);`
], tokens.linkButtonAdditionalContentMargin);
export const LoadWrap = styled.div.withConfig({
    displayName: "LinkButton.styles__LoadWrap",
    componentId: "sc-f4ed9abb-1"
})([
    `opacity:`,
    `;display:flex;align-items:inherit;justify-content:inherit;height:100%;width:100%;`
], ({ isLoading })=>isLoading ? '0.06' : '1');
export const Loader = styled.div.withConfig({
    displayName: "LinkButton.styles__Loader",
    componentId: "sc-f4ed9abb-2"
})([
    `position:absolute;`
]);
export const StyledSpinner = styled(Spinner).withConfig({
    displayName: "LinkButton.styles__StyledSpinner",
    componentId: "sc-f4ed9abb-3"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], spinnerTokens.size, tokens.linkButtonSpinnerSize, spinnerTokens.color, tokens.linkButtonSpinnerColor);
export const LinkButtonText = styled.span.withConfig({
    displayName: "LinkButton.styles__LinkButtonText",
    componentId: "sc-f4ed9abb-4"
})([
    `padding:var(`,
    `);color:var(`,
    `);`,
    ``
], tokens.linkButtonTextPadding, tokens.linkButtonTextColor, applyEllipsis());
export const StyledContentLeft = styled.div.withConfig({
    displayName: "LinkButton.styles__StyledContentLeft",
    componentId: "sc-f4ed9abb-5"
})([
    `line-height:0;color:var(`,
    `);margin:`,
    `;`
], tokens.linkButtonIconColor, ({ hasContent })=>hasContent ? `var(${tokens.linkButtonLeftContentMargin})` : '0');
export const StyledContentRight = styled.div.withConfig({
    displayName: "LinkButton.styles__StyledContentRight",
    componentId: "sc-f4ed9abb-6"
})([
    `line-height:0;color:var(`,
    `);margin:`,
    `;`
], tokens.linkButtonIconColor, ({ hasContent })=>hasContent ? `var(${tokens.linkButtonRightContentMargin})` : '0');
