/** Shared Tailwind class strings for platform modals / buttons. */

export const modalBackdropClass =
  "fixed inset-0 z-20 grid place-items-center bg-[rgb(10_27_45/43%)] backdrop-blur-[2px]";

export const modalPanelClass =
  "modal-panel w-[min(520px,calc(100vw-40px))] overflow-visible rounded-[11px] border border-[#dce4eb] bg-white shadow-xl";

export const modalCompactClass =
  "modal-panel flex max-h-[80vh] w-[min(480px,calc(100vw-40px))] flex-col overflow-visible rounded-[11px] border border-[#dce4eb] bg-white shadow-xl";

export const modalHeaderClass =
  "flex shrink-0 items-center justify-between border-b border-line px-[22px] pb-4 pt-5";

export const modalEyebrowClass =
  "text-[9px] font-extrabold tracking-[0.12em] text-[#2d82d4]";

export const modalTitleClass = "mt-1 text-[19px] text-[#1c2d42]";

export const modalFormClass = "flex-1 overflow-y-auto px-[22px] pt-[19px]";

export const modalFooterClass =
  "mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white rounded-b-[11px] px-[22px] py-3.5";

export const iconButtonClass =
  "grid size-[34px] cursor-pointer place-items-center rounded-[7px] border border-line bg-white hover:border-[#b9c9da] hover:bg-[#f7faff]";

export { primaryGradientButtonClass as primaryButtonClass } from "~/components/common/buttonClasses";

export const secondaryButtonClass =
  "inline-flex min-h-[37px] cursor-pointer items-center justify-center gap-[7px] rounded-md border border-[#d8e1e9] bg-white px-[15px] text-xs font-[650] text-[#56687c]";

export const destinationChipClass =
  "mb-[15px] flex items-center gap-[7px] rounded-md border border-[#dce7ef] bg-[#f7fafc] px-2.5 py-[9px] text-[10px] text-[#587087] [&_svg]:fill-[#f7c84a] [&_svg]:text-[#dda321]";

export const formFieldClass =
  "mb-[17px] flex flex-col gap-[7px] text-xs font-[650] text-[#3c4e62]";

export const formControlClass =
  "w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:ring-3 focus:ring-brand/10";

export const formInputClass = `${formControlClass} h-[39px]`;

export const formTextareaClass =
  `${formControlClass} min-h-[92px] resize-y py-2.5 leading-[1.55]`;

export const formHintClass = "text-[9px] font-normal text-[#98a5b3]";