"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Value = exports.Label = exports.Separator = exports.Item = exports.StyledStats = void 0;
const theme_1 = require("../../../theme");
const StyledStats = (0, theme_1.styled)("ul", {
    "--stats-border": "1px solid rgba(255, 255, 255, .15)",
    "--stats-bg": "rgba(255, 255, 255, .05)",
    "--stats-value-color": "rgba(255, 255, 255, .9)",
    "--stats-label-color": "rgba(255, 255, 255, .61)",
    "display": "flex",
    "width": "100%",
    "padding": (0, theme_1.dimensionsPxToRem)(60),
    "margin": "0",
    "borderTop": "var(--stats-border)",
    "background": "var(--stats-bg)",
    "backgroundClip": "padding-box",
    "listStyleType": "none",
    "variants": {
        variant: {
            dark: {
                "--stats-border": "1px solid rgba(0, 0, 0, .15)",
                "--stats-bg": "rgba(0, 0, 0, .05)",
                "--stats-value-color": "rgba(0, 0, 0, .9)",
                "--stats-label-color": "rgba(0, 0, 0, .61)",
            },
        },
    },
});
exports.StyledStats = StyledStats;
const Item = (0, theme_1.styled)("li", {
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    textAlign: "center",
    gap: (0, theme_1.dimensionsPxToRem)(20),
});
exports.Item = Item;
const Separator = (0, theme_1.styled)("li", {
    borderLeft: "var(--stats-border)",
});
exports.Separator = Separator;
const Label = (0, theme_1.styled)("span", {
    display: "block",
    color: "var(--stats-label-color)",
    fontSize: (0, theme_1.fontPxToRem)(22),
});
exports.Label = Label;
const Value = (0, theme_1.styled)("span", {
    display: "block",
    color: "var(--stats-value-color)",
    fontSize: (0, theme_1.fontPxToRem)(30),
});
exports.Value = Value;
//# sourceMappingURL=Stats.styled.js.map