/* Force vite-plugin-checker overlay to be FULL SCREEN */
/* TypeScript errors break HMR - this must be IMPOSSIBLE TO MISS */

#vite-plugin-checker-error-overlay,
[id^="vite-plugin-checker"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 20px !important;
  background: rgb(20 20 20 / 98%) !important;
  overflow: auto !important;
}

/* Make the error content full-screen too */
#vite-plugin-checker-error-overlay > div,
[id^="vite-plugin-checker"] > div {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
}

/* Make errors more visible */
#vite-plugin-checker-error-overlay pre,
[id^="vite-plugin-checker"] pre {
  background: rgb(40 0 0 / 50%) !important;
  border-left: 4px solid #f55 !important;
  padding: 12px !important;
  margin: 8px 0 !important;
  font-size: 14px !important;
  line-height: var(--line-height-normal) !important;
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
}

/* Style the close button */
#vite-plugin-checker-error-overlay button,
[id^="vite-plugin-checker"] button {
  background: #f55 !important;
  color: white !important;
  border: none !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  border-radius: 4px !important;
}

#vite-plugin-checker-error-overlay button:hover,
[id^="vite-plugin-checker"] button:hover {
  background: #f33 !important;
}