/* Food Picker Components
 *
 * The choice list under the food search box. Rendered by
 * food_select_controller.js, so these class names are referenced from
 * JavaScript as well as from the ERB.
 *
 * Two placements, and they deliberately look like different things:
 *
 *   .food-choices           in the flow, on the log entry form, where the list
 *                           is the standing content of an unanswered field. It
 *                           is built from the same stacked rows the rest of the
 *                           app lists things with (see entry-row in lists.css),
 *                           because that is what it is — a list on a page, not
 *                           a menu that forgot to close.
 *   .food-choices--overlay  floats over the fields below it, on the recipe
 *                           entry form. That one is a menu, so it keeps a
 *                           menu's surface: white, bordered, raised.
 */

@utility food-choices {
  @layer components {
    @apply mt-3 max-h-80 overflow-y-auto space-y-2;
  }
}

/* Back to a surface of its own: this one is lifted above the page. */
@utility food-choices--overlay {
  @layer components {
    @apply absolute z-50 w-full mt-1 max-h-72 p-2 bg-white border border-gray-200 rounded-lg shadow-lg;
  }
}

/* p-3 keeps the 44px touch target the design system asks of every tappable row. */
@utility food-choice {
  @layer components {
    @apply flex justify-between items-center gap-2 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition duration-200;
  }
}

/* The food currently committed to the hidden field. */
@utility food-choice--selected {
  @layer components {
    @apply bg-blue-50 hover:bg-blue-50 ring-1 ring-inset ring-blue-200;
  }
}

/* The escape hatch at the bottom of a search that found nothing. Dashed, the
 * way the design system marks a row that adds something rather than one that
 * already exists — see entry-row--pending, which likewise adds a border to the
 * row's own background rather than replacing it. Leaving the background alone
 * is also what keeps this independent of the order Tailwind emits utilities in. */
@utility food-choice--create {
  @layer components {
    @apply border border-dashed border-blue-300 text-blue-600 hover:bg-blue-50 hover:border-blue-400 hover:border-solid;
  }
}

/* Keyboard cursor — arrow keys move this, independently of what is selected.
 * Defined last so it wins over every other row state, including the dashed
 * create row, which sets a background of its own. */
@utility food-choice--active {
  @layer components {
    @apply bg-blue-100 hover:bg-blue-100;
  }
}

@utility food-choice__name {
  @layer components {
    @apply truncate font-medium text-gray-900;
  }
}

/* "You have eaten this", marked on the row itself — which is what tells a
 * search result apart from the 3,300 catalogue entries around it.
 *
 * Unchanged since the old dropdown, and deliberately: what moved is what fills
 * it. It used to read the `favorite` column, written by a checkbox that no
 * longer exists, so it marked what the user once ticked. It now reads the
 * ever-logged ids, so it marks what they have actually eaten and keeps up on
 * its own. Not the score map, which stops at the ranking's 180-day window:
 * the star would have quietly gone out on a food left alone for a season. */
@utility food-choice__star {
  @layer components {
    @apply shrink-0 text-yellow-500 text-xs;
  }
}

@utility food-choices__empty {
  @layer components {
    @apply px-1 py-2 text-sm text-gray-500;
  }
}