.graphiql-container,
.CodeMirror-info,
.CodeMirror-lint-tooltip,
.graphiql-dialog,
.graphiql-dialog-overlay,
.graphiql-tooltip,
[data-radix-popper-content-wrapper] {
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    'Liberation Sans', Helvetica, Arial, system-ui, sans-serif !important;

  --font-family-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono',
    'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono',
    'Courier New', monospace !important;

  *:focus,
  *:focus-visible {
    outline: none !important;
  }
}

.graphiql-container {
  --color-base: var(--card-bg-color) !important;
  --border-radius-12: 4px !important;
  font-size: 13px;
}

.graphiql-sessions {
  border-radius: var(--border-radius-12) !important;
}

.graphiql-editors {
  background-color: var(--card-bg-color) !important;
}

.custom-icon {
  height: 2rem;
  width: 2rem;

  path {
    stroke: hsla(var(--color-neutral), var(--alpha-tertiary));
  }
}

.graphiql-footer-elapsed {
  padding: 16px;
}

.graphiql-tool-wrapper {
  display: flex;
  flex-direction: column;
  outline: 2px solid red;
  height: 100%;
}