"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = exports.Anchor = exports.Badge = exports.StyledAction = void 0;
const theme_1 = require("../../../theme");
const StyledAction = (0, theme_1.styled)("div", {
    height: (0, theme_1.dimensionsPxToRem)(102),
    width: (0, theme_1.dimensionsPxToRem)(102),
    borderRadius: (0, theme_1.dimensionsPxToRem)(102),
    border: `${(0, theme_1.borderPxToRem)(1)} solid $buttonBorder`,
    background: "$background",
    padding: 0,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
});
exports.StyledAction = StyledAction;
const Badge = (0, theme_1.styled)("div", {
    position: "absolute",
    background: "$red1",
    color: "$background",
    fontWeight: "bold",
    top: "-25%",
    right: "-25%",
    overflow: "hidden",
    display: "flex",
    fontSize: (0, theme_1.fontPxToRem)(17),
    padding: (0, theme_1.dimensionsPxToRem)(17),
    width: (0, theme_1.dimensionsPxToRem)(60),
    height: (0, theme_1.dimensionsPxToRem)(60),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: "50%",
});
exports.Badge = Badge;
const sharedCss = {
    display: "inline-flex",
    flexDirection: "column",
    alignItems: "center",
    gap: (0, theme_1.dimensionsPxToRem)(18),
};
const Anchor = (0, theme_1.styled)("a", Object.assign({}, sharedCss));
exports.Anchor = Anchor;
const Button = (0, theme_1.styled)("button", Object.assign(Object.assign({}, sharedCss), { border: "none", padding: 0, background: "none" }));
exports.Button = Button;
//# sourceMappingURL=Action.styled.js.map