import { _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsx } from 'react/jsx-runtime';
import { styled } from '@mui/material/styles';
import Button from './Button.js';
import 'react';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import '../theme/colors.js';

var CardRoot = styled(Button)(function (_a) {
    var _b;
    var $active = _a.$active, theme = _a.theme;
    var initialBoxShadow = " \n    ".concat(theme.boxShadow.md, ", \n    inset 0 0 0 ").concat(theme.borders.size.secondary, "px ").concat(theme.palette.gray[300], "\n  ");
    var activeBoxShadow = " \n    ".concat(theme.boxShadow.md, ", \n    inset 0 0 0 ").concat(theme.borders.size.secondary, "px ").concat(theme.palette.primary.main, "\n  ");
    return {
        "&.MuiButton-outlined": (_b = {
                color: theme.palette.text.primary,
                padding: theme.spacing(2, 2.5),
                borderRadius: theme.borders.radius.sm,
                boxShadow: $active ? activeBoxShadow : initialBoxShadow,
                transition: theme.transitions.create(["box-shadow"]),
                fontWeight: theme.typography.fontWeightMedium,
                "&:hover, &:focus, &:active": {
                    backgroundColor: "transparent"
                }
            },
            _b[theme.breakpoints.down("sm")] = {
                padding: theme.spacing(1.5, 2),
                borderRadius: theme.borders.radius.xs1,
                backgroundColor: $active ? theme.palette.gray.white : theme.palette.gray[100],
                "&:hover, &:focus, &:active": {
                    backgroundColor: $active ? theme.palette.gray.white : theme.palette.gray[100]
                }
            },
            _b)
    };
});
var CardButton = function (_a) {
    var active = _a.active, children = _a.children, buttonProps = _a.buttonProps;
    return (jsx(CardRoot, __assign({ align: "left" }, buttonProps, { variant: "outlined", "$active": active }, { children: children }), void 0));
};

export { CardButton as default };
