{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hit-area",
  "title": "Hit area",
  "author": "Kian Bazarjani <https://bazza.dev>",
  "description": "Tailwind CSS v4 utilities for expanding interactive hit areas without changing layout.",
  "css": {
    "@utility hit-area-debug": {
      "position": "relative",
      "&::before": {
        "content": "\"\"",
        "position": "absolute",
        "top": "var(--hit-area-t, 0px)",
        "right": "var(--hit-area-r, 0px)",
        "bottom": "var(--hit-area-b, 0px)",
        "left": "var(--hit-area-l, 0px)",
        "pointer-events": "inherit",
        "@apply border border-dashed border-blue-500": {},
        "@apply bg-blue-500/10": {}
      },
      "&:hover::before": {
        "@apply border border-dashed border-green-500": {},
        "@apply bg-green-500/10": {}
      }
    },
    "@utility hit-area": {
      "position": "relative",
      "&::before": {
        "content": "\"\"",
        "position": "absolute",
        "top": "var(--hit-area-t, 0px)",
        "right": "var(--hit-area-r, 0px)",
        "bottom": "var(--hit-area-b, 0px)",
        "left": "var(--hit-area-l, 0px)",
        "pointer-events": "inherit"
      }
    },
    "@utility hit-area-*": {
      "position": "relative",
      "--hit-area-t": "--spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1)",
      "--hit-area-b": "--spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1)",
      "--hit-area-l": "--spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1)",
      "--hit-area-r": "--spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1)",
      "&::before": {
        "content": "\"\"",
        "position": "absolute",
        "top": "var(--hit-area-t, 0px)",
        "right": "var(--hit-area-r, 0px)",
        "bottom": "var(--hit-area-b, 0px)",
        "left": "var(--hit-area-l, 0px)",
        "pointer-events": "inherit"
      }
    },
    "@utility hit-area-l-*": {
      "position": "relative",
      "--hit-area-l": "--spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1)",
      "&::before": {
        "content": "\"\"",
        "position": "absolute",
        "top": "var(--hit-area-t, 0px)",
        "right": "var(--hit-area-r, 0px)",
        "bottom": "var(--hit-area-b, 0px)",
        "left": "var(--hit-area-l, 0px)",
        "pointer-events": "inherit"
      }
    },
    "@utility hit-area-r-*": {
      "position": "relative",
      "--hit-area-r": "--spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1)",
      "&::before": {
        "content": "\"\"",
        "position": "absolute",
        "top": "var(--hit-area-t, 0px)",
        "right": "var(--hit-area-r, 0px)",
        "bottom": "var(--hit-area-b, 0px)",
        "left": "var(--hit-area-l, 0px)",
        "pointer-events": "inherit"
      }
    },
    "@utility hit-area-t-*": {
      "position": "relative",
      "--hit-area-t": "--spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1)",
      "&::before": {
        "content": "\"\"",
        "position": "absolute",
        "top": "var(--hit-area-t, 0px)",
        "right": "var(--hit-area-r, 0px)",
        "bottom": "var(--hit-area-b, 0px)",
        "left": "var(--hit-area-l, 0px)",
        "pointer-events": "inherit"
      }
    },
    "@utility hit-area-b-*": {
      "position": "relative",
      "--hit-area-b": "--spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1)",
      "&::before": {
        "content": "\"\"",
        "position": "absolute",
        "top": "var(--hit-area-t, 0px)",
        "right": "var(--hit-area-r, 0px)",
        "bottom": "var(--hit-area-b, 0px)",
        "left": "var(--hit-area-l, 0px)",
        "pointer-events": "inherit"
      }
    },
    "@utility hit-area-x-*": {
      "position": "relative",
      "--hit-area-l": "--spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1)",
      "--hit-area-r": "--spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1)",
      "&::before": {
        "content": "\"\"",
        "position": "absolute",
        "top": "var(--hit-area-t, 0px)",
        "right": "var(--hit-area-r, 0px)",
        "bottom": "var(--hit-area-b, 0px)",
        "left": "var(--hit-area-l, 0px)",
        "pointer-events": "inherit"
      }
    },
    "@utility hit-area-y-*": {
      "position": "relative",
      "--hit-area-t": "--spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1)",
      "--hit-area-b": "--spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1)",
      "&::before": {
        "content": "\"\"",
        "position": "absolute",
        "top": "var(--hit-area-t, 0px)",
        "right": "var(--hit-area-r, 0px)",
        "bottom": "var(--hit-area-b, 0px)",
        "left": "var(--hit-area-l, 0px)",
        "pointer-events": "inherit"
      }
    }
  },
  "categories": ["accessibility", "tailwind", "utilities", "hit-area"],
  "type": "registry:component"
}