/**
 * Shared Tailwind class strings for the media-viewer chrome buttons, reused by
 * `ViewerShell` (close), `DownloadAction`, and `CarouselNav` so every
 * viewer-chrome button stays visually consistent without duplicating the
 * utility list. The lightbox `<dialog>` root itself still lives in
 * `styles.css` (`.mes-media-viewer`) because `::backdrop` / `@starting-style`
 * can't be expressed in Tailwind.
 */

/** Circular 40px icon button — close action, download action, etc. */
export const VIEWER_ACTION_CLASS =
  'inline-flex size-10 items-center justify-center rounded-full border-0 bg-white/[0.12] p-0 text-white transition-colors duration-150 ease-[ease] hover:bg-white/[0.22] focus-visible:bg-white/[0.22] focus-visible:outline-none disabled:cursor-default disabled:opacity-40'

/** Circular 48px carousel prev/next button, mid-height against the dialog. */
export const VIEWER_NAV_CLASS =
  'absolute top-1/2 z-[1] inline-flex size-12 -translate-y-1/2 items-center justify-center rounded-full border-0 bg-white/[0.12] p-0 text-white transition-colors duration-150 ease-[ease] hover:bg-white/[0.22] focus-visible:bg-white/[0.22] focus-visible:outline-none'