/* https://www.happyhues.co/palettes/6 */
.graphiql-container .topBar {
  background: white;
}
.toolbar > input {
  border-radius: 3px;
  padding: 0px 8px;
  border-color: #d1d1e9;
  border-style: dashed;
}

.toolbar > input:focus-visible {
  border-color: #d1d1e9;
  border-style: solid;
  outline: none;
}
.graphiql-container .toolbar-button {
  background: #d1d1e9;
  box-shadow: none;
  max-width: unset;
}
.graphiql-container .editorWrap {
  overflow: hidden;
}
.graphiql-container .search-box .search-box-clear {
  background: #d1d1e9;
  color: #2b2c34;
}
.graphiql-container .toolbar-button:active {
  background: #d1d1e9;
}
.graphiql-container .execute-button {
  background: #6246ea;
  box-shadow: none;
}
.graphiql-container .execute-button:active {
  background: #6246ea;
}
.graphiql-container .execute-button svg {
  fill: white;
}
.graphiql-container .docExplorerShow,
.graphiql-container .historyShow {
  background: white;
  color: #6246ea;
  box-shadow: none;
}
.graphiql-container .docExplorerShow:before {
  border-left: 2px solid #6246ea;
  border-top: 2px solid #6246ea;
}
.graphiql-container .keyword {
  color: #6246ea;
}
.graphiql-container .type-name {
  color: #e45858;
}
.graphiql-container .execute-options > li.selected,
.graphiql-container .toolbar-menu-items > li.hover,
.graphiql-container .toolbar-menu-items > li:active,
.graphiql-container .toolbar-menu-items > li:hover,
.graphiql-container .toolbar-select-options > li.hover,
.graphiql-container .toolbar-select-options > li:active,
.graphiql-container .toolbar-select-options > li:hover,
.graphiql-container .history-contents > li:hover,
.graphiql-container .history-contents > li:active {
  background: #6246ea;
}
.graphiql-container .footer {
  max-height: 40vh;
}

.graphiql-container .footer .toolbar {
  padding-top: 5px;
  padding-bottom: 5px;
  flex-direction: row-reverse;
  border-bottom: 1px solid #e0e0e0;
}

.footer pre {
  margin-left: 5px;
  width: 0px;
}

.gcms-logo {  
  width: auto; 
  height: 30px; 
  padding-left: 10px; 
  fill: #6246ea;
  background: white; 
}

.footer div {
  max-height: 40vh;
}
.footer .content {
  max-height: 35vh;
  overflow: auto;
}
.footer .full-screen {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  max-height: 100vh;
  max-width: 100vw;
  z-index: 99;
  margin: 0;
  background: #f6f7f8;
}
.footer .full-screen .content {
  max-height: none;
  height: 100%;
}


/* https://www.happyhues.co/palettes/4 */
@media (prefers-color-scheme: dark) {
  .gcms-logo {  
    fill: white;
    background: #16161a; 
  }
  .graphiql-container .topBar {
    background: #16161a;
    color: white;
    border-bottom-color: #72757e;
  }

  .graphiql-container .footer .toolbar {
    border-color: #72757e;
  }

  .graphiql-container .variable-editor-title-text.active {
    color: white;
  }

  .graphiql-container .toolbar-button {
    background: #72757e;
    box-shadow: none;
    color: white;
  }

  .graphiql-container .toolbar-button:active {
    background: #72757e;
  }
  .graphiql-container .execute-button {
    background: #7f5af0;
    box-shadow: none;
  }
  .graphiql-container .execute-button:active {
    background: #7f5af0;
  }
  .graphiql-container .execute-button svg {
    fill: white;
  }
  .graphiql-container .doc-explorer-contents,
  .graphiql-container .history-contents {
    background: #16161a;
    color: white;
    border-top-color: #72757e;
  }
  
  .graphiql-container .doc-explorer {
    background: #16161a;
    color: white;
  }

  input {
    background: #16161a;
    color: white;
  }
  .graphiql-container, .graphiql-container button, .graphiql-container input {
    color: white;
  }
  .graphiql-container .search-box .search-box-clear {
    background: #72757e;
    color: white;
  }

  .result-window .CodeMirror {
    background: #16161a;
    color: white;
  }
  
  .graphiql-container .docExplorerHide {
    color: white;
  }
  .graphiql-container .docExplorerWrap,
  .graphiql-container .historyPaneWrap {
    border-left: 1px solid #72757e;
  }
  .graphiql-container .docExplorerShow,
  .graphiql-container .historyShow {
    background: #16161a;
    color: #7f5af0;
    box-shadow: none;
    border-color: #72757e;
  }
  .graphiql-container .docExplorerWrap,
  .graphiql-container .historyPaneWrap {
    background: #16161a;
    color: white;
  }
  .graphiql-container .docExplorerShow:before {
    border-color: #7f5af0;
  }
  .graphiql-container .doc-explorer-back {
    color: #7f5af0;
  }
  .graphiql-container .doc-explorer-back:before {
    border-color: #7f5af0;
  }
  .graphiql-container .keyword {
    color: #7f5af0;
  }
  .graphiql-container .execute-options > li.selected,
  .graphiql-container .toolbar-menu-items > li.hover,
  .graphiql-container .toolbar-menu-items > li:active,
  .graphiql-container .toolbar-menu-items > li:hover,
  .graphiql-container .toolbar-select-options > li.hover,
  .graphiql-container .toolbar-select-options > li:active,
  .graphiql-container .toolbar-select-options > li:hover,
  .graphiql-container .history-contents > li:hover,
  .graphiql-container .history-contents > li:active {
    background: #7f5af0;
  }
  .graphiql-container .type-name {
    color: #2cb67d;
  }
  .graphiql-container .footer:before {
    background: #16161a;
    border-color: #72757e;
    color: white;
  }
  .graphiql-container .footer {
    background: #16161a;
    border-color: #72757e;
    color: white;
  }

  .graphiql-container .variable-editor-title {
    background: #16161a;
    border-bottom: 1px solid #72757e;
    border-top: 1px solid #72757e;
    color: white;
  }
  .graphiql-container .CodeMirror {
    color: white;
    background: #16161a;
  }
  .result-window .CodeMirror.cm-s-graphiql {
    color: white;
    background: #16161a;
  }
  .CodeMirror-linenumber {
    color: white;
  }
  .CodeMirror-gutters {
    background: #16161a;
    border-color: #72757e;
  }
  .graphiql-container .result-window .CodeMirror-gutters {
    border-color: #72757e;
  }
  .CodeMirror-foldgutter {
    background: #16161a;
  }
  .CodeMirror .CodeMirror-cursor {
    border-left: 1px solid white;
  }
  .graphiql-container .resultWrap {
    border-color: #72757e;
    background: #16161a;
  }
  .graphiql-container .field-name {
    color: #1483ec;
  }
  /* code mirror */
  .cm-property {
    color: #1483ec;
  }
  .cm-punctuation {
    color: white;
  }
  .graphiql-container div.CodeMirror span.CodeMirror-matchingbracket {
    color: #2cb67d;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #16161a;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #7f5af0;
  }
  ::-webkit-scrollbar-corner{
    background: #16161a;
  }
  .graphiql-container .execute-options,
  .graphiql-container .toolbar-menu-items,
  .graphiql-container .toolbar-select-options {
    background: #16161a;
      box-shadow: none;
    border: 1px solid #72757e;
  }
  .toolbar > input {
    border: 1px solid #72757e;
  }

  .CodeMirror-scrollbar-filler {
    background-color: #16161a;
  }

  .footer .full-screen {
    background: #16161a;
  }
}