import { css } from "styled-components";
import styled from "styled-components";
import { applyEllipsis, addFocus } from "../../mixins";
import { component, mergeConfig } from "../../engines";
import { spinnerConfig, spinnerTokens } from "../Spinner";
import { tokens } from "./LinkButton.tokens";
var mergedConfig = mergeConfig(spinnerConfig);
var Spinner = component(mergedConfig);
export var 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: "calc(0.125rem + var(".concat(tokens.linkButtonRadius, "))"),
    outlineColor: "var(".concat(tokens.linkButtonFocusColor, ")")
}));
export var StyledAdditionalContent = styled.div.withConfig({
    displayName: "LinkButton.styles__StyledAdditionalContent",
    componentId: "sc-f97b8dcf-0"
})([
    "display:flex;align-items:center;margin:var(",
    ");"
], tokens.linkButtonAdditionalContentMargin);
export var LoadWrap = styled.div.withConfig({
    displayName: "LinkButton.styles__LoadWrap",
    componentId: "sc-f97b8dcf-1"
})([
    "opacity:",
    ";display:flex;align-items:inherit;justify-content:inherit;height:100%;width:100%;"
], function(param) {
    var isLoading = param.isLoading;
    return isLoading ? '0.06' : '1';
});
export var Loader = styled.div.withConfig({
    displayName: "LinkButton.styles__Loader",
    componentId: "sc-f97b8dcf-2"
})([
    "position:absolute;"
]);
export var StyledSpinner = styled(Spinner).withConfig({
    displayName: "LinkButton.styles__StyledSpinner",
    componentId: "sc-f97b8dcf-3"
})([
    "",
    ":var(",
    ");",
    ":var(",
    ");"
], spinnerTokens.size, tokens.linkButtonSpinnerSize, spinnerTokens.color, tokens.linkButtonSpinnerColor);
export var LinkButtonText = styled.span.withConfig({
    displayName: "LinkButton.styles__LinkButtonText",
    componentId: "sc-f97b8dcf-4"
})([
    "padding:var(",
    ");color:var(",
    ");",
    " &:hover{color:var(",
    ");}&:active{color:var(",
    ");}"
], tokens.linkButtonTextPadding, tokens.linkButtonTextColor, applyEllipsis(), tokens.linkButtonTextColorHover, tokens.linkButtonTextColorActive);
export var StyledContentLeft = styled.div.withConfig({
    displayName: "LinkButton.styles__StyledContentLeft",
    componentId: "sc-f97b8dcf-5"
})([
    "line-height:0;color:var(",
    ");margin:",
    ";"
], tokens.linkButtonIconColor, function(param) {
    var hasContent = param.hasContent;
    return hasContent ? "var(".concat(tokens.linkButtonLeftContentMargin, ")") : '0';
});
export var StyledContentRight = styled.div.withConfig({
    displayName: "LinkButton.styles__StyledContentRight",
    componentId: "sc-f97b8dcf-6"
})([
    "line-height:0;color:var(",
    ");margin:",
    ";"
], tokens.linkButtonIconColor, function(param) {
    var hasContent = param.hasContent;
    return hasContent ? "var(".concat(tokens.linkButtonRightContentMargin, ")") : '0';
});
