/**
 * Tailwind class strings used by more than one component.
 * Kept here so a style change happens in one place.
 */

/** Small pixel-font caption, e.g. "Feels like", "Comfort". */
export const pixelLabel = "font-pixel text-[0.7rem] tracking-[0.03em] text-stone";

/** Gold outlined button that fills in on hover. */
export const outlineButton =
  "min-h-[46px] cursor-pointer whitespace-nowrap border border-gold bg-panel/70 px-2.5 font-pixel text-xs text-gold-bright transition-colors duration-150 " +
  "hover:enabled:bg-gold hover:enabled:text-black disabled:cursor-wait disabled:opacity-60 sm:px-3.5";

/** Gold Cinzel section title used above Conditions, Forecast, Radar, and Waypoints. */
export const sectionHeading = "font-display text-base font-medium tracking-[0.12em] uppercase text-gold sm:text-lg";