"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FakeIcon = exports.Icon = exports.Button = exports.ListItem = exports.List = exports.Overlay = void 0;
const theme_1 = require("../../../theme");
const useRipple_styled_1 = require("../../../utils/useRipple.styled");
const Overlay = (0, theme_1.styled)("div", {
    position: "fixed",
    background: "#0000004c",
    inset: 0,
    zIndex: 4,
});
exports.Overlay = Overlay;
const List = (0, theme_1.styled)("ul", {
    zIndex: 5,
    position: "absolute",
    background: "$background",
    margin: 0,
    padding: 0,
    listStyleType: "none",
});
exports.List = List;
const ListItem = (0, theme_1.styled)("li", {
    "margin": 0,
    "padding": 0,
    "listStyleType": "none",
    "& + &": {
        borderTop: "1px solid $border",
    },
});
exports.ListItem = ListItem;
const Button = (0, theme_1.styled)("button", useRipple_styled_1.rippleHostStyles, {
    border: "none",
    background: "$background",
    height: (0, theme_1.dimensionsPxToRem)(116),
    padding: `0 ${(0, theme_1.dimensionsPxToRem)(42)}`,
    boxSizing: "border-box",
    width: "100%",
    minWidth: (0, theme_1.dimensionsPxToRem)(460),
    textAlign: "left",
    color: "$popText",
    fontSize: (0, theme_1.fontPxToRem)(26),
    fontWeight: "revert",
    display: "flex",
    alignItems: "center",
});
exports.Button = Button;
const Icon = (0, theme_1.styled)("div", {
    fill: "currentColor",
    marginRight: (0, theme_1.dimensionsPxToRem)(42),
});
exports.Icon = Icon;
const FakeIcon = (0, theme_1.styled)("span", {
    display: "inline-block",
    width: 16,
    height: 16,
    marginRight: (0, theme_1.dimensionsPxToRem)(42),
});
exports.FakeIcon = FakeIcon;
//# sourceMappingURL=Pop.styled.js.map