"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: Object.getOwnPropertyDescriptor(all, name).get
    });
}
_export(exports, {
    get ButtonText () {
        return ButtonText;
    },
    get ButtonValue () {
        return ButtonValue;
    },
    get LoadWrap () {
        return LoadWrap;
    },
    get Loader () {
        return Loader;
    },
    get StyledAdditionalContent () {
        return StyledAdditionalContent;
    },
    get StyledContentLeft () {
        return StyledContentLeft;
    },
    get StyledContentRight () {
        return StyledContentRight;
    },
    get StyledSpinner () {
        return StyledSpinner;
    },
    get base () {
        return base;
    },
    get baseContent () {
        return baseContent;
    }
});
var _react = require("@emotion/react");
var _styled = /*#__PURE__*/ _interop_require_default(require("@emotion/styled"));
var _mixins = require("../../mixins");
var _engines = require("../../engines");
var _Spinner = require("../Spinner");
var _Buttontokens = require("./Button.tokens");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
// issue #823
var mergedConfig = (0, _engines.mergeConfig)(_Spinner.spinnerConfig);
var Spinner = (0, _engines.component)(mergedConfig);
var ButtonText = (0, /*#__PURE__*/ _styled.default)("span", {
    target: "e5v6hem0",
    label: "ButtonText"
})("min-width:4ch;&.", String(_Buttontokens.classes.contentRelaxed), "{flex-grow:2;text-align:start;}color:var(", _Buttontokens.tokens.buttonTextColor, ");", (0, _mixins.applyEllipsis)());
var StyledAdditionalContent = (0, /*#__PURE__*/ _styled.default)("div", {
    target: "e5v6hem1",
    label: "StyledAdditionalContent"
})("display:flex;align-items:center;margin:var(", _Buttontokens.tokens.buttonAdditionalContentMargin, ");&.", String(_Buttontokens.classes.contentRelaxed), "{text-align:start;flex-grow:2;}&.", _Buttontokens.classes.buttonHasValue, "{margin-right:var(", _Buttontokens.tokens.buttonAdditionalContentMarginRightWidthValue, ");}");
var ButtonValue = (0, /*#__PURE__*/ _styled.default)("span", {
    target: "e5v6hem2",
    label: "ButtonValue"
})("min-width:4ch;margin:var(", _Buttontokens.tokens.buttonValueMargin, ");color:var(", _Buttontokens.tokens.buttonValueColor, ");font-weight:var(", _Buttontokens.tokens.buttonValueFontWeight, ");", (0, _mixins.applyEllipsis)());
var LoadWrap = (0, /*#__PURE__*/ _styled.default)("div", {
    target: "e5v6hem3",
    label: "LoadWrap"
})("opacity:", function(param) {
    var isLoading = param.isLoading;
    return isLoading ? '0' : '1';
}, ";display:flex;align-items:inherit;justify-content:", function(param) {
    var contentPlacing = param.contentPlacing;
    return contentPlacing;
}, ";height:100%;width:100%;");
var Loader = (0, /*#__PURE__*/ _styled.default)("div", {
    target: "e5v6hem4",
    label: "Loader"
})("position:absolute;");
var StyledSpinner = /*#__PURE__*/ (0, _styled.default)(Spinner, {
    target: "e5v6hem5",
    label: "StyledSpinner"
})(_Spinner.spinnerTokens.size, ":var(", _Buttontokens.tokens.buttonSpinnerSize, ");", _Spinner.spinnerTokens.color, ":var(", _Buttontokens.tokens.buttonSpinnerColor, ");");
var StyledContentLeft = (0, /*#__PURE__*/ _styled.default)("div", {
    target: "e5v6hem6",
    label: "StyledContentLeft"
})("display:flex;align-self:var(", _Buttontokens.tokens.buttonLeftContentAlignSelf, ");color:var(", _Buttontokens.tokens.buttonIconColor, ");margin:", function(param) {
    var hasContentMargin = param.hasContentMargin;
    return hasContentMargin ? "var(".concat(_Buttontokens.tokens.buttonLeftContentMargin, ")") : 0;
}, ";");
var StyledContentRight = (0, /*#__PURE__*/ _styled.default)("div", {
    target: "e5v6hem7",
    label: "StyledContentRight"
})("display:flex;align-self:var(", _Buttontokens.tokens.buttonRightContentAlignSelf, ");color:var(", _Buttontokens.tokens.buttonIconColor, ");margin:", function(param) {
    var hasContentMargin = param.hasContentMargin;
    return hasContentMargin ? "var(".concat(_Buttontokens.tokens.buttonRightContentMargin, ")") : 0;
}, ";");
var base = (0, /*#__PURE__*/ _react.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);&&.", String(_Buttontokens.classes.buttonSquare), "{width:var(", _Buttontokens.tokens.buttonHeight, ");padding:0;}", "base");
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(_Buttontokens.classes.buttonSquare), " {\n        width: var(").concat(_Buttontokens.tokens.buttonHeight, ");\n        padding: 0;\n    }\n\n    color: var(").concat(_Buttontokens.tokens.buttonColor, ");\n    background: var(").concat(_Buttontokens.tokens.buttonBackgroundColor, ");\n    box-shadow: inset 0 0 0 0.063rem var(").concat(_Buttontokens.tokens.buttonBorderColor, ", inset 0 0 0 0 transparent);\n\n    @media (hover: hover) and (pointer: fine) {\n        :hover {\n            color: var(").concat(_Buttontokens.tokens.buttonColorHover, ", var(").concat(_Buttontokens.tokens.buttonColor, "));\n            background: var(").concat(_Buttontokens.tokens.buttonBackgroundColorHover, ", var(").concat(_Buttontokens.tokens.buttonBackgroundColor, "));\n            box-shadow: inset 0 0 0 0.063rem var(").concat(_Buttontokens.tokens.buttonBorderColorHover, ", inset 0 0 0 0 transparent);\n\n            scale: var(").concat(_Buttontokens.tokens.buttonScaleHover, ");\n        }\n    }\n\n    :active {\n        color: var(").concat(_Buttontokens.tokens.buttonColorActive, ", var(").concat(_Buttontokens.tokens.buttonColor, "));\n        background: var(").concat(_Buttontokens.tokens.buttonBackgroundColorActive, ", var(").concat(_Buttontokens.tokens.buttonBackgroundColor, "));\n        box-shadow: inset 0 0 0 0.063rem var(").concat(_Buttontokens.tokens.buttonBorderColorActive, ", inset 0 0 0 0 transparent);\n\n        scale: var(").concat(_Buttontokens.tokens.buttonScaleActive, ");\n    }\n\n    height: var(").concat(_Buttontokens.tokens.buttonHeight, ");\n    width: var(").concat(_Buttontokens.tokens.buttonWidth, ");\n\n    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n    padding: 0 var(").concat(_Buttontokens.tokens.buttonPadding, ", calc(var(").concat(_Buttontokens.tokens.buttonHeight, ") * 1.618 / 4));\n\n    font-family: var(").concat(_Buttontokens.tokens.buttonFontFamily, ");\n    font-size: var(").concat(_Buttontokens.tokens.buttonFontSize, ");\n    font-style: var(").concat(_Buttontokens.tokens.buttonFontStyle, ");\n    font-weight: var(").concat(_Buttontokens.tokens.buttonFontWeight, ");\n    letter-spacing: var(").concat(_Buttontokens.tokens.buttonLetterSpacing, ");\n    line-height: var(").concat(_Buttontokens.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((0, _mixins.addFocus)({
    outlineOffset: '-0.125rem',
    outlineSize: 'var(--plasma_private-btn-outline-size)',
    outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
    outlineColor: "var(".concat(_Buttontokens.tokens.buttonFocusColor, ")")
}), "\n\n    &[disabled] {\n        opacity: var(").concat(_Buttontokens.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(_Buttontokens.tokens.buttonColor, ");\n                background: var(").concat(_Buttontokens.tokens.buttonBackgroundColor, ");\n            }\n        }\n    }\n\n    &.").concat(_Buttontokens.classes.fixedStretching, " {\n        width: var(").concat(_Buttontokens.tokens.buttonWidth, ");\n    }\n    &.").concat(_Buttontokens.classes.filledStretching, " {\n        width: 100%;\n    }\n    &.").concat(_Buttontokens.classes.autoStretching, " {\n        width: fit-content;\n    }\n");
