/**
 * A row in a list on a raised plate (a Box with p-1.5), at the plate radius so it nests concentrically
 * in the card (24px − 6px = 18px). Parted from the row above by an engraved hairline (inset, so it
 * clears the row radius), lifting on hover, when the hairlines on either side step aside. Put it on
 * sibling `<li>`s (or any siblings of one tag); the first has no rule.
 */
export const liftRowClass =
  "relative rounded-plate transition-[background,box-shadow] duration-150 hover:recipe-row-list-hover focus-within:recipe-row-list-hover " +
  "before:pointer-events-none before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-rule first:before:hidden " +
  "hover:before:opacity-0 focus-within:before:opacity-0 [&:hover+*]:before:opacity-0 [&:focus-within+*]:before:opacity-0";

/** An engraved heading inside a plate, above its rows. */
export const plateHeadingClass = "flex items-center gap-2 px-3 pt-2 pb-2.5 type-label engraved";

/** MetalUI's ghost IconButton look, for an icon-only control that navigates (a Link). Give it an aria-label and a Tooltip. */
export const ghostIconLinkClass =
  "mu-icon-trigger relative box-border inline-grid flex-none place-items-center size-icon-button-ghost-size rounded-pill text-icon-button-ghost-ink transition-icon-button [&>svg]:size-icon-button-ghost-glyph hover:recipe-icon-button-ghost-hover hover:text-icon-button-ghost-ink-hover focus-visible:focus-ring-flush";