remoraid 2.45.0 → 3.3.2

package/dist/core/index.js

@@ -5756,6 +5756,8 @@ var isIcon = (value) => {
 import { px, rgba, useMantineTheme } from "@mantine/core";
 import {
   IconAlertCircle,
+  IconArrowLeft,
+  IconArrowRight,
   IconCircleCheck,
   IconInfoCircle
 } from "@tabler/icons-react";
@@ -5866,6 +5868,18 @@ var createRemoraidTheme = (customTheme, dependencies) => {
         ["medium" /* Medium */]: { size: 24, stroke: 1.7 },
         ["large" /* Large */]: { size: 28, stroke: 1.7 },
         ["huge" /* Huge */]: { size: 44, stroke: 1.7 }
+      },
+      Scroller: {
+        edgeGradientColor: "transparent",
+        className: "remoraid-masked-scroller",
+        startControlIcon: /* @__PURE__ */ jsx3(IconArrowLeft, {
+          size: "var(--remoraid-icon-size-extraSmall)",
+          stroke: "var(--remoraid-icon-stroke-extraSmall)"
+        }),
+        endControlIcon: /* @__PURE__ */ jsx3(IconArrowRight, {
+          size: "var(--remoraid-icon-size-extraSmall)",
+          stroke: "var(--remoraid-icon-stroke-extraSmall)"
+        })
       }
     }
   };
@@ -5877,7 +5891,8 @@ var getCssVars = (theme) => {
     transitionDurations,
     primaryGutter,
     containerSize,
-    transparentBackground
+    transparentBackground,
+    componentsProps: { icons }
   } = theme;
   return {
     "--mantine-color-body": bodyColor,
@@ -5889,6 +5904,11 @@ var getCssVars = (theme) => {
     ...Object.entries(transitionDurations).reduce((t, [key, value]) => ({
       ...t,
       [`--remoraid-transition-duration-${key}`]: `${value}ms`
+    }), {}),
+    ...Object.entries(icons).reduce((t, [key, { size, stroke }]) => ({
+      ...t,
+      [`--remoraid-icon-size-${key}`]: typeof size === "number" ? `${size}px` : size,
+      [`--remoraid-icon-stroke-${key}`]: `${stroke}`
     }), {})
   };
 };
@@ -6451,7 +6471,7 @@ function FooterMinimal({
     ...componentsProps?.container,
     children: /* @__PURE__ */ jsx13(Center, {
       children: /* @__PURE__ */ jsx13(Icon2, {
-        color: "var(--mantine-color-default-border)",
+        color: "var(--mantine-color-disabled)",
         ...theme.componentsProps.icons.huge,
         ...componentsProps?.icon
       })
@@ -6513,7 +6533,7 @@ var import_lodash8 = __toESM(require_lodash(), 1);
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/NavigationMenu/index.tsx
 import {
   Box as Box2,
-  Menu,
+  Menu as MantineMenu,
   Transition,
   useMantineTheme as useMantineTheme2
 } from "@mantine/core";
@@ -6529,10 +6549,10 @@ function NavigationMenu({
   const mantineTheme = useMantineTheme2();
   const router = useRemoraidRouter();
   const { pathname } = router;
-  const item = (element) => /* @__PURE__ */ jsx15(Transition, {
-    mounted: element.mounted ?? true,
-    ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx15(Menu.Item, {
+  const item = (element, style) => {
+    const isLeaf2 = element.children === undefined || element.children.length === 0;
+    const Menu2 = isLeaf2 ? MantineMenu : MantineMenu.Sub;
+    return /* @__PURE__ */ jsx15(Menu2.Item, {
       leftSection: element.icon ? /* @__PURE__ */ jsx15(element.icon, {
         ...theme.componentsProps.icons.small
       }) : undefined,
@@ -6545,36 +6565,48 @@ function NavigationMenu({
           element.onClick(e);
         }
       },
-      style: transitionStyle,
+      style,
       children: element.label
-    })
-  });
-  const targetElement = isValidElement2(target) ? target : item(target);
-  if (elements === undefined || elements.length === 0) {
-    return targetElement;
-  }
-  return /* @__PURE__ */ jsxs2(Menu, {
-    trigger: "click-hover",
-    ...componentsProps?.Menu,
-    children: [
-      /* @__PURE__ */ jsx15(Menu.Target, {
-        children: /* @__PURE__ */ jsx15(Box2, {
-          children: targetElement
-        })
-      }),
-      /* @__PURE__ */ jsxs2(Menu.Dropdown, {
+    });
+  };
+  const isRoot = isValidElement2(target);
+  const isLeaf = elements === undefined || elements.length === 0;
+  const Menu = isRoot ? MantineMenu : MantineMenu.Sub;
+  const menuProps = isRoot ? { trigger: "click-hover", ...componentsProps?.Menu } : { ...componentsProps?.MenuSub };
+  return /* @__PURE__ */ jsx15(Transition, {
+    mounted: isRoot ? true : target.mounted ?? true,
+    ...componentsProps?.transition,
+    children: (transitionStyle) => {
+      if (isLeaf) {
+        if (isRoot) {
+          return target;
+        }
+        return item(target, transitionStyle);
+      }
+      return /* @__PURE__ */ jsxs2(Menu, {
+        ...menuProps,
         children: [
-          label !== undefined && /* @__PURE__ */ jsx15(Menu.Label, {
-            children: label
+          /* @__PURE__ */ jsx15(Menu.Target, {
+            children: isRoot ? /* @__PURE__ */ jsx15(Box2, {
+              ...componentsProps?.rootTargetContainer,
+              children: target
+            }) : item(target, transitionStyle)
           }),
-          elements.map((element, i) => /* @__PURE__ */ jsx15(NavigationMenu, {
-            target: item(element),
-            elements: element.children,
-            componentsProps
-          }, `navigation-menu-${i}`))
+          /* @__PURE__ */ jsxs2(Menu.Dropdown, {
+            children: [
+              label !== undefined && /* @__PURE__ */ jsx15(MantineMenu.Label, {
+                children: label
+              }),
+              elements.map((element, i) => /* @__PURE__ */ jsx15(NavigationMenu, {
+                target: element,
+                elements: element.children,
+                componentsProps
+              }, `navigation-menu-${i}`))
+            ]
+          })
         ]
-      })
-    ]
+      });
+    }
   });
 }
 
@@ -7378,7 +7410,7 @@ import {
   Chip as Chip2,
   Divider,
   Flex as Flex2,
-  Menu as Menu2,
+  Menu,
   Text,
   useMantineTheme as useMantineTheme3
 } from "@mantine/core";
@@ -7434,25 +7466,30 @@ import { useEffect as useEffect6, useRef as useRef3, useState as useState8 } fro
 import {
   Chip,
   Flex,
-  ScrollArea as ScrollArea3
+  Scroller
 } from "@mantine/core";
+var import_lodash14 = __toESM(require_lodash(), 1);
 import { jsx as jsx26 } from "react/jsx-runtime";
 function ScrollableChipGroup({
   value,
-  ref,
   onChange,
   gap = "xs",
   componentsProps,
   children
 }) {
-  return /* @__PURE__ */ jsx26(ScrollArea3, {
-    ref,
-    ...componentsProps?.ScrollArea,
-    style: { contain: "inline-size", ...componentsProps?.ScrollArea?.style },
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx26(Scroller, {
+    ...theme.componentsProps?.Scroller,
+    ...componentsProps?.Scroller,
+    className: clsx_default("remoraid-masked-scroller", theme.componentsProps?.Scroller?.className, componentsProps?.Scroller?.className),
+    style: import_lodash14.merge({ contain: "inline-size" }, theme.componentsProps?.Scroller?.style, componentsProps?.Scroller?.style),
+    attributes: import_lodash14.merge({
+      container: { "data-remoraid-scroller-container": true }
+    }, theme.componentsProps?.Scroller?.attributes, componentsProps?.Scroller?.attributes),
     children: /* @__PURE__ */ jsx26(Chip.Group, {
       value,
       onChange,
-      ...componentsProps?.chipGroup,
+      ...componentsProps?.ChipGroup,
       multiple: true,
       children: /* @__PURE__ */ jsx26(Flex, {
         justify: "flex-start",
@@ -7467,12 +7504,12 @@ function ScrollableChipGroup({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_lodash14 = __toESM(require_lodash(), 1);
+var import_lodash15 = __toESM(require_lodash(), 1);
 import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
 function WidgetSelectionHeader({
   title,
   pinnableSection = "top" /* Top */,
-  initiallyPinned = true,
+  initiallyPinned: initiallyPinnedProp,
   disabledWidgets,
   componentsProps
 }) {
@@ -7488,6 +7525,7 @@ function WidgetSelectionHeader({
   if (!page) {
     throw new InvalidComponentUsageError("WidgetSelectionHeader", "must be used as child of 'Page'.");
   }
+  const initiallyPinned = pinnableSection ? initiallyPinnedProp ?? true : false;
   const [hover, setHover] = useState8(false);
   const [isPinned, setIsPinned] = useState8(initiallyPinned);
   const handleEnter = () => {
@@ -7496,7 +7534,7 @@ function WidgetSelectionHeader({
   const handleLeave = () => {
     setHover(false);
   };
-  const scrollAreaRef = useRef3(null);
+  const containerRef = useRef3(null);
   const widgets = widgetsContext2.widgets[page.pageId] ?? {};
   const selectedWidgets = Object.entries(widgets).reduce((t, [widgetId, widget]) => widget?.selected ? [...t, widgetId] : t, []);
   const element = /* @__PURE__ */ jsxs8(Flex2, {
@@ -7504,6 +7542,7 @@ function WidgetSelectionHeader({
     align: "center",
     gap: "md",
     ...componentsProps?.container,
+    ref: containerRef,
     onMouseEnter: (e) => {
       if (!pinnableSection) {
         handleEnter();
@@ -7514,13 +7553,14 @@ function WidgetSelectionHeader({
       if (!pinnableSection) {
         handleLeave();
       }
-      componentsProps?.container?.onMouseEnter?.(e);
+      componentsProps?.container?.onMouseLeave?.(e);
     },
     className: clsx_default(!pinnableSection ? "remoraid-non-widget-segment" : undefined, !pinnableSection ? "remoraid-segment" : undefined, componentsProps?.container?.className),
     children: [
       /* @__PURE__ */ jsx27(Text, {
         size: "md",
         ...componentsProps?.title,
+        style: { whiteSpace: "nowrap", ...componentsProps?.title?.style },
         children: title ?? page.name
       }),
       /* @__PURE__ */ jsx27(Divider, {
@@ -7529,22 +7569,26 @@ function WidgetSelectionHeader({
       }),
       isPageRegistered(page.pageId) && /* @__PURE__ */ jsx27(ScrollableChipGroup, {
         value: selectedWidgets,
-        ref: scrollAreaRef,
         ...componentsProps?.ScrollableChipGroup,
         onChange: (value) => {
           updateWidgetSelectionBulk(page.pageId, value);
           componentsProps?.ScrollableChipGroup?.onChange?.(value);
         },
-        componentsProps: import_lodash14.merge({ ScrollArea: { flex: 1 } }, componentsProps?.ScrollableChipGroup?.componentsProps),
+        componentsProps: import_lodash15.merge({
+          Scroller: {
+            flex: 1,
+            miw: 0
+          }
+        }, componentsProps?.ScrollableChipGroup?.componentsProps),
         children: Object.entries(widgets).map(([widgetId, widget]) => {
           if (!widget) {
             return;
           }
-          return /* @__PURE__ */ jsxs8(Menu2, {
+          return /* @__PURE__ */ jsxs8(Menu, {
             trigger: "hover",
             ...componentsProps?.widgetMenu,
             children: [
-              /* @__PURE__ */ jsx27(Menu2.Target, {
+              /* @__PURE__ */ jsx27(Menu.Target, {
                 children: /* @__PURE__ */ jsx27(Box6, {
                   children: /* @__PURE__ */ jsx27(Chip2, {
                     variant: selectedWidgets.includes(widgetId) ? "filled" : "outline",
@@ -7556,19 +7600,22 @@ function WidgetSelectionHeader({
                       ...theme.componentsProps.icons.extraSmall
                     }),
                     ...componentsProps?.Chip,
-                    styles: import_lodash14.merge({
+                    styles: import_lodash15.merge({
                       label: {
                         transition: "background-color var(--remoraid-transition-duration-short)"
                       }
                     }, componentsProps?.Chip?.styles),
-                    id: `remoraid-widget-selection-header-chip-${widgetId}`,
+                    wrapperProps: {
+                      ...componentsProps?.Chip?.wrapperProps,
+                      id: `remoraid-widget-selection-header-chip-${widgetId}`
+                    },
                     children: widget.name
                   })
                 })
               }),
-              /* @__PURE__ */ jsxs8(Menu2.Dropdown, {
+              /* @__PURE__ */ jsxs8(Menu.Dropdown, {
                 children: [
-                  /* @__PURE__ */ jsx27(Menu2.Item, {
+                  /* @__PURE__ */ jsx27(Menu.Item, {
                     leftSection: /* @__PURE__ */ jsx27(IconNavigation, {
                       ...theme.componentsProps.icons.small
                     }),
@@ -7579,7 +7626,7 @@ function WidgetSelectionHeader({
                     disabled: !widget.selected,
                     children: "Scroll to widget"
                   }),
-                  /* @__PURE__ */ jsx27(Menu2.Item, {
+                  /* @__PURE__ */ jsx27(Menu.Item, {
                     leftSection: /* @__PURE__ */ jsx27(IconFocus, {
                       ...theme.componentsProps.icons.small
                     }),
@@ -7602,19 +7649,20 @@ function WidgetSelectionHeader({
     if (!activeWidget) {
       return;
     }
-    if (!isPinned) {
+    if (!containerRef?.current) {
       return;
     }
-    if (!scrollAreaRef?.current) {
+    const activeWidgetChipElement = containerRef.current.querySelector(`#remoraid-widget-selection-header-chip-${activeWidget}`);
+    if (!activeWidgetChipElement) {
       return;
     }
-    const activeWidgetChipElement = scrollAreaRef.current.querySelector(`#remoraid-widget-selection-header-chip-${activeWidget}`);
-    if (!activeWidgetChipElement) {
+    const scrollContainerElement = activeWidgetChipElement.closest("[data-remoraid-scroller-container]");
+    if (!scrollContainerElement) {
       return;
     }
-    activeWidgetChipElement.scrollIntoView({
-      behavior: "smooth",
-      inline: "center"
+    scrollContainerElement.scrollTo({
+      left: activeWidgetChipElement.offsetLeft - scrollContainerElement.clientWidth / 2 + activeWidgetChipElement.clientWidth / 2,
+      behavior: "smooth"
     });
   }, [activeWidget]);
   if (pinnableSection) {
@@ -7708,7 +7756,7 @@ function BadgeMinimal({
 }
 
 // src/core/components/BadgeGroup/index.tsx
-var import_lodash15 = __toESM(require_lodash(), 1);
+var import_lodash16 = __toESM(require_lodash(), 1);
 import { jsx as jsx29, jsxs as jsxs9, Fragment as Fragment2 } from "react/jsx-runtime";
 import { createElement } from "react";
 function BadgeGroup({
@@ -7756,7 +7804,7 @@ function BadgeGroup({
                 ...componentsProps?.cumulativeBadge,
                 style: {
                   cursor: "pointer",
-                  ...import_lodash15.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
+                  ...import_lodash16.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
                 },
                 children: [
                   numVisibleBadges,
@@ -7780,7 +7828,7 @@ function BadgeGroup({
 }
 // src/core/components/AlertMinimal/index.tsx
 import { Alert, Transition as Transition7 } from "@mantine/core";
-var import_lodash16 = __toESM(require_lodash(), 1);
+var import_lodash17 = __toESM(require_lodash(), 1);
 import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
 function AlertMinimal({
   category,
@@ -7797,7 +7845,7 @@ function AlertMinimal({
     icon: Icon4,
     iconSize = "small" /* Small */,
     componentsProps
-  } = import_lodash16.merge({}, theme.componentsProps.alerts[category], props);
+  } = import_lodash17.merge({}, theme.componentsProps.alerts[category], props);
   return /* @__PURE__ */ jsx30(Transition7, {
     mounted,
     transition: "fade",
@@ -7811,10 +7859,10 @@ function AlertMinimal({
       onClose,
       withCloseButton: onClose !== undefined,
       icon: Icon4 ? /* @__PURE__ */ jsx30(Icon4, {
-        ...import_lodash16.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+        ...import_lodash17.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
       }) : undefined,
       ...componentsProps?.alert,
-      style: import_lodash16.merge(transitionStyle, componentsProps?.alert?.style),
+      style: import_lodash17.merge(transitionStyle, componentsProps?.alert?.style),
       children: [
         text,
         children
@@ -7831,7 +7879,7 @@ import {
   useState as useState9
 } from "react";
 import { IconX } from "@tabler/icons-react";
-var import_lodash17 = __toESM(require_lodash(), 1);
+var import_lodash18 = __toESM(require_lodash(), 1);
 import { jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
 function WidgetWrapper({
   config,
@@ -7902,7 +7950,7 @@ function WidgetWrapper({
         handleLeave(e);
         componentsProps?.container?.onMouseLeave?.(e);
       },
-      style: import_lodash17.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
+      style: import_lodash18.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
       className: clsx_default("remoraid-segment", componentsProps?.container?.className),
       id: config.widgetId,
       children: [
@@ -7982,12 +8030,12 @@ import {
   Title,
   Stack as Stack5,
   Box as Box7,
-  ScrollArea as ScrollArea4,
+  ScrollArea as ScrollArea3,
   Transition as Transition9,
   Text as Text2
 } from "@mantine/core";
 import { Children } from "react";
-var import_lodash18 = __toESM(require_lodash(), 1);
+var import_lodash19 = __toESM(require_lodash(), 1);
 import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 function Widget({
@@ -8059,7 +8107,7 @@ function Widget({
                     size: "sm",
                     c: "dimmed",
                     ...componentsProps?.description,
-                    style: import_lodash18.merge(transitionStyle, componentsProps?.description?.style),
+                    style: import_lodash19.merge(transitionStyle, componentsProps?.description?.style),
                     children: description
                   })
                 })
@@ -8100,7 +8148,7 @@ function Widget({
             });
           })
         }),
-        (loading || Children.toArray(children).length > 0) && /* @__PURE__ */ jsx32(ScrollArea4.Autosize, {
+        (loading || Children.toArray(children).length > 0) && /* @__PURE__ */ jsx32(ScrollArea3.Autosize, {
           flex: 1,
           ...componentsProps?.childrenContainer,
           className: clsx_default("remoraid-widget-children-container", componentsProps?.childrenContainer?.className),
@@ -8330,7 +8378,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash19 = __toESM(require_lodash(), 1);
+var import_lodash20 = __toESM(require_lodash(), 1);
 import { Select } from "@mantine/core";
 import { jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultNavbarSettingsWidgetId = "navbar-settings";
@@ -8366,7 +8414,7 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash19.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash20.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsxs15(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
@@ -8424,7 +8472,7 @@ function NavbarSettingsWidget({
   });
 }
 // src/core/components/FooterSettingsWidget/index.tsx
-var import_lodash20 = __toESM(require_lodash(), 1);
+var import_lodash21 = __toESM(require_lodash(), 1);
 import { Select as Select2 } from "@mantine/core";
 import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultFooterSettingsWidgetId = "footer-settings";
@@ -8455,7 +8503,7 @@ function FooterSettingsWidget({
         footer: initialUserExperience.footer
       }));
     },
-    custom: !import_lodash20.isEqual(userExperience.footer, initialUserExperience.footer),
+    custom: !import_lodash21.isEqual(userExperience.footer, initialUserExperience.footer),
     children: /* @__PURE__ */ jsxs16(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
@@ -8540,7 +8588,7 @@ import {
   Box as Box8,
   Input,
   Paper as Paper4,
-  ScrollArea as ScrollArea5
+  ScrollArea as ScrollArea4
 } from "@mantine/core";
 import { useState as useState10 } from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
@@ -8574,7 +8622,7 @@ function InputWrapperScrollArea({
         transition: "border-color .1s",
         borderColor: error ? "var(--mantine-color-error)" : isHovering ? "var(--mantine-primary-color-filled)" : undefined
       },
-      children: /* @__PURE__ */ jsx42(ScrollArea5, {
+      children: /* @__PURE__ */ jsx42(ScrollArea4, {
         mah,
         px: "md",
         flex: 1,

package/dist/core/styles.css

@@ -26,17 +26,17 @@
     --remoraid-frame-layout-gutter
   );
   &:has(
-      > .remoraid-frame-layout-vertical-container
-        > .remoraid-frame-layout-top-section
-        > :not([data-hidden="true"], style)
-    ) {
+    > .remoraid-frame-layout-vertical-container
+      > .remoraid-frame-layout-top-section
+      > :not([data-hidden="true"], style)
+  ) {
     --remoraid-frame-layout-content-section-padding-top: 0;
   }
   &:has(
-      > .remoraid-frame-layout-vertical-container
-        > .remoraid-frame-layout-bottom-section
-        > :not([data-hidden="true"], style)
-    ) {
+    > .remoraid-frame-layout-vertical-container
+      > .remoraid-frame-layout-bottom-section
+      > :not([data-hidden="true"], style)
+  ) {
     --remoraid-frame-layout-content-section-padding-bottom: 0;
   }
 }
@@ -79,14 +79,14 @@
 }
 .remoraid-widget-children-container {
   &:not(
-      :has(
-          > div
-            > .mantine-ScrollArea-root
-            > .mantine-ScrollArea-viewport
-            > div
-            :not([data-hidden="true"], style)
-        )
-    ) {
+    :has(
+      > div
+        > .mantine-ScrollArea-root
+        > .mantine-ScrollArea-viewport
+        > div
+        :not([data-hidden="true"], style)
+    )
+  ) {
     display: none !important;
   }
 }
@@ -120,3 +120,60 @@
     transform: none !important;
   }
 }
+.remoraid-masked-scroller > .mantine-Scroller-container {
+  mask-image: none;
+  -webkit-mask-image: none;
+}
+.remoraid-masked-scroller:has(
+    > .mantine-Scroller-control[data-position="start"]:not([data-hidden])
+  )
+  > .mantine-Scroller-container {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--scroller-control-size),
+    black 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--scroller-control-size),
+    black 100%
+  );
+}
+.remoraid-masked-scroller:has(
+    > .mantine-Scroller-control[data-position="end"]:not([data-hidden])
+  )
+  > .mantine-Scroller-container {
+  mask-image: linear-gradient(
+    to right,
+    black 0,
+    black calc(100% - var(--scroller-control-size)),
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    black 0,
+    black calc(100% - var(--scroller-control-size)),
+    transparent
+  );
+}
+.remoraid-masked-scroller:has(
+    > .mantine-Scroller-control[data-position="start"]:not([data-hidden])
+  ):has(> .mantine-Scroller-control[data-position="end"]:not([data-hidden]))
+  > .mantine-Scroller-container {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--scroller-control-size),
+    black calc(100% - var(--scroller-control-size)),
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--scroller-control-size),
+    black calc(100% - var(--scroller-control-size)),
+    transparent
+  );
+}