/* =============================================================================
 *  GooeyButton — transparent hit area over the pill region.
 *
 *  The visual pill is drawn by the <GooeyMorphingSurface> primitive; this
 *  layer is a single button that captures clicks in both open and closed
 *  states without painting anything. All layout math comes from the
 *  primitive's CSS custom props (--gms-pill-w, --gms-pill-h).
 * ============================================================================= */

.gbtn-host {
	position: relative;
	display: inline-block;
}

.gbtn-trigger {
	position: absolute;
	top: 0;
	/* Follow the pill's computed X (which honours `pillOffsetX`) instead of
	 * centring the hit-area in the host. Centring worked only while
	 * `pillOffsetX === 0`; any non-zero offset drifted the visual pill away
	 * from the invisible trigger. See `GooeyButton/index.tsx` — the host
	 * exposes `--gms-pill-x` identical to the primitive's internal value. */
	left: var(--gms-pill-x);
	z-index: 3;
	width: var(--gms-pill-w);
	height: var(--gms-pill-h);
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	color: inherit;
	/* Pill-shaped focus ring. */
	border-radius: 9999px;
}

.gbtn-trigger:focus-visible {
	outline: 2px solid var(--ring, currentColor);
	outline-offset: 2px;
}

.gbtn-trigger:disabled {
	cursor: not-allowed;
	pointer-events: none;
}