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 { classes, tokens } from "./Button.tokens";
// issue #823
var mergedConfig = mergeConfig(spinnerConfig);
var Spinner = component(mergedConfig);
export var ButtonText = styled.span.withConfig({
    displayName: "Button.styles__ButtonText",
    componentId: "sc-5e938d89-0"
})([
    "min-width:4ch;&.",
    "{flex-grow:2;text-align:start;}color:var(",
    ");",
    ""
], String(classes.contentRelaxed), tokens.buttonTextColor, applyEllipsis());
export var StyledAdditionalContent = styled.div.withConfig({
    displayName: "Button.styles__StyledAdditionalContent",
    componentId: "sc-5e938d89-1"
})([
    "display:flex;align-items:center;margin:var(",
    ");&.",
    "{text-align:start;flex-grow:2;}&.",
    "{margin-right:var(",
    ");}"
], tokens.buttonAdditionalContentMargin, String(classes.contentRelaxed), classes.buttonHasValue, tokens.buttonAdditionalContentMarginRightWidthValue);
export var ButtonValue = styled.span.withConfig({
    displayName: "Button.styles__ButtonValue",
    componentId: "sc-5e938d89-2"
})([
    "min-width:4ch;margin:var(",
    ");color:var(",
    ");font-weight:var(",
    ");",
    ""
], tokens.buttonValueMargin, tokens.buttonValueColor, tokens.buttonValueFontWeight, applyEllipsis());
// TODO: #720
export var LoadWrap = styled.div.withConfig({
    displayName: "Button.styles__LoadWrap",
    componentId: "sc-5e938d89-3"
})([
    "opacity:",
    ";display:flex;align-items:inherit;justify-content:",
    ";height:100%;width:100%;"
], function(param) {
    var isLoading = param.isLoading;
    return isLoading ? '0' : '1';
}, function(param) {
    var contentPlacing = param.contentPlacing;
    return contentPlacing;
});
export var Loader = styled.div.withConfig({
    displayName: "Button.styles__Loader",
    componentId: "sc-5e938d89-4"
})([
    "position:absolute;"
]);
export var StyledSpinner = styled(Spinner).withConfig({
    displayName: "Button.styles__StyledSpinner",
    componentId: "sc-5e938d89-5"
})([
    "",
    ":var(",
    ");",
    ":var(",
    ");"
], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
export var StyledContentLeft = styled.div.withConfig({
    displayName: "Button.styles__StyledContentLeft",
    componentId: "sc-5e938d89-6"
})([
    "display:flex;align-self:var(",
    ");color:var(",
    ");margin:",
    ";"
], tokens.buttonLeftContentAlignSelf, tokens.buttonIconColor, function(param) {
    var hasContentMargin = param.hasContentMargin;
    return hasContentMargin ? "var(".concat(tokens.buttonLeftContentMargin, ")") : 0;
});
export var StyledContentRight = styled.div.withConfig({
    displayName: "Button.styles__StyledContentRight",
    componentId: "sc-5e938d89-7"
})([
    "display:flex;align-self:var(",
    ");color:var(",
    ");margin:",
    ";"
], tokens.buttonRightContentAlignSelf, tokens.buttonIconColor, function(param) {
    var hasContentMargin = param.hasContentMargin;
    return hasContentMargin ? "var(".concat(tokens.buttonRightContentMargin, ")") : 0;
});
export var base = css([
    "position:relative;display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);a&{text-decoration:none;}--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);&&.",
    "{width:var(",
    ");padding:0;}"
], String(classes.buttonSquare), tokens.buttonHeight);
// INFO: Для возможности переиспользования стилей в других компонентах
export var baseContent = "\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    /* NOTE:\n        --plasma_computed-btn-br-radius is defined in Button.tsx\n    */\n    --plasma_private-btn-br: var(--plasma_computed-btn-br);\n    border-radius: var(--plasma_private-btn-br);\n\n    &&.".concat(String(classes.buttonSquare), " {\n        width: var(").concat(tokens.buttonHeight, ");\n        padding: 0;\n    }\n\n    color: var(").concat(tokens.buttonColor, ");\n    background: var(").concat(tokens.buttonBackgroundColor, ");\n    box-shadow: inset 0 0 0 0.063rem var(").concat(tokens.buttonBorderColor, ", inset 0 0 0 0 transparent);\n\n    @media (hover: hover) and (pointer: fine) {\n        :hover {\n            color: var(").concat(tokens.buttonColorHover, ", var(").concat(tokens.buttonColor, "));\n            background: var(").concat(tokens.buttonBackgroundColorHover, ", var(").concat(tokens.buttonBackgroundColor, "));\n            box-shadow: inset 0 0 0 0.063rem var(").concat(tokens.buttonBorderColorHover, ", inset 0 0 0 0 transparent);\n\n            scale: var(").concat(tokens.buttonScaleHover, ");\n        }\n    }\n\n    :active {\n        color: var(").concat(tokens.buttonColorActive, ", var(").concat(tokens.buttonColor, "));\n        background: var(").concat(tokens.buttonBackgroundColorActive, ", var(").concat(tokens.buttonBackgroundColor, "));\n        box-shadow: inset 0 0 0 0.063rem var(").concat(tokens.buttonBorderColorActive, ", inset 0 0 0 0 transparent);\n\n        scale: var(").concat(tokens.buttonScaleActive, ");\n    }\n\n    height: var(").concat(tokens.buttonHeight, ");\n    width: var(").concat(tokens.buttonWidth, ");\n\n    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n    padding: 0 var(").concat(tokens.buttonPadding, ", calc(var(").concat(tokens.buttonHeight, ") * 1.618 / 4));\n\n    font-family: var(").concat(tokens.buttonFontFamily, ");\n    font-size: var(").concat(tokens.buttonFontSize, ");\n    font-style: var(").concat(tokens.buttonFontStyle, ");\n    font-weight: var(").concat(tokens.buttonFontWeight, ");\n    letter-spacing: var(").concat(tokens.buttonLetterSpacing, ");\n    line-height: var(").concat(tokens.buttonLineHeight, ");\n\n    /* TODO: #710 make it token API ? */\n    --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n    :focus-visible {\n        outline: none;\n    }\n\n    ").concat(addFocus({
    outlineOffset: '-0.125rem',
    outlineSize: 'var(--plasma_private-btn-outline-size)',
    outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
    outlineColor: "var(".concat(tokens.buttonFocusColor, ")")
}), "\n\n    &[disabled] {\n        opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n        cursor: not-allowed;\n\n        @media (hover: hover) and (pointer: fine) {\n            :hover,\n            :active {\n                scale: none;\n\n                color: var(").concat(tokens.buttonColor, ");\n                background: var(").concat(tokens.buttonBackgroundColor, ");\n            }\n        }\n    }\n\n    &.").concat(classes.fixedStretching, " {\n        width: var(").concat(tokens.buttonWidth, ");\n    }\n    &.").concat(classes.filledStretching, " {\n        width: 100%;\n    }\n    &.").concat(classes.autoStretching, " {\n        width: fit-content;\n    }\n");
