"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledToolButton = void 0;
const theme_1 = require("../../../theme");
const useRipple_styled_1 = require("../../../utils/useRipple.styled");
const StyledToolButton = (0, theme_1.styled)("button", useRipple_styled_1.rippleHostStyles, {
    height: (0, theme_1.dimensionsPxToRem)(79),
    borderRadius: (0, theme_1.dimensionsPxToRem)(10),
    fontWeight: "bold",
    fontSize: (0, theme_1.fontPxToRem)(23),
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    paddingInline: (0, theme_1.dimensionsPxToRem)(16),
    background: "white",
    boxSizing: "border-box",
    border: `${(0, theme_1.dimensionsPxToRem)(6)} solid transparent`,
    color: "$toolButtonText",
    variants: {
        inline: {
            true: {
                width: "auto",
                display: "inline-flex",
            },
        },
        variant: {
            secondary: {
                border: `${(0, theme_1.dimensionsPxToRem)(6)} solid #ffffff42`,
                background: "none",
                color: "white",
            },
            secondaryOnLight: {
                "border": `${(0, theme_1.dimensionsPxToRem)(6)} solid $border`,
                "background": "none",
                "color": "$text",
                "&:hover": {
                    borderColor: "$buttonBorder",
                },
            },
        },
    },
});
exports.StyledToolButton = StyledToolButton;
//# sourceMappingURL=ToolButton.styled.js.map