// Copyright (c) Meta Platforms, Inc. and affiliates.

/* eslint-disable @astryx/no-hover-on-disabled -- Every hover branch is
 * nested beneath ENABLED below. Keeping that shared guard outside the media
 * branch is what gives hover and active matching generated specificity. */

/**
 * @file Shared hover and pressed overlay states
 * @input Uses StyleX and the semantic interaction-overlay color tokens
 * @output Exports reusable background-color and background-image state styles
 * @position Internal styling utility for interactive core surfaces
 *
 * Every surface that paints a press composes one of these (or carries its own
 * `:active` rule), so a change to how the system answers a press is made here
 * once. `pressedBackgroundColor` is the press without the hover, for controls
 * whose hover is a colour or nothing.
 *
 * Keep the enabled guard outside the individual states. StyleX assigns an
 * extra priority bucket (and generated selector specificity) to media-nested
 * rules. Repeating `:active` inside the hover-capable branch gives hover and
 * press the same generated specificity; StyleX's native pseudo-state ordering
 * then emits `:active` last. The bare `:active` branch remains the touch
 * fallback, where `(hover: hover)` does not match.
 */

import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { colorVars } from "../theme/tokens.stylex.js";
const ENABLED = ':where(:not(:disabled,[aria-disabled="true"]))';
const HOVER_HOVER = '@media (hover: hover)';
const hoverImage = `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`;
const pressedImage = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
const neutralImage = `linear-gradient(${colorVars['--color-neutral']}, ${colorVars['--color-neutral']})`;
export const interactionOverlayStyles = {
  backgroundColor: {
    kWkggS: "xjbqb8w x1anq1lc xoevpu5 xprvw0a",
    $$css: true as const
  },
  backgroundImage: {
    kKwaWg: "x7uyq82 xmvprkv xetgvay",
    $$css: true as const
  },
  backgroundImageOnNeutral: {
    kKwaWg: "x14bno8m xzmimnh x1otsd3y xo3fi6e",
    $$css: true as const
  },
  pressedBackgroundColor: {
    kWkggS: "x1anq1lc",
    $$css: true as const
  }
};