/**
 * CloseButton — round dismiss control, pixel-matched to the Figma "CloseButton"
 * (node 2052:109). Sizes 24/32/40/48 = padding space/100·150·200·300 with the
 * cross glyph sized by <Icon> (16/20/24/24), radius/full. States:
 *   • default — transparent/dark/05 (white 5%) fill, icon/secondary
 *   • hover   — + overlay/hover (composites to ≈ white 10%), icon/primary
 *   • focus   — hover fill + 2px border/focus (lime) ring, icon/primary
 *
 * Geometry is driven by CSS vars set per size; the surface/states are tokens-only.
 */

@source "./close-button.tsx";

@utility q-close {
  /* md (32) defaults — overridden by the size utilities below. */
  --q-close-pad: var(--hf-space-150); /* 6px */

  appearance: none;
  background-color: var(--hf-color-overlay-dim-soft); /* transparent/dark/05 = white 5% in dark theme */
  border: var(--hf-border-width-none) solid transparent;
  border-radius: var(--hf-radius-full);
  box-sizing: border-box;
  align-items: center;
  color: var(--hf-color-icon-secondary); /* Figma default state: icon/secondary (brightens to icon/primary on hover/focus) */
  cursor: pointer;
  display: inline-flex;
  flex: none;
  justify-content: center;
  padding: var(--q-close-pad);
  outline: none;
  line-height: 0;
  transition-property: background-color, background-image, color, box-shadow;
  transition-duration: var(--hf-duration-150);
  transition-timing-function: var(--hf-ease-out); /* cubic-bezier(0, 0, 0.2, 1) */
  vertical-align: top;

  /* hover = base fill + overlay/hover layer (composites to ≈ white 10%), theme-safe. */
  &:hover {
    background-image: linear-gradient(var(--hf-color-overlay-hover), var(--hf-color-overlay-hover));
    color: var(--hf-color-icon-primary);
  }

  /* focus = "hover + FocusStrong ring": keep the hover overlay fill and
   * add the border/focus ring drawn inside the fixed 24/32/40/48 frame. */
  &:focus-visible {
    background-image: linear-gradient(var(--hf-color-overlay-hover), var(--hf-color-overlay-hover));
    color: var(--hf-color-icon-primary);
    box-shadow: inset 0 0 0 var(--hf-border-width-thick) var(--hf-color-border-focus);
  }

  &:disabled,
  &[data-disabled] {
    cursor: not-allowed;
    opacity: var(--hf-opacity-disabled);
  }
}

/* Sizes — Figma 24 / 32 / 40 / 48. Icon glyph size is owned by <Icon> (tsx). */
@utility q-close-sm {
  --q-close-pad: var(--hf-space-100); /* 4px  → 24 (icon 16) */
}
@utility q-close-md {
  --q-close-pad: var(--hf-space-150); /* 6px  → 32 (icon 20) */
}
@utility q-close-lg {
  --q-close-pad: var(--hf-space-200); /* 8px  → 40 (icon 24) */
}
@utility q-close-xl {
  --q-close-pad: var(--hf-space-300); /* 12px → 48 (icon 24) */
}

@media (prefers-reduced-motion: reduce) {
  .q-close { transition-duration: 1ms; /* no token: reduced-motion near-zero; --hf-duration-instant is 0ms */ }
}