import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from "../../../../../utils/css";
import { ChevronLeft, ChevronRight } from "lucide-react";
export const TickerMask = (props)=>{
    if (!props.visible) return null;
    const icon = props.tailing ? // @ts-ignore
    /*#__PURE__*/ _jsx(ChevronRight, {
        className: "orderly-text-base-contrast-54 hover:orderly-text-base-contrast-80"
    }) : // @ts-ignore
    /*#__PURE__*/ _jsx(ChevronLeft, {
        className: "orderly-text-base-contrast-54 hover:orderly-text-base-contrast-80"
    });
    return /*#__PURE__*/ _jsx("button", {
        onClick: ()=>{
            props.onClick?.(props.leading ? "left" : "right");
        },
        className: cn("orderly-absolute orderly-top-0 orderly-bottom-0 orderly-w-[70px] orderly-flex orderly-items-center", {
            "orderly-left-0 orderly-bg-gradient-to-r orderly-from-[10%] orderly-from-base-900 orderly-to-base-900/10  orderly-pl-1": props.leading,
            "orderly-right-0 orderly-bg-gradient-to-r orderly-from-base-900/10 orderly-to-[70%] orderly-to-base-900 orderly-justify-end orderly-pr-1": props.tailing
        }),
        children: icon
    });
};

//# sourceMappingURL=tickerMask.js.map