import styled, { css } 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
const mergedConfig = mergeConfig(spinnerConfig);
const Spinner = component(mergedConfig);
export const ButtonText = styled.span.withConfig({
    displayName: "Button.styles__ButtonText",
    componentId: "sc-961ea4c5-0"
})([
    `min-width:4ch;&.`,
    `{flex-grow:2;text-align:start;}`,
    ``
], String(classes.contentRelaxed), applyEllipsis());
export const StyledAdditionalContent = styled.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(`,
    `);}`
], tokens.buttonAdditionalContentMargin, String(classes.contentRelaxed), classes.buttonHasValue, tokens.buttonAdditionalContentMarginRightWidthValue);
export const ButtonValue = styled.span.withConfig({
    displayName: "Button.styles__ButtonValue",
    componentId: "sc-961ea4c5-2"
})([
    `min-width:4ch;margin:var(`,
    `);color:var(`,
    `);font-weight:var(`,
    `);`,
    ``
], tokens.buttonValueMargin, tokens.buttonValueColor, tokens.buttonValueFontWeight, applyEllipsis());
// TODO: #720
export const LoadWrap = styled.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);
export const Loader = styled.div.withConfig({
    displayName: "Button.styles__Loader",
    componentId: "sc-961ea4c5-4"
})([
    `position:absolute;`
]);
export const StyledSpinner = styled(Spinner).withConfig({
    displayName: "Button.styles__StyledSpinner",
    componentId: "sc-961ea4c5-5"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
export const StyledContentLeft = styled.div.withConfig({
    displayName: "Button.styles__StyledContentLeft",
    componentId: "sc-961ea4c5-6"
})([
    `display:flex;align-self:var(`,
    `);color:var(`,
    `);margin:`,
    `;`
], tokens.buttonLeftContentAlignSelf, tokens.buttonIconColor, ({ hasContentMargin })=>hasContentMargin ? `var(${tokens.buttonLeftContentMargin})` : 0);
export const StyledContentRight = styled.div.withConfig({
    displayName: "Button.styles__StyledContentRight",
    componentId: "sc-961ea4c5-7"
})([
    `display:flex;align-self:var(`,
    `);color:var(`,
    `);margin:`,
    `;`
], tokens.buttonRightContentAlignSelf, tokens.buttonIconColor, ({ hasContentMargin })=>hasContentMargin ? `var(${tokens.buttonRightContentMargin})` : 0);
export const 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 const baseContent = `
    --box-shadow-spread: var(${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(classes.buttonSquare)} {
        width: var(${tokens.buttonHeight});
        padding: 0;
    }

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

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

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

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

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

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

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

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

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

    :focus-visible {
        outline: none;
    }

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

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

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

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

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