"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Wrapper = exports.Root = exports.Arrow = void 0;
const react_1 = require("@stitches/react");
const theme_1 = require("../../../theme");
const nudgeRight = (0, react_1.keyframes)({
    "0%, 100%": { transform: "translateX(0)" },
    "50%": { transform: "translateX(3px)" },
});
const nudgeLeft = (0, react_1.keyframes)({
    "0%, 100%": { transform: "translateX(0)" },
    "50%": { transform: "translateX(-3px)" },
});
const Root = (0, react_1.styled)("div", {
    "--selector-text": "$colors$selectorText",
    "--selector-active": "$colors$selectorActive",
    "display": "flex",
    "flex": 1,
    "justifyContent": "center",
    "gap": (0, theme_1.dimensionsPxToRem)(114),
    "variants": {
        multiLine: {
            true: {
                flexWrap: "wrap",
                rowGap: (0, theme_1.dimensionsPxToRem)(60),
            },
            false: {
                "flexWrap": "nowrap",
                "overflowX": "auto",
                "scrollbarWidth": "none",
                "justifyContent": "flex-start",
                "paddingRight": (0, theme_1.dimensionsPxToRem)(60),
                "&::-webkit-scrollbar": {
                    display: "none",
                },
            },
        },
    },
});
exports.Root = Root;
const Wrapper = (0, react_1.styled)("div", {
    position: "relative",
    display: "flex",
    flex: 1,
    overflow: "hidden",
});
exports.Wrapper = Wrapper;
const Arrow = (0, react_1.styled)("div", {
    position: "absolute",
    top: 0,
    bottom: 0,
    display: "flex",
    alignItems: "center",
    pointerEvents: "none",
    fontSize: (0, theme_1.fontPxToRem)(29),
    color: "var(--selector-text)",
    opacity: 0,
    transition: "opacity 0.2s ease",
    variants: {
        side: {
            right: {
                right: 0,
                paddingRight: (0, theme_1.dimensionsPxToRem)(12),
                animation: `${String(nudgeRight)} 1.5s ease-in-out 0.5s 2`,
            },
            left: {
                left: 0,
                paddingLeft: (0, theme_1.dimensionsPxToRem)(12),
                animation: `${String(nudgeLeft)} 1.5s ease-in-out 0.5s 2`,
            },
        },
        visible: {
            true: {
                opacity: 0.65,
            },
        },
    },
});
exports.Arrow = Arrow;
//# sourceMappingURL=Selector.styled.js.map