"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;
    }
});
const _styled = /*#__PURE__*/ _interop_require_default(require("@emotion/styled"));
const _react = require("@emotion/react");
const _mixins = require("../../mixins");
const _engines = require("../../engines");
const _Spinner = require("../Spinner");
const _Buttontokens = require("./Button.tokens");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
// issue #823
const mergedConfig = (0, _engines.mergeConfig)(_Spinner.spinnerConfig);
const Spinner = (0, _engines.component)(mergedConfig);
const ButtonText = (0, /*#__PURE__*/ _styled.default)("span", {
    target: "e1614kun0",
    label: "ButtonText"
})("min-width:4ch;&.", String(_Buttontokens.classes.contentRelaxed), "{flex-grow:2;text-align:start;}", (0, _mixins.applyEllipsis)());
const StyledAdditionalContent = (0, /*#__PURE__*/ _styled.default)("div", {
    target: "e1614kun1",
    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, ");}");
const ButtonValue = (0, /*#__PURE__*/ _styled.default)("span", {
    target: "e1614kun2",
    label: "ButtonValue"
})("min-width:4ch;margin:var(", _Buttontokens.tokens.buttonValueMargin, ");color:var(", _Buttontokens.tokens.buttonValueColor, ");font-weight:var(", _Buttontokens.tokens.buttonValueFontWeight, ");", (0, _mixins.applyEllipsis)());
const LoadWrap = (0, /*#__PURE__*/ _styled.default)("div", {
    target: "e1614kun3",
    label: "LoadWrap"
})("opacity:", ({ isLoading })=>isLoading ? '0' : '1', ";display:flex;align-items:inherit;justify-content:", ({ contentPlacing })=>contentPlacing, ";height:100%;width:100%;");
const Loader = (0, /*#__PURE__*/ _styled.default)("div", {
    target: "e1614kun4",
    label: "Loader"
})("position:absolute;");
const StyledSpinner = /*#__PURE__*/ (0, _styled.default)(Spinner, {
    target: "e1614kun5",
    label: "StyledSpinner"
})(_Spinner.spinnerTokens.size, ":var(", _Buttontokens.tokens.buttonSpinnerSize, ");", _Spinner.spinnerTokens.color, ":var(", _Buttontokens.tokens.buttonSpinnerColor, ");");
const StyledContentLeft = (0, /*#__PURE__*/ _styled.default)("div", {
    target: "e1614kun6",
    label: "StyledContentLeft"
})("display:flex;align-self:var(", _Buttontokens.tokens.buttonLeftContentAlignSelf, ");color:var(", _Buttontokens.tokens.buttonIconColor, ");margin:", ({ hasContentMargin })=>hasContentMargin ? `var(${_Buttontokens.tokens.buttonLeftContentMargin})` : 0, ";");
const StyledContentRight = (0, /*#__PURE__*/ _styled.default)("div", {
    target: "e1614kun7",
    label: "StyledContentRight"
})("display:flex;align-self:var(", _Buttontokens.tokens.buttonRightContentAlignSelf, ");color:var(", _Buttontokens.tokens.buttonIconColor, ");margin:", ({ hasContentMargin })=>hasContentMargin ? `var(${_Buttontokens.tokens.buttonRightContentMargin})` : 0, ";");
const 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");
const baseContent = `
    --box-shadow-spread: var(${_Buttontokens.tokens.buttonBorderWidth}, 0.063rem);

    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;
    }

    /* NOTE:
        --plasma_computed-btn-br-radius is defined in Button.tsx
    */
    --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;
    }

    color: var(${_Buttontokens.tokens.buttonColor});
    background: var(${_Buttontokens.tokens.buttonBackgroundColor});
    box-shadow: inset 0 0 0 var(--box-shadow-spread) var(${_Buttontokens.tokens.buttonBorderColor}, inset 0 0 0 0 transparent);

    @media (hover: hover) and (pointer: fine) {
        :hover {
            color: var(${_Buttontokens.tokens.buttonColorHover}, var(${_Buttontokens.tokens.buttonColor}));
            background: var(${_Buttontokens.tokens.buttonBackgroundColorHover}, var(${_Buttontokens.tokens.buttonBackgroundColor}));
            box-shadow: inset 0 0 0 var(--box-shadow-spread) var(${_Buttontokens.tokens.buttonBorderColorHover}, inset 0 0 0 0 transparent);

            scale: var(${_Buttontokens.tokens.buttonScaleHover});
        }
    }

    :active {
        color: var(${_Buttontokens.tokens.buttonColorActive}, var(${_Buttontokens.tokens.buttonColor}));
        background: var(${_Buttontokens.tokens.buttonBackgroundColorActive}, var(${_Buttontokens.tokens.buttonBackgroundColor}));
        box-shadow: inset 0 0 0 var(--box-shadow-spread) var(${_Buttontokens.tokens.buttonBorderColorActive}, inset 0 0 0 0 transparent);

        scale: var(${_Buttontokens.tokens.buttonScaleActive});
    }

    height: var(${_Buttontokens.tokens.buttonHeight});
    width: var(${_Buttontokens.tokens.buttonWidth});

    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */
    padding: 0 var(${_Buttontokens.tokens.buttonPadding}, calc(var(${_Buttontokens.tokens.buttonHeight}) * 1.618 / 4));

    font-family: var(${_Buttontokens.tokens.buttonFontFamily});
    font-size: var(${_Buttontokens.tokens.buttonFontSize});
    font-style: var(${_Buttontokens.tokens.buttonFontStyle});
    font-weight: var(${_Buttontokens.tokens.buttonFontWeight});
    letter-spacing: var(${_Buttontokens.tokens.buttonLetterSpacing});
    line-height: var(${_Buttontokens.tokens.buttonLineHeight});

    /* TODO: #710 make it token API ? */
    --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);

    :focus-visible {
        outline: none;
    }

    ${(0, _mixins.addFocus)({
    outlineOffset: '0.125rem',
    outlineSize: 'var(--plasma_private-btn-outline-size)',
    outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
    outlineColor: `var(${_Buttontokens.tokens.buttonFocusColor})`
})}

    &[disabled] {
        opacity: var(${_Buttontokens.tokens.buttonDisabledOpacity});
        cursor: not-allowed;

        @media (hover: hover) and (pointer: fine) {
            :hover,
            :active {
                scale: none;

                color: var(${_Buttontokens.tokens.buttonColor});
                background: var(${_Buttontokens.tokens.buttonBackgroundColor});
            }
        }
    }

    &.${_Buttontokens.classes.fixedStretching} {
        width: var(${_Buttontokens.tokens.buttonWidth});
    }
    &.${_Buttontokens.classes.filledStretching} {
        width: 100%;
    }
    &.${_Buttontokens.classes.autoStretching} {
        width: fit-content;
    }
`;
