"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Icon = exports.Value = exports.Key = exports.KeyValuePair = exports.Item = exports.Container = void 0;
const theme_1 = require("../../../theme");
const item = (0, theme_1.css)({
    display: "inline-flex",
    boxSizing: "border-box",
    padding: "10px",
    alignItems: "center",
    gap: "10px",
    border: "none",
    background: "none",
});
const Container = (0, theme_1.styled)("div", {
    "--kv-border-color": "$colors$headerBorder",
    "--kv-border": `${(0, theme_1.borderPxToRem)(1)} solid var(--kv-border-color)`,
    "--kv-background-color": "$colors$background",
    "--kv-hover-background-color": "$colors$activeBg",
    "border": "1px solid var(--kv-border-color)",
    "backgroundColor": "var(--kv-background-color)",
    "borderRadius": "5px",
    "display": "flex",
    "flexWrap": "wrap",
});
exports.Container = Container;
const Item = (0, theme_1.styled)("div", item, {
    "&:is(button):hover": {
        background: "var(--kv-hover-background-color)",
    },
    "variants": {
        notFirstRow: {
            true: {
                borderTop: "var(--kv-border)",
            },
        },
        notFirstCol: {
            true: {
                borderLeft: "var(--kv-border)",
            },
        },
    },
});
exports.Item = Item;
const KeyValuePair = (0, theme_1.styled)("div", {
    display: "flex",
    flexDirection: "column",
    gap: "3px",
});
exports.KeyValuePair = KeyValuePair;
const Key = (0, theme_1.styled)("div", {
    fontSize: (0, theme_1.fontPxToRem)(22),
    color: "$sub",
});
exports.Key = Key;
const Value = (0, theme_1.styled)("div", {
    fontSize: (0, theme_1.fontPxToRem)(29),
});
exports.Value = Value;
const Icon = (0, theme_1.styled)("div", {
    "--KeyValueStyledIconDummyVar": "0",
});
exports.Icon = Icon;
//# sourceMappingURL=KeyValue.styled.js.map