import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { styled } from "../../theme";
import { pxToRem } from "../../utils";

const SCROLLBAR_SIZE = pxToRem(4);
const SCROLLBAR_ACTIVE_SIZE = pxToRem(7);

export const StyledRoot = styled(ScrollAreaPrimitive.Root, {
  width: "100%",
  height: "100%",
  overflow: "hidden",
  backgroundColor: "transparent",
});
export const StyledViewport = styled(ScrollAreaPrimitive.Viewport, {
  width: "100%",
  height: "100%",

  "& > div": {
    // force radix not render a table for the viewport child
    display: "flex !important",
    minHeight: "100%",
  },
});
export const StyledScrollbar = styled(ScrollAreaPrimitive.Scrollbar, {
  display: "flex",
  // ensures no selection
  userSelect: "none",
  // disable browser handling of all panning and zooming gestures on touch devices
  touchAction: "none",

  '&[data-orientation="vertical"]': { width: SCROLLBAR_SIZE },
  '&[data-orientation="horizontal"]': {
    flexDirection: "column",
    height: SCROLLBAR_SIZE,
  },

  "&:active": {
    '&[data-orientation="vertical"]': { width: SCROLLBAR_ACTIVE_SIZE },
    '&[data-orientation="horizontal"]': {
      flexDirection: "column",
      height: SCROLLBAR_ACTIVE_SIZE,
    },
  },
});
export const StyledThumb = styled(ScrollAreaPrimitive.Thumb, {
  flex: 1,
  background: "$off-white-18-opaque",
  borderRadius: "$xs",
  right: "$2",

  // increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
  position: "relative",
  "&::before": {
    content: '""',
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: "100%",
    height: "100%",
    minWidth: 44,
    minHeight: 44,
  },
});
export const StyledCorner = styled(ScrollAreaPrimitive.Corner, {});