"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledNoIcon = exports.StyledIcon = exports.StyledInnerContainer = exports.StyledItem = void 0;
const theme_1 = require("../../../theme");
const useRipple_styled_1 = require("../../../utils/useRipple.styled");
const Icon_1 = require("../../icons/Icon");
const StyledInnerContainer = (0, theme_1.styled)("div", useRipple_styled_1.rippleHostStyles, {
    display: "flex",
    minHeight: (0, theme_1.dimensionsPxToRem)(174),
    alignItems: "center",
    gap: "1rem",
    border: "none",
    background: "none",
    width: "100%",
    textAlign: "left",
    fontFamily: "inherit",
    fontSize: "inherit",
});
exports.StyledInnerContainer = StyledInnerContainer;
const StyledItem = (0, theme_1.styled)("li", {
    "listStyleType": "none",
    "margin": 0,
    "padding": 0,
    "fontSize": (0, theme_1.fontPxToRem)(34),
    "&:not(:first-child)": {
        borderTop: "0.37px solid $headerBorder",
    },
    "> *": {
        display: "block",
        padding: 0,
        textDecoration: "none",
    },
    "variants": {
        inset: {
            true: {
                paddingLeft: (0, theme_1.dimensionsPxToRem)(37),
                paddingRight: (0, theme_1.dimensionsPxToRem)(37),
            },
        },
        selected: {
            true: {
                color: "$mainColor",
            },
        },
    },
});
exports.StyledItem = StyledItem;
const iconStyles = (0, theme_1.css)({
    width: (0, theme_1.pxToRem)(7),
    display: "inline-block",
});
const StyledIcon = (0, theme_1.styled)(Icon_1.Icon, iconStyles);
exports.StyledIcon = StyledIcon;
const StyledNoIcon = (0, theme_1.styled)("span", iconStyles);
exports.StyledNoIcon = StyledNoIcon;
//# sourceMappingURL=Item.styled.js.map