@import url("https://cdn.jsdelivr.net/npm/altair-static@latest/build/dist/styles.css");

.graphiql-explorer-root {
  font-size: var(--body-font-size) !important;
  font-family: var(--editor-font-family) !important;
}
.graphiql-explorer-root > div {
  overflow: auto !important;
}
.graphiql-explorer-root span svg.lucide > path {
  fill: none !important;
}
.docExplorerWrap {
  min-width: 0px !important;
  width: 100% !important;
  color: var(--theme-font-color);
}
.doc-explorer-title-bar {
  display: none !important;
}
div[id^="query-"] {
  border-bottom-color: var(--theme-border-color) !important;
}
.graphiql-operation-title-bar input {
  width: 82px !important;
}
.graphiql-explorer-graphql-arguments input[type="text"] {
  display: inline-block !important;
}

.toolbar-button {
  border-radius: 4px;
  background-color: var(--theme-off-bg-color) !important;
  font-size: calc((12 / var(--baseline-size)) * 1rem) !important;
  font-weight: 500 !important;
  transition: all 0.3s ease;
  border: 1px solid var(--theme-border-color);
}
.toolbar-button:hover {
  color: var(--primary-color);
}
.toolbar-button ~ .toolbar-button {
  margin-left: 4px !important;
}
.variable-editor-title {
  margin: 0 !important;
  padding: 0 !important;
  border-color: var(--theme-border-color) !important;
}
.variable-editor-title > span {
  font-family: var(--font-family);
}
.graphiql-explorer-actions select {
  background-color: var(--theme-off-bg-color);
  color: var(--theme-font-color);
  border-color: var(--theme-border-color);
  margin: 0 4px;
  border: none;
}