/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Reset default body margin */
body {
  margin: 0;
}

/* Prevent iOS Safari from auto-zooming when focusing inputs (triggered by font-size < 16px).
   !important is needed to override Mantine's class-based input styles. */
input,
select,
textarea {
  font-size: 16px !important;
}

/* Remove background color from markdown viewer: @uiw/react-markdown-preview */
.wmde-markdown {
  background-color: inherit !important;
}

/*
 * Inertia's <Link> sets `data-loading` on its element during navigation.
 * Mantine Button and ActionIcon use `[data-loading]` to trigger a loader
 * transition. When they use `component={Link}`, the two collide and the
 * content slides/fades on every click. Suppress the animation for anchors.
 */
a[data-loading] :where(.mantine-Button-inner, .mantine-Button-label, .mantine-ActionIcon-icon) {
  transform: none !important;
  opacity: 1 !important;
}
a[data-loading]::before {
  opacity: 0 !important;
  transform: translateY(-100%) !important;
}