/**
 * 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;
}

[vaul-drawer] {
  touch-action: none;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);

  background-color: rgb(244 244 245/1);
  position: fixed;
  backface-visibility: hidden;
  bottom: 0;
  z-index: 100001; /* #wpadminar's z-index of 99999 + 2 */
  width: 100vw;
  height: 90vh;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
  box-sizing: border-box;
}

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

[vaul-drawer][vaul-drawer-visible='true'] {
  transform: translate3d(0, var(--snap-point-height, 0), 0);
}

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

  background-color: rgba(0,0,0,0.4);
  inset: 0;
  position: fixed;
  z-index: 100000; /* #wpadminar's z-index of 99999 + 1 */
}

[vaul-overlay][vaul-drawer-visible='true'] {
  opacity: 1;
}

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

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

[vaul-overlay][vaul-snap-points-overlay='true']:not([vaul-drawer-visible='false']) {
  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) {
  [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 */
body:not(.graphql_page_graphql-ide) {
  top: var(--wp-admin--admin-bar--height) !important;
}

.graphiql-dialog,
.graphiql-dialog-overlay {
  z-index: 100002; /* #wpadminar's z-index of 99999 + 3 */
}

/* Fix popover visibility within drawer */
[data-radix-popper-content-wrapper] {
  z-index: 100002 !important; /* #wpadminar's z-index of 99999 + 3 */
}

.graphiql-dialog-title,
.graphiql-history-header {
  color: hsla(var(--color-neutral),1);
}

/* 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 AppRoot on dedicated IDE page */
body.graphql_page_graphql-ide .AppRoot {
  height: 100%;
}



.graphiql-container .graphiql-editor-tools>button.active {
	background-color: hsla(var(--color-neutral), var(--alpha-background-medium));
}

/** Fix for the CodeMirror info tooltip */
.CodeMirror-info { z-index: 999999; }