import { pxToRem } from "../utils";
import { colors } from "./colors";
import type { CSS } from "./theme";

const thumbStyle: CSS = {
  "-webkit-box-sizing": "content-box",
  background: "var(--scrollbars-thumb)",
  backgroundClip: "padding-box",
  border: `${pxToRem(8)} solid var(--scrollbars-bg)`,
  borderRadius: "$round",
};

const thumbActive: CSS = {
  background: "var(--scrollbars-thumb)",
  backgroundClip: "padding-box",
  border: `${pxToRem(7)} solid var(--scrollbars-bg)`,
};

const customScrollbars: CSS = {
  "--scrollbars-thumb": colors["off-white-18-opaque"],
  "--scrollbars-thumb-active": colors["off-white-18-opaque"],
  "--scrollbars-bg": "transparent",
  "@supports not (selector(::-webkit-scrollbar))": {
    "scrollbar-color": "var(--scrollbars-thumb) var(--scrollbars-bg)",
    "scrollbar-width": "auto !important",
  },

  "&::-webkit-scrollbar": {
    height: pxToRem(20),
    width: pxToRem(20),
  },
  "&::-webkit-scrollbar-track": {
    my: pxToRem(-6),
  },
  "&::-webkit-scrollbar-thumb:vertical": {
    ...thumbStyle,
    "&:active": {
      ...thumbActive,
    },
  },
  "&::-webkit-scrollbar-thumb:horizontal": {
    ...thumbStyle,
    "&:active": {
      ...thumbActive,
    },
  },
  "&::-webkit-scrollbar-corner": {
    backgroundColor: "transparent",
  },
};

export { customScrollbars };