@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;
  }
}