/**
 * Styles for the vaul package.
 *
 * Based on https://raw.githubusercontent.com/emilkowalski/vaul/main/src/style.css
 */


.graphql_page_graphql-ide #wpbody-content > *:not(#wpgraphql-ide-root):not(.wpgraphql-admin-notice) {
	display: none;
}

[data-vaul-drawer] {
  touch-action: none !important;
  /* Let Vaul handle transform and transition for animation */

  background-color: rgb(244 244 245/1) !important;
  position: fixed !important;
  backface-visibility: hidden !important;
  bottom: 0 !important;
  z-index: 999999 !important; /* High z-index to appear above WordPress admin panels */
  width: 100vw !important;
  height: 90vh !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.vaul-dragging .vaul-scrollable {
  overflow-y: hidden !important;
}

/* Don't override transform - let Vaul handle the animation */
[data-vaul-drawer][data-state='open'] {
  /* Vaul handles the transform animation, we just ensure position/fixed */
}

[data-vaul-overlay] {
  opacity: 0 !important;
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;

  background-color: rgba(0,0,0,0.4) !important;
  inset: 0 !important;
  position: fixed !important;
  z-index: 999998 !important; /* Just below drawer, above WordPress admin panels */
}

[data-vaul-overlay][data-state='open'] {
  opacity: 1 !important;
}

[data-vaul-drawer]::after {
  content: '';
  position: absolute;
  top: 100%;
  background: inherit;
  background-color: inherit;
  left: 0;
  right: 0;
  height: 200%;
}

[data-vaul-overlay][data-vaul-snap-points='true']:not([data-vaul-snap-points-overlay='true']):not([data-state='closed']) {
  opacity: 0;
}

[data-vaul-overlay][data-vaul-snap-points-overlay='true']:not([data-state='closed']) {
  opacity: 1;
}

/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
@keyframes fake-animation {
  from {
  }
  to {
  }
}

@media (hover: hover) and (pointer: fine) {
  [data-vaul-drawer] {
    user-select: auto !important; /* !important is needed for text selection within drawer */
  }
}

/* Custom */

#wpgraphql-ide-root .AppDrawerRoot {
  display: block;
}

#wpgraphql-ide-root .AppDrawerButton {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  outline: none;
  cursor: pointer;
  color: inherit;
}

/* Fix layout shift from drawer opening everywhere except the dedicated IDE page */
/* Removed - was causing jump when drawer opens. Vaul handles body scroll locking. */

/* Fix popover/dropdown/modal visibility and interaction within drawer.
   The Modal overlay is included because @wordpress/components portals
   modals to document.body at z-index 100000, which the drawer (999999)
   would otherwise cover — hiding every Modal-based dialog (save,
   confirm/prompt, share, export) in drawer mode. See
   https://github.com/wp-graphql/wp-graphql/issues/4163 */
[data-radix-popper-content-wrapper],
.components-popover,
.components-dropdown-menu__popover,
.components-modal__screen-overlay {
  z-index: 1000000 !important; /* Above drawer */
  pointer-events: auto !important;
}

/* Ensure dropdown menu items are interactive inside drawer */
.components-popover .components-menu-group,
.components-popover .components-menu-item {
  pointer-events: auto !important;
}

/* Align WPGraphQL logo with existing buttons */
.wpgraphql-logo-link {
  display: flex;
}

/* Dedicated IDE page for new editor */

/* Ful-width editor on dedicated page */
body.graphql_page_graphql-ide #wpcontent {
  padding-left: 0;
}

/* Ful-height editor on dedicated page */
body.graphql_page_graphql-ide #wpgraphql-ide-root {
  height: calc(100vh - var(--wp-admin--admin-bar--height));
}

/* Cancel content padding on dedicated IDE page */
body.graphql_page_graphql-ide #wpbody-content {
  padding: 0;
}

/* Remove admin footer on dedicated IDE page */
body.graphql_page_graphql-ide #wpfooter {
  display: none
}

/* Ful-height shell on dedicated IDE page */
body.graphql_page_graphql-ide .wpgraphql-ide-shell {
  height: 100%;
}

/* Theme insulation — scoped to `#wpgraphql-ide-app` and portaled
   `.wpgraphql-ide-dialog`, never `.wpgraphql-ide-shell` (which also
   wraps the WP-admin-bar drawer trigger that must inherit adminbar
   styling). */
.wpgraphql-ide-shell #wpgraphql-ide-app,
.wpgraphql-ide-dialog {
  isolation: isolate;
}

.wpgraphql-ide-shell #wpgraphql-ide-app,
.wpgraphql-ide-shell #wpgraphql-ide-app *,
.wpgraphql-ide-shell #wpgraphql-ide-app *::before,
.wpgraphql-ide-shell #wpgraphql-ide-app *::after,
.wpgraphql-ide-dialog,
.wpgraphql-ide-dialog *,
.wpgraphql-ide-dialog *::before,
.wpgraphql-ide-dialog *::after {
  box-sizing: border-box;
}

/* Theme rules like `button { padding: 12px 24px; font-family: serif }`
   bleed into our chrome because form controls don't inherit `font` by
   default. Force inheritance so our parent typography is honored. */
.wpgraphql-ide-shell #wpgraphql-ide-app :is(button, input, select, textarea),
.wpgraphql-ide-dialog :is(button, input, select, textarea) {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

/* ==========================================================================
   Front-end drawer style isolation
   --------------------------------------------------------------------------
   The drawer renders inside whatever theme the visitor is using, so the
   IDE inherits any global rules the theme set on `body`, `button`, `svg`,
   `img`, etc. We saw two visible regressions on real sites:

   1. Kebab buttons sit a couple pixels above their row because the active
      theme set `button { vertical-align: middle | bottom }` or messed
      with `line-height`. The IDE's component buttons don't override
      vertical-align by themselves, so they pick up whatever the theme
      cascades down.
   2. Emojis render in two visibly different styles in the same drawer:
      wp-emoji replaces unicode emoji with `<img class="emoji">` on
      initial server-rendered DOM, but content rendered later by React
      stays as the native font glyph. Result: a heart from one source
      looks like a flat illustration while a heart from React looks like
      a system emoji.

   Fix both at the drawer + dedicated-page level by re-establishing a
   baseline for text-flow, button alignment, and inline media. Scoped to
   the IDE so theme styles outside the drawer keep working.
   ========================================================================== */

[data-vaul-drawer] #wpgraphql-ide-app,
.wpgraphql-ide-shell #wpgraphql-ide-app,
.wpgraphql-ide-dialog {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 13px;
  line-height: 1.4;
  color: #1e1e1e;
}

/* Themes commonly set `button { vertical-align: bottom | middle }` or
   inflate `line-height`, both of which push the icon a few pixels off
   center and make kebabs look unaligned with the rest of the row. Pin
   buttons inside the IDE to a known baseline. */
[data-vaul-drawer] #wpgraphql-ide-app button,
.wpgraphql-ide-shell #wpgraphql-ide-app button {
  vertical-align: baseline;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
}

[data-vaul-drawer] #wpgraphql-ide-app svg,
.wpgraphql-ide-shell #wpgraphql-ide-app svg {
  vertical-align: middle;
}

/* wp-emoji's `<img class="emoji">` substitution and React's native
   emoji rendering produce two visibly different glyph styles in the
   same drawer (twemoji image vs system font). React owns this subtree
   anyway — wp-emoji's mutations get clobbered on the next render — so
   App.jsx tags the IDE root with WordPress's official opt-out class,
   `wp-exclude-emoji`. wp-emoji's parser checks for that class and
   skips the subtree, so every emoji inside the IDE renders the same
   way (native font). See wp-includes/js/wp-emoji.js. */