"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledButton = void 0;
const theme_1 = require("../../../theme");
const useRipple_styled_1 = require("../../../utils/useRipple.styled");
const StyledButton = (0, theme_1.styled)("button", useRipple_styled_1.rippleHostStyles, {
    "height": (0, theme_1.dimensionsPxToRem)(118),
    "background": "$green1",
    "border": `${(0, theme_1.borderPxToRem)(1)} solid $green1Darker`,
    "color": "$background",
    "borderRadius": "1000px",
    "display": "flex",
    "alignItems": "center",
    "justifyContent": "center",
    "width": "100%",
    "fontSize": (0, theme_1.fontPxToRem)(26),
    "padding": "0 1em",
    "gap": (0, theme_1.pxToRem)(10),
    "&:disabled": {
        opacity: 0.5,
    },
    "variants": {
        inline: {
            true: {
                width: "auto",
                display: "inline-flex",
            },
        },
        outline: {
            true: {
                background: "$background",
                borderColor: "$buttonBorder",
                color: "$grey1",
            },
        },
    },
});
exports.StyledButton = StyledButton;
//# sourceMappingURL=Button.styled.js.map