"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 _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
const _mixins = require("../../mixins");
const _engines = require("../../engines");
const _Spinner = require("../Spinner");
const _Buttontokens = require("./Button.tokens");
function _getRequireWildcardCache(nodeInterop) {
    if (typeof WeakMap !== "function") return null;
    var cacheBabelInterop = new WeakMap();
    var cacheNodeInterop = new WeakMap();
    return (_getRequireWildcardCache = function(nodeInterop) {
        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
    })(nodeInterop);
}
function _interop_require_wildcard(obj, nodeInterop) {
    if (!nodeInterop && obj && obj.__esModule) {
        return obj;
    }
    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
        return {
            default: obj
        };
    }
    var cache = _getRequireWildcardCache(nodeInterop);
    if (cache && cache.has(obj)) {
        return cache.get(obj);
    }
    var newObj = {
        __proto__: null
    };
    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
    for(var key in obj){
        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
            if (desc && (desc.get || desc.set)) {
                Object.defineProperty(newObj, key, desc);
            } else {
                newObj[key] = obj[key];
            }
        }
    }
    newObj.default = obj;
    if (cache) {
        cache.set(obj, newObj);
    }
    return newObj;
}
// issue #823
const mergedConfig = (0, _engines.mergeConfig)(_Spinner.spinnerConfig);
const Spinner = (0, _engines.component)(mergedConfig);
const ButtonText = _styledcomponents.default.span.withConfig({
    displayName: "Button.styles__ButtonText",
    componentId: "sc-961ea4c5-0"
})([
    `min-width:4ch;&.`,
    `{flex-grow:2;text-align:start;}`,
    ``
], String(_Buttontokens.classes.contentRelaxed), (0, _mixins.applyEllipsis)());
const StyledAdditionalContent = _styledcomponents.default.div.withConfig({
    displayName: "Button.styles__StyledAdditionalContent",
    componentId: "sc-961ea4c5-1"
})([
    `display:flex;align-items:center;margin:var(`,
    `);&.`,
    `{text-align:start;flex-grow:2;}&.`,
    `{margin-right:var(`,
    `);}`
], _Buttontokens.tokens.buttonAdditionalContentMargin, String(_Buttontokens.classes.contentRelaxed), _Buttontokens.classes.buttonHasValue, _Buttontokens.tokens.buttonAdditionalContentMarginRightWidthValue);
const ButtonValue = _styledcomponents.default.span.withConfig({
    displayName: "Button.styles__ButtonValue",
    componentId: "sc-961ea4c5-2"
})([
    `min-width:4ch;margin:var(`,
    `);color:var(`,
    `);font-weight:var(`,
    `);`,
    ``
], _Buttontokens.tokens.buttonValueMargin, _Buttontokens.tokens.buttonValueColor, _Buttontokens.tokens.buttonValueFontWeight, (0, _mixins.applyEllipsis)());
const LoadWrap = _styledcomponents.default.div.withConfig({
    displayName: "Button.styles__LoadWrap",
    componentId: "sc-961ea4c5-3"
})([
    `opacity:`,
    `;display:flex;align-items:inherit;justify-content:`,
    `;height:100%;width:100%;`
], ({ isLoading })=>isLoading ? '0' : '1', ({ contentPlacing })=>contentPlacing);
const Loader = _styledcomponents.default.div.withConfig({
    displayName: "Button.styles__Loader",
    componentId: "sc-961ea4c5-4"
})([
    `position:absolute;`
]);
const StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
    displayName: "Button.styles__StyledSpinner",
    componentId: "sc-961ea4c5-5"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], _Spinner.spinnerTokens.size, _Buttontokens.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Buttontokens.tokens.buttonSpinnerColor);
const StyledContentLeft = _styledcomponents.default.div.withConfig({
    displayName: "Button.styles__StyledContentLeft",
    componentId: "sc-961ea4c5-6"
})([
    `display:flex;align-self:var(`,
    `);color:var(`,
    `);margin:`,
    `;`
], _Buttontokens.tokens.buttonLeftContentAlignSelf, _Buttontokens.tokens.buttonIconColor, ({ hasContentMargin })=>hasContentMargin ? `var(${_Buttontokens.tokens.buttonLeftContentMargin})` : 0);
const StyledContentRight = _styledcomponents.default.div.withConfig({
    displayName: "Button.styles__StyledContentRight",
    componentId: "sc-961ea4c5-7"
})([
    `display:flex;align-self:var(`,
    `);color:var(`,
    `);margin:`,
    `;`
], _Buttontokens.tokens.buttonRightContentAlignSelf, _Buttontokens.tokens.buttonIconColor, ({ hasContentMargin })=>hasContentMargin ? `var(${_Buttontokens.tokens.buttonRightContentMargin})` : 0);
const base = (0, _styledcomponents.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(_Buttontokens.classes.buttonSquare), _Buttontokens.tokens.buttonHeight);
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;
    }
`;
