/*
 * Hit Area Utilities
 *
 * Expand the clickable/tappable area of interactive elements without
 * affecting visual layout. Works by positioning a ::before pseudo-element
 * with negative insets that captures pointer events.
 *
 * Classes:
 *   hit-area-*      — expand all sides uniformly
 *   hit-area-t-*    — expand top
 *   hit-area-b-*    — expand bottom
 *   hit-area-l-*    — expand left
 *   hit-area-r-*    — expand right
 *   hit-area-x-*    — expand left + right
 *   hit-area-y-*    — expand top + bottom
 *   hit-area-debug  — visualize the hit area (dashed border + tinted bg)
 *
 * Values: any Tailwind spacing value (4, 6, 8) or arbitrary ([21px], [3rem]).
 * Classes are composable — combine side-specific utilities to build asymmetric areas.
 *
 * Usage:
 *   <button className="hit-area-6" />
 *   <button className="hit-area-l-4 hit-area-r-8" />
 *   <Checkbox className="hit-area-x-4 hit-area-y-3" />
 *   <button className="hit-area-6 hit-area-debug" />
 *
 * Reference: https://bazza.dev/craft/2026/hit-area
 */

@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 bg-blue-500/10;
  }
  &:hover::before {
    @apply border border-dashed border-green-500 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;
  }
}

/*
 * hit-area-inline-y-*  — vertical hit area for inline spans inside text.
 * Extends vertically by the given spacing value and stretches horizontally
 * to fill the containing block width (via -100vw/100vw insets clipped by
 * the block ancestor's overflow).
 */
@utility hit-area-inline-y-* {
  position: relative;
  --hit-area-inline-t: --spacing(--value(number) * -1);
  --hit-area-inline-t: calc(--value([*]) * -1);
  --hit-area-inline-b: --spacing(--value(number) * -1);
  --hit-area-inline-b: calc(--value([*]) * -1);
  &::before {
    content: "";
    position: absolute;
    top: var(--hit-area-inline-t, 0px);
    bottom: var(--hit-area-inline-b, 0px);
    left: -100vw;
    right: -100vw;
    pointer-events: inherit;
  }
}
