/*! PolyFishCSS-Variants.css | v0.22.0 | polyfish.org | MIT
 *
 * State variants without a build step.
 *
 *   <a class="pf-card pf-hover-lift pf-hover-shadow-lg pf-focus-ring">
 *   <button class="pf-btn pf-active-sink">
 *   <p class="pf-hover-lift">Lifts on hover, on devices that can hover</p>
 *
 * GENERATED by tools/gen-variants.py — edit that, not this file. It is the one
 * derived module in the framework, like the minified builds, because it is a
 * cross product, curated: six states, each with only the utilities that
 * make sense on it — nineteen classes in all.
 *
 * WHY
 *   The variant system — hover:, focus:, dark:, group-hover: — is the part of
 *   Tailwind developers most often name as the reason they stay. It usually
 *   comes with a compiler. It does not need one: pf-hover-bg-accent is plain
 *   CSS with a plain :hover. The compiler only generated combinations on
 *   demand, and a curated set covers what people actually reach for.
 *
 * NAMING
 *   pf-<state>-<utility>, the same infix convention the responsive variants
 *   use (pf-md-hidden). One convention across the framework rather than a
 *   colon syntax for some things and an infix for others.
 *
 * WHAT IS NOT HERE
 *   Layout. Nothing changes padding, width or display on hover, because a
 *   layout that moves when the pointer crosses it is a bug with an animation.
 * *
 * Depends on: Core (tokens). Optional. Load after Utilities.
 */
@layer polyfish.core, polyfish.classless, polyfish.headers, polyfish.content, polyfish.forms, polyfish.components, polyfish.footers, polyfish.space, polyfish.effects, polyfish.utilities, polyfish.variants, polyfish.fonts;
@layer polyfish.variants {

  /* Anything carrying a hover, focus or active variant transitions smoothly.
     Inside the reduced-motion guard, so it does not fire when motion is off. */
  @media (prefers-reduced-motion: no-preference) {
    [class*="pf-hover-"],
    [class*="pf-focus-"],
    [class*="pf-active-"],
    [class*="pf-group-hover-"],
    [class*="pf-group-focus-"] { transition-property: background-color, color, border-color, box-shadow, opacity, transform; transition-duration: var(--pf-speed); transition-timing-function: var(--pf-ease); }
  }

  /* hover: Scoped to a device that can hover, so a tap on a phone does not leave the element stuck in its hover state. */
  @media (hover: hover) {
    .pf-hover-bg-surface:hover { background-color: var(--pf-surface-raised); }
    .pf-hover-bg-accent:hover { background-color: var(--pf-accent); color: var(--pf-ink); }
    .pf-hover-fg-accent:hover { color: var(--pf-accent); }
    .pf-hover-border-accent:hover { border-color: var(--pf-accent); }
    .pf-hover-border-strong:hover { border-color: var(--pf-border-strong); }
    .pf-hover-underline:hover { text-decoration-line: underline; text-underline-offset: 0.2em; }
    .pf-hover-shadow-lg:hover { box-shadow: var(--pf-shadow-lg); }
    .pf-hover-lift:hover { transform: translateY(-2px); }
  }

  /* focus: :focus-visible rather than :focus, so a mouse click does not trigger a keyboard affordance. */
  .pf-focus-ring:focus-visible { box-shadow: var(--pf-ring); }

  /* focus-within: The container reacts while anything inside it has focus: a form row, a search field with a button. */
  .pf-focus-within-ring:focus-within { box-shadow: var(--pf-ring); }
  .pf-focus-within-border-accent:focus-within { border-color: var(--pf-accent); }

  /* active: While pressed. Tactile feedback for buttons and cards. */
  .pf-active-sink:active { transform: translateY(1px); }
  .pf-active-scale-down:active { transform: scale(0.97); }

  /* group-hover: A child reacting to its parent's hover. The parent needs .pf-group. */
  @media (hover: hover) {
    .pf-group:hover .pf-group-hover-fg-accent { color: var(--pf-accent); }
    .pf-group:hover .pf-group-hover-fg-text { color: var(--pf-text); }
    .pf-group:hover .pf-group-hover-lift { transform: translateY(-2px); }
  }

  /* group-focus: The keyboard counterpart to group-hover, with the same utilities, so the two always pair. */
  .pf-group:focus-within .pf-group-focus-fg-accent { color: var(--pf-accent); }
  .pf-group:focus-within .pf-group-focus-fg-text { color: var(--pf-text); }
  .pf-group:focus-within .pf-group-focus-lift { transform: translateY(-2px); }
}