import styled from "@emotion/styled";
import { css } from "@emotion/react";
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 = /*#__PURE__*/ 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})`
}), "base");
export const StyledAdditionalContent = /*#__PURE__*/ styled("div", {
    target: "e90k3ge0",
    label: "StyledAdditionalContent"
})("display:flex;align-items:center;margin:var(", tokens.linkButtonAdditionalContentMargin, ");");
export const LoadWrap = /*#__PURE__*/ styled("div", {
    target: "e90k3ge1",
    label: "LoadWrap"
})("opacity:", ({ isLoading })=>isLoading ? '0.06' : '1', ";display:flex;align-items:inherit;justify-content:inherit;height:100%;width:100%;");
export const Loader = /*#__PURE__*/ styled("div", {
    target: "e90k3ge2",
    label: "Loader"
})("position:absolute;");
export const StyledSpinner = /*#__PURE__*/ styled(Spinner, {
    target: "e90k3ge3",
    label: "StyledSpinner"
})(spinnerTokens.size, ":var(", tokens.linkButtonSpinnerSize, ");", spinnerTokens.color, ":var(", tokens.linkButtonSpinnerColor, ");");
export const LinkButtonText = /*#__PURE__*/ styled("span", {
    target: "e90k3ge4",
    label: "LinkButtonText"
})("padding:var(", tokens.linkButtonTextPadding, ");color:var(", tokens.linkButtonTextColor, ");", applyEllipsis());
export const StyledContentLeft = /*#__PURE__*/ styled("div", {
    target: "e90k3ge5",
    label: "StyledContentLeft"
})("line-height:0;color:var(", tokens.linkButtonIconColor, ");margin:", ({ hasContent })=>hasContent ? `var(${tokens.linkButtonLeftContentMargin})` : '0', ";");
export const StyledContentRight = /*#__PURE__*/ styled("div", {
    target: "e90k3ge6",
    label: "StyledContentRight"
})("line-height:0;color:var(", tokens.linkButtonIconColor, ");margin:", ({ hasContent })=>hasContent ? `var(${tokens.linkButtonRightContentMargin})` : '0', ";");
