graphiql-rails 1.10.2 → 1.10.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -339,7 +339,2012 @@
339
339
  /*!********************************************************************************************!*\
340
340
  !*** css ../../../node_modules/css-loader/dist/cjs.js!../../graphiql-react/dist/style.css ***!
341
341
  \********************************************************************************************/
342
- .graphiql-container *{box-sizing:border-box;font-variant-ligatures:none}.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,.graphiql-dialog,.graphiql-dialog-overlay,.graphiql-tooltip,[data-radix-popper-content-wrapper]{--color-primary: 320, 95%, 43%;--color-secondary: 242, 51%, 61%;--color-tertiary: 188, 100%, 36%;--color-info: 208, 100%, 46%;--color-success: 158, 60%, 42%;--color-warning: 36, 100%, 41%;--color-error: 13, 93%, 58%;--color-neutral: 219, 28%, 32%;--color-base: 219, 28%, 100%;--alpha-secondary: .76;--alpha-tertiary: .5;--alpha-background-heavy: .15;--alpha-background-medium: .1;--alpha-background-light: .07;--font-family: "Roboto", sans-serif;--font-family-mono: "Fira Code", monospace;--font-size-hint:.75rem;--font-size-inline-code:.8125rem;--font-size-body:.9375rem;--font-size-h4:1.125rem;--font-size-h3:1.375rem;--font-size-h2:1.8125rem;--font-weight-regular: 400;--font-weight-medium: 500;--line-height: 1.5;--px-2: 2px;--px-4: 4px;--px-6: 6px;--px-8: 8px;--px-10: 10px;--px-12: 12px;--px-16: 16px;--px-20: 20px;--px-24: 24px;--border-radius-2: 2px;--border-radius-4: 4px;--border-radius-8: 8px;--border-radius-12: 12px;--popover-box-shadow: 0px 6px 20px rgba(59, 76, 106, .13), 0px 1.34018px 4.46726px rgba(59, 76, 106, .0774939), 0px .399006px 1.33002px rgba(59, 76, 106, .0525061);--popover-border: none;--sidebar-width: 60px;--toolbar-width: 40px;--session-header-height: 51px}@media (prefers-color-scheme: dark){body:not(.graphiql-light) .graphiql-container,body:not(.graphiql-light) .CodeMirror-info,body:not(.graphiql-light) .CodeMirror-lint-tooltip,body:not(.graphiql-light) .graphiql-dialog,body:not(.graphiql-light) .graphiql-dialog-overlay,body:not(.graphiql-light) .graphiql-tooltip,body:not(.graphiql-light) [data-radix-popper-content-wrapper]{--color-primary: 338, 100%, 67%;--color-secondary: 243, 100%, 77%;--color-tertiary: 188, 100%, 44%;--color-info: 208, 100%, 72%;--color-success: 158, 100%, 42%;--color-warning: 30, 100%, 80%;--color-error: 13, 100%, 58%;--color-neutral: 219, 29%, 78%;--color-base: 219, 29%, 18%;--popover-box-shadow: none;--popover-border: 1px solid hsl(var(--color-neutral))}}body.graphiql-dark .graphiql-container,body.graphiql-dark .CodeMirror-info,body.graphiql-dark .CodeMirror-lint-tooltip,body.graphiql-dark .graphiql-dialog,body.graphiql-dark .graphiql-dialog-overlay,body.graphiql-dark .graphiql-tooltip,body.graphiql-dark [data-radix-popper-content-wrapper]{--color-primary: 338, 100%, 67%;--color-secondary: 243, 100%, 77%;--color-tertiary: 188, 100%, 44%;--color-info: 208, 100%, 72%;--color-success: 158, 100%, 42%;--color-warning: 30, 100%, 80%;--color-error: 13, 100%, 58%;--color-neutral: 219, 29%, 78%;--color-base: 219, 29%, 18%;--popover-box-shadow: none;--popover-border: 1px solid hsl(var(--color-neutral))}.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,.graphiql-dialog,.graphiql-container:is(button),.CodeMirror-info:is(button),.CodeMirror-lint-tooltip:is(button),.graphiql-dialog:is(button){color:hsla(var(--color-neutral),1);font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(----font-weight-regular);line-height:var(--line-height)}.graphiql-container input,.CodeMirror-info input,.CodeMirror-lint-tooltip input,.graphiql-dialog input{color:hsla(var(--color-neutral),1);font-family:var(--font-family);font-size:var(--font-size-caption)}.graphiql-container input::placeholder,.CodeMirror-info input::placeholder,.CodeMirror-lint-tooltip input::placeholder,.graphiql-dialog input::placeholder{color:hsla(var(--color-neutral),var(--alpha-secondary))}.graphiql-container a,.CodeMirror-info a,.CodeMirror-lint-tooltip a,.graphiql-dialog a{color:hsl(var(--color-primary))}.graphiql-container a:focus,.CodeMirror-info a:focus,.CodeMirror-lint-tooltip a:focus,.graphiql-dialog a:focus{outline:hsl(var(--color-primary)) auto 1px}.graphiql-un-styled,button.graphiql-un-styled{all:unset;border-radius:var(--border-radius-4);cursor:pointer}:is(.graphiql-un-styled,button.graphiql-un-styled):hover{background-color:hsla(var(--color-neutral),var(--alpha-background-light))}:is(.graphiql-un-styled,button.graphiql-un-styled):active{background-color:hsla(var(--color-neutral),var(--alpha-background-medium))}:is(.graphiql-un-styled,button.graphiql-un-styled):focus{outline:hsla(var(--color-neutral),var(--alpha-background-heavy)) auto 1px}.graphiql-button,button.graphiql-button{background-color:hsla(var(--color-neutral),var(--alpha-background-light));border:none;border-radius:var(--border-radius-4);color:hsla(var(--color-neutral),1);cursor:pointer;font-size:var(--font-size-body);padding:var(--px-8) var(--px-12)}:is(.graphiql-button,button.graphiql-button):hover,:is(.graphiql-button,button.graphiql-button):active{background-color:hsla(var(--color-neutral),var(--alpha-background-medium))}:is(.graphiql-button,button.graphiql-button):focus{outline:hsla(var(--color-neutral),var(--alpha-background-heavy)) auto 1px}.graphiql-button-success:is(.graphiql-button,button.graphiql-button){background-color:hsla(var(--color-success),var(--alpha-background-heavy))}.graphiql-button-error:is(.graphiql-button,button.graphiql-button){background-color:hsla(var(--color-error),var(--alpha-background-heavy))}.graphiql-button-group{background-color:hsla(var(--color-neutral),var(--alpha-background-light));border-radius:calc(var(--border-radius-4) + var(--px-4));display:flex;padding:var(--px-4)}.graphiql-button-group>button.graphiql-button{background-color:transparent}.graphiql-button-group>button.graphiql-button:hover{background-color:hsla(var(--color-neutral),var(--alpha-background-light))}.graphiql-button-group>button.graphiql-button.active{background-color:hsl(var(--color-base));cursor:default}.graphiql-button-group>*+*{margin-left:var(--px-8)}.graphiql-dialog-overlay{position:fixed;inset:0;background-color:hsla(var(--color-neutral),var(--alpha-background-heavy));z-index:10}.graphiql-dialog{background-color:hsl(var(--color-base));border:var(--popover-border);border-radius:var(--border-radius-12);box-shadow:var(--popover-box-shadow);margin:0;max-height:80vh;max-width:80vw;overflow:auto;padding:0;width:unset;transform:translate(-50%,-50%);top:50%;left:50%;position:fixed;z-index:10}.graphiql-dialog-close>svg{color:hsla(var(--color-neutral),var(--alpha-secondary));display:block;height:var(--px-12);padding:var(--px-12);width:var(--px-12)}.graphiql-dropdown-content{background-color:hsl(var(--color-base));border:var(--popover-border);border-radius:var(--border-radius-8);box-shadow:var(--popover-box-shadow);font-size:inherit;max-width:250px;padding:var(--px-4);font-family:var(--font-family);color:hsl(var(--color-neutral));max-height:min(calc(var(--radix-dropdown-menu-content-available-height) - 10px),400px);overflow-y:scroll}.graphiql-dropdown-item{border-radius:var(--border-radius-4);font-size:inherit;margin:var(--px-4);overflow:hidden;padding:var(--px-6) var(--px-8);text-overflow:ellipsis;white-space:nowrap;outline:none;cursor:pointer;line-height:var(--line-height)}.graphiql-dropdown-item[data-selected],.graphiql-dropdown-item[data-current-nav],.graphiql-dropdown-item:hover{background-color:hsla(var(--color-neutral),var(--alpha-background-light));color:inherit}.graphiql-dropdown-item:not(:first-child){margin-top:0}:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) blockquote{margin-left:0;margin-right:0;padding-left:var(--px-8)}:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) code,:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) pre{border-radius:var(--border-radius-4);font-family:var(--font-family-mono);font-size:var(--font-size-inline-code)}:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) code{padding:var(--px-2)}:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) pre{overflow:auto;padding:var(--px-6) var(--px-8)}:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) pre code{background-color:initial;border-radius:0;padding:0}:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) ol,:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) ul{padding-left:var(--px-16)}:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) ol{list-style-type:decimal}:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) ul{list-style-type:disc}:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) img{border-radius:var(--border-radius-4);max-height:120px;max-width:100%}:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation)>:first-child{margin-top:0}:is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation)>:last-child{margin-bottom:0}:is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description) a{color:hsl(var(--color-primary));text-decoration:none}:is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description) a:hover{text-decoration:underline}:is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description) blockquote{border-left:1.5px solid hsla(var(--color-neutral),var(--alpha-tertiary))}:is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description) code,:is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description) pre{background-color:hsla(var(--color-neutral),var(--alpha-background-light));color:hsla(var(--color-neutral),1)}:is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description)>*{margin:var(--px-12) 0}:is(.graphiql-markdown-deprecation,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-deprecation) a{color:hsl(var(--color-warning));text-decoration:underline}:is(.graphiql-markdown-deprecation,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-deprecation) blockquote{border-left:1.5px solid hsl(var(--color-warning))}:is(.graphiql-markdown-deprecation,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-deprecation) code,:is(.graphiql-markdown-deprecation,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-deprecation) pre{background-color:hsla(var(--color-warning),var(--alpha-background-heavy))}:is(.graphiql-markdown-deprecation,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-deprecation)>*{margin:var(--px-8) 0}.graphiql-markdown-preview>:not(:first-child){display:none}.CodeMirror-hint-information-deprecation,.CodeMirror-info .info-deprecation{background-color:hsla(var(--color-warning),var(--alpha-background-light));border:1px solid hsl(var(--color-warning));border-radius:var(--border-radius-4);color:hsl(var(--color-warning));margin-top:var(--px-12);padding:var(--px-6) var(--px-8)}.CodeMirror-hint-information-deprecation-label,.CodeMirror-info .info-deprecation-label{font-size:var(--font-size-hint);font-weight:var(--font-weight-medium)}.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-deprecation-reason{margin-top:var(--px-6)}.graphiql-spinner{height:56px;margin:auto;margin-top:var(--px-16);width:56px}.graphiql-spinner:after{animation:rotation .8s linear 0s infinite;border:4px solid transparent;border-radius:100%;border-top:4px solid hsla(var(--color-neutral),var(--alpha-tertiary));content:"";display:inline-block;height:46px;vertical-align:middle;width:46px}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.graphiql-tooltip{background:hsl(var(--color-base));border:var(--popover-border);border-radius:var(--border-radius-4);box-shadow:var(--popover-box-shadow);color:hsl(var(--color-neutral));font-size:inherit;padding:var(--px-4) var(--px-6);font-family:var(--font-family)}.graphiql-tabs{display:flex;align-items:center;overflow-x:auto;padding:var(--px-12)}.graphiql-tabs>:not(:first-child){margin-left:var(--px-12)}.graphiql-tab{align-items:stretch;border-radius:var(--border-radius-8);color:hsla(var(--color-neutral),var(--alpha-secondary));display:flex}.graphiql-tab>button.graphiql-tab-close{visibility:hidden}.graphiql-tab.graphiql-tab-active>button.graphiql-tab-close,.graphiql-tab:hover>button.graphiql-tab-close,.graphiql-tab:focus-within>button.graphiql-tab-close{visibility:unset}.graphiql-tab.graphiql-tab-active{background-color:hsla(var(--color-neutral),var(--alpha-background-heavy));color:hsla(var(--color-neutral),1)}button.graphiql-tab-button{padding:var(--px-4) 0 var(--px-4) var(--px-8)}button.graphiql-tab-close{align-items:center;display:flex;padding:var(--px-4) var(--px-8)}button.graphiql-tab-close>svg{height:var(--px-8);width:var(--px-8)}.graphiql-history-header{font-size:var(--font-size-h2);font-weight:var(--font-weight-medium);display:flex;justify-content:space-between;align-items:center}.graphiql-history-header button{font-size:var(--font-size-inline-code);padding:var(--px-6) var(--px-10)}.graphiql-history-items{margin:var(--px-16) 0 0;list-style:none;padding:0}.graphiql-history-item{border-radius:var(--border-radius-4);color:hsla(var(--color-neutral),var(--alpha-secondary));display:flex;font-size:var(--font-size-inline-code);font-family:var(--font-family-mono);height:34px}.graphiql-history-item:hover{color:hsla(var(--color-neutral),1);background-color:hsla(var(--color-neutral),var(--alpha-background-light))}.graphiql-history-item:not(:first-child){margin-top:var(--px-4)}.graphiql-history-item.editable{background-color:hsla(var(--color-primary),var(--alpha-background-medium))}.graphiql-history-item.editable>input{background:transparent;border:none;flex:1;margin:0;outline:none;padding:0 var(--px-10);width:100%}.graphiql-history-item.editable>input::placeholder{color:hsla(var(--color-neutral),var(--alpha-secondary))}.graphiql-history-item.editable>button{color:hsl(var(--color-primary));padding:0 var(--px-10)}.graphiql-history-item.editable>button:active{background-color:hsla(var(--color-primary),var(--alpha-background-heavy))}.graphiql-history-item.editable>button:focus{outline:hsl(var(--color-primary)) auto 1px}.graphiql-history-item.editable>button>svg{display:block}button.graphiql-history-item-label{flex:1;padding:var(--px-8) var(--px-10);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.graphiql-history-item-action{align-items:center;color:hsla(var(--color-neutral),var(--alpha-secondary));display:flex;padding:var(--px-8) var(--px-6)}button.graphiql-history-item-action:hover{color:hsla(var(--color-neutral),1)}button.graphiql-history-item-action>svg{height:14px;width:14px}.graphiql-history-item-spacer{height:var(--px-16)}.graphiql-doc-explorer-default-value{color:hsl(var(--color-success))}a.graphiql-doc-explorer-type-name{color:hsl(var(--color-warning));text-decoration:none}a.graphiql-doc-explorer-type-name:hover{text-decoration:underline}a.graphiql-doc-explorer-type-name:focus{outline:hsl(var(--color-warning)) auto 1px}.graphiql-doc-explorer-argument>*+*{margin-top:var(--px-12)}.graphiql-doc-explorer-argument-name{color:hsl(var(--color-secondary))}.graphiql-doc-explorer-argument-deprecation{background-color:hsla(var(--color-warning),var(--alpha-background-light));border:1px solid hsl(var(--color-warning));border-radius:var(--border-radius-4);color:hsl(var(--color-warning));padding:var(--px-8)}.graphiql-doc-explorer-argument-deprecation-label{font-size:var(--font-size-hint);font-weight:var(--font-weight-medium)}.graphiql-doc-explorer-deprecation{background-color:hsla(var(--color-warning),var(--alpha-background-light));border:1px solid hsl(var(--color-warning));border-radius:var(--px-4);color:hsl(var(--color-warning));padding:var(--px-8)}.graphiql-doc-explorer-deprecation-label{font-size:var(--font-size-hint);font-weight:var(--font-weight-medium)}.graphiql-doc-explorer-directive{color:hsl(var(--color-secondary))}.graphiql-doc-explorer-section-title{align-items:center;display:flex;font-size:var(--font-size-hint);font-weight:var(--font-weight-medium);line-height:1}.graphiql-doc-explorer-section-title>svg{height:var(--px-16);margin-right:var(--px-8);width:var(--px-16)}.graphiql-doc-explorer-section-content{margin-left:var(--px-8);margin-top:var(--px-16)}.graphiql-doc-explorer-section-content>*+*{margin-top:var(--px-16)}.graphiql-doc-explorer-root-type{color:hsl(var(--color-info))}.graphiql-doc-explorer-search{color:hsla(var(--color-neutral),var(--alpha-secondary))}.graphiql-doc-explorer-search:not([data-state="idle"]){border:var(--popover-border);border-radius:var(--border-radius-4);box-shadow:var(--popover-box-shadow);color:hsla(var(--color-neutral),1)}.graphiql-doc-explorer-search:not([data-state="idle"]) .graphiql-doc-explorer-search-input{background:hsl(var(--color-base))}.graphiql-doc-explorer-search-input{align-items:center;background-color:hsla(var(--color-neutral),var(--alpha-background-light));border-radius:var(--border-radius-4);display:flex;padding:var(--px-8) var(--px-12)}.graphiql-doc-explorer-search [role=combobox]{border:none;background-color:transparent;margin-left:var(--px-4);width:100%}.graphiql-doc-explorer-search [role=combobox]:focus{outline:none}.graphiql-doc-explorer-search [role=listbox]{background-color:hsl(var(--color-base));border:none;border-bottom-left-radius:var(--border-radius-4);border-bottom-right-radius:var(--border-radius-4);border-top:1px solid hsla(var(--color-neutral),var(--alpha-background-heavy));max-height:400px;overflow-y:auto;margin:0;font-size:var(--font-size-body);padding:var(--px-4);position:relative}.graphiql-doc-explorer-search [role=option]{border-radius:var(--border-radius-4);color:hsla(var(--color-neutral),var(--alpha-secondary));overflow-x:hidden;padding:var(--px-8) var(--px-12);text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.graphiql-doc-explorer-search [role=option][data-headlessui-state=active]{background-color:hsla(var(--color-neutral),var(--alpha-background-light))}.graphiql-doc-explorer-search [role=option]:hover{background-color:hsla(var(--color-neutral),var(--alpha-background-medium))}.graphiql-doc-explorer-search [role=option][data-headlessui-state=active]:hover{background-color:hsla(var(--color-neutral),var(--alpha-background-heavy))}:is(.graphiql-doc-explorer-search [role="option"])+:is(.graphiql-doc-explorer-search [role="option"]){margin-top:var(--px-4)}.graphiql-doc-explorer-search-type{color:hsl(var(--color-info))}.graphiql-doc-explorer-search-field{color:hsl(var(--color-warning))}.graphiql-doc-explorer-search-argument{color:hsl(var(--color-secondary))}.graphiql-doc-explorer-search-divider{color:hsla(var(--color-neutral),var(--alpha-secondary));font-size:var(--font-size-hint);font-weight:var(--font-weight-medium);margin-top:var(--px-8);padding:var(--px-8) var(--px-12)}.graphiql-doc-explorer-search-empty{color:hsla(var(--color-neutral),var(--alpha-secondary));padding:var(--px-8) var(--px-12)}a.graphiql-doc-explorer-field-name{color:hsl(var(--color-info));text-decoration:none}a.graphiql-doc-explorer-field-name:hover{text-decoration:underline}a.graphiql-doc-explorer-field-name:focus{outline:hsl(var(--color-info)) auto 1px}.graphiql-doc-explorer-item>:not(:first-child){margin-top:var(--px-12)}.graphiql-doc-explorer-argument-multiple{margin-left:var(--px-8)}.graphiql-doc-explorer-enum-value{color:hsl(var(--color-info))}.graphiql-doc-explorer-header{display:flex;justify-content:space-between;position:relative}.graphiql-doc-explorer-header:focus-within .graphiql-doc-explorer-title{visibility:hidden}.graphiql-doc-explorer-header:focus-within .graphiql-doc-explorer-back:not(:focus){color:transparent}.graphiql-doc-explorer-header-content{display:flex;flex-direction:column;min-width:0}.graphiql-doc-explorer-search{position:absolute;right:0;top:0}.graphiql-doc-explorer-search:focus-within{left:0}.graphiql-doc-explorer-search [role=combobox]{height:24px;width:4ch}.graphiql-doc-explorer-search [role=combobox]:focus{width:100%}a.graphiql-doc-explorer-back{align-items:center;color:hsla(var(--color-neutral),var(--alpha-secondary));display:flex;text-decoration:none}a.graphiql-doc-explorer-back:hover{text-decoration:underline}a.graphiql-doc-explorer-back:focus{outline:hsla(var(--color-neutral),var(--alpha-secondary)) auto 1px}a.graphiql-doc-explorer-back:focus+.graphiql-doc-explorer-title{visibility:unset}a.graphiql-doc-explorer-back>svg{height:var(--px-8);margin-right:var(--px-8);width:var(--px-8)}.graphiql-doc-explorer-title{font-weight:var(--font-weight-medium);font-size:var(--font-size-h2);overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.graphiql-doc-explorer-title:not(:first-child){font-size:var(--font-size-h3);margin-top:var(--px-8)}.graphiql-doc-explorer-content>*{color:hsla(var(--color-neutral),var(--alpha-secondary));margin-top:var(--px-20)}.graphiql-doc-explorer-error{background-color:hsla(var(--color-error),var(--alpha-background-heavy));border:1px solid hsl(var(--color-error));border-radius:var(--border-radius-8);color:hsl(var(--color-error));padding:var(--px-8) var(--px-12)}.CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}.graphiql-container .CodeMirror{height:100%;position:absolute;width:100%}.graphiql-container .CodeMirror{font-family:var(--font-family-mono)}.graphiql-container .CodeMirror,.graphiql-container .CodeMirror-gutters{background:none;background-color:var(--editor-background, hsl(var(--color-base)))}.graphiql-container .CodeMirror-linenumber{padding:0}.graphiql-container .CodeMirror-gutters{border:none}.cm-s-graphiql{color:hsla(var(--color-neutral),var(--alpha-tertiary))}.cm-s-graphiql .cm-keyword{color:hsl(var(--color-primary))}.cm-s-graphiql .cm-def{color:hsl(var(--color-tertiary))}.cm-s-graphiql .cm-punctuation{color:hsla(var(--color-neutral),var(--alpha-tertiary))}.cm-s-graphiql .cm-variable{color:hsl(var(--color-secondary))}.cm-s-graphiql .cm-atom{color:hsl(var(--color-tertiary))}.cm-s-graphiql .cm-number{color:hsl(var(--color-success))}.cm-s-graphiql .cm-string{color:hsl(var(--color-warning))}.cm-s-graphiql .cm-builtin{color:hsl(var(--color-success))}.cm-s-graphiql .cm-string-2{color:hsl(var(--color-secondary))}.cm-s-graphiql .cm-attribute,.cm-s-graphiql .cm-meta{color:hsl(var(--color-tertiary))}.cm-s-graphiql .cm-property{color:hsl(var(--color-info))}.cm-s-graphiql .cm-qualifier{color:hsl(var(--color-secondary))}.cm-s-graphiql .cm-comment{color:hsla(var(--color-neutral),var(--alpha-secondary))}.cm-s-graphiql .cm-ws{color:hsla(var(--color-neutral),var(--alpha-tertiary))}.cm-s-graphiql .cm-invalidchar{color:hsl(var(--color-error))}.cm-s-graphiql .CodeMirror-cursor{border-left:2px solid hsla(var(--color-neutral),var(--alpha-secondary))}.cm-s-graphiql .CodeMirror-linenumber{color:hsla(var(--color-neutral),var(--alpha-tertiary))}.graphiql-container div.CodeMirror span.CodeMirror-matchingbracket,.graphiql-container div.CodeMirror span.CodeMirror-nonmatchingbracket{color:hsl(var(--color-warning))}.graphiql-container .CodeMirror-selected,.graphiql-container .CodeMirror-focused .CodeMirror-selected{background:hsla(var(--color-neutral),var(--alpha-background-heavy))}.graphiql-container .CodeMirror-dialog{background:inherit;color:inherit;left:0;right:0;overflow:hidden;padding:var(--px-2) var(--px-6);position:absolute;z-index:6}.graphiql-container .CodeMirror-dialog-top{border-bottom:1px solid hsla(var(--color-neutral),var(--alpha-background-heavy));padding-bottom:var(--px-12);top:0}.graphiql-container .CodeMirror-dialog-bottom{border-top:1px solid hsla(var(--color-neutral),var(--alpha-background-heavy));bottom:0;padding-top:var(--px-12)}.graphiql-container .CodeMirror-search-hint{display:none}.graphiql-container .CodeMirror-dialog input{border:1px solid hsla(var(--color-neutral),var(--alpha-background-heavy));border-radius:var(--border-radius-4);padding:var(--px-4)}.graphiql-container .CodeMirror-dialog input:focus{outline:hsl(var(--color-primary)) solid 2px}.graphiql-container .cm-searching{background-color:hsla(var(--color-warning),var(--alpha-background-light));padding-bottom:1.5px;padding-top:.5px}.CodeMirror-foldmarker{color:#00f;text-shadow:#b9f 1px 1px 2px,#b9f -1px -1px 2px,#b9f 1px -1px 2px,#b9f -1px 1px 2px;font-family:arial;line-height:.3;cursor:pointer}.CodeMirror-foldgutter{width:.7em}.CodeMirror-foldgutter-open,.CodeMirror-foldgutter-folded{cursor:pointer}.CodeMirror-foldgutter-open:after{content:"▾"}.CodeMirror-foldgutter-folded:after{content:"▸"}.CodeMirror-foldgutter{width:var(--px-12)}.CodeMirror-foldmarker{background-color:hsl(var(--color-info));border-radius:var(--border-radius-4);color:hsl(var(--color-base));font-family:inherit;margin:0 var(--px-4);padding:0 var(--px-8);text-shadow:none}.CodeMirror-foldgutter-open,.CodeMirror-foldgutter-folded{color:hsla(var(--color-neutral),var(--alpha-tertiary))}.CodeMirror-foldgutter-open:after,.CodeMirror-foldgutter-folded:after{margin:0 var(--px-2)}.graphiql-editor{height:100%;position:relative;width:100%}.graphiql-editor.hidden{left:-9999px;position:absolute;top:-9999px;visibility:hidden}.CodeMirror-lint-markers{width:16px}.CodeMirror-lint-tooltip{background-color:#ffd;border:1px solid black;border-radius:4px;color:#000;font-family:monospace;font-size:10pt;overflow:hidden;padding:2px 5px;position:fixed;white-space:pre;white-space:pre-wrap;z-index:100;max-width:600px;opacity:0;transition:opacity .4s;-moz-transition:opacity .4s;-webkit-transition:opacity .4s;-o-transition:opacity .4s;-ms-transition:opacity .4s}.CodeMirror-lint-mark{background-position:left bottom;background-repeat:repeat-x}.CodeMirror-lint-mark-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=)}.CodeMirror-lint-mark-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==)}.CodeMirror-lint-marker{background-position:center center;background-repeat:no-repeat;cursor:pointer;display:inline-block;height:16px;width:16px;vertical-align:middle;position:relative}.CodeMirror-lint-message{padding-left:18px;background-position:top left;background-repeat:no-repeat}.CodeMirror-lint-marker-warning,.CodeMirror-lint-message-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=)}.CodeMirror-lint-marker-error,.CodeMirror-lint-message-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=)}.CodeMirror-lint-marker-multiple{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:right bottom;width:100%;height:100%}.CodeMirror-lint-line-error{background-color:#b74c5114}.CodeMirror-lint-line-warning{background-color:#ffd3001a}.CodeMirror-lint-mark-error,.CodeMirror-lint-mark-warning{background-repeat:repeat-x;background-size:10px 3px;background-position:0 95%}.cm-s-graphiql .CodeMirror-lint-mark-error{color:hsl(var(--color-error))}.CodeMirror-lint-mark-error{background-image:linear-gradient(45deg,transparent 65%,hsl(var(--color-error)) 80%,transparent 90%),linear-gradient(135deg,transparent 5%,hsl(var(--color-error)) 15%,transparent 25%),linear-gradient(135deg,transparent 45%,hsl(var(--color-error)) 55%,transparent 65%),linear-gradient(45deg,transparent 25%,hsl(var(--color-error)) 35%,transparent 50%)}.cm-s-graphiql .CodeMirror-lint-mark-warning{color:hsl(var(--color-warning))}.CodeMirror-lint-mark-warning{background-image:linear-gradient(45deg,transparent 65%,hsl(var(--color-warning)) 80%,transparent 90%),linear-gradient(135deg,transparent 5%,hsl(var(--color-warning)) 15%,transparent 25%),linear-gradient(135deg,transparent 45%,hsl(var(--color-warning)) 55%,transparent 65%),linear-gradient(45deg,transparent 25%,hsl(var(--color-warning)) 35%,transparent 50%)}.CodeMirror-lint-tooltip{background-color:hsl(var(--color-base));border:var(--popover-border);border-radius:var(--border-radius-8);box-shadow:var(--popover-box-shadow);font-size:var(--font-size-body);font-family:var(--font-family);max-width:600px;overflow:hidden;padding:var(--px-12)}.CodeMirror-lint-message-error,.CodeMirror-lint-message-warning{background-image:none;padding:0}.CodeMirror-lint-message-error{color:hsl(var(--color-error))}.CodeMirror-lint-message-warning{color:hsl(var(--color-warning))}.CodeMirror-hints{position:absolute;z-index:10;overflow:hidden;list-style:none;margin:0;padding:2px;-webkit-box-shadow:2px 3px 5px rgba(0,0,0,.2);-moz-box-shadow:2px 3px 5px rgba(0,0,0,.2);box-shadow:2px 3px 5px #0003;border-radius:3px;border:1px solid silver;background:white;font-size:90%;font-family:monospace;max-height:20em;overflow-y:auto}.CodeMirror-hint{margin:0;padding:0 4px;border-radius:2px;white-space:pre;color:#000;cursor:pointer}li.CodeMirror-hint-active{background:#08f;color:#fff}.CodeMirror-hints{background:hsl(var(--color-base));border:var(--popover-border);border-radius:var(--border-radius-8);box-shadow:var(--popover-box-shadow);display:grid;font-family:var(--font-family);font-size:var(--font-size-body);grid-template-columns:auto fit-content(300px);max-height:264px;padding:0}.CodeMirror-hint{border-radius:var(--border-radius-4);color:hsla(var(--color-neutral),var(--alpha-secondary));grid-column:1 / 2;margin:var(--px-4);padding:var(--px-6) var(--px-8)!important}.CodeMirror-hint:not(:first-child){margin-top:0}li.CodeMirror-hint-active{background:hsla(var(--color-primary),var(--alpha-background-medium));color:hsl(var(--color-primary))}.CodeMirror-hint-information{border-left:1px solid hsla(var(--color-neutral),var(--alpha-background-heavy));grid-column:2 / 3;grid-row:1 / 99999;max-height:264px;overflow:auto;padding:var(--px-12)}.CodeMirror-hint-information-header{display:flex;align-items:baseline}.CodeMirror-hint-information-field-name{font-size:var(--font-size-h4);font-weight:var(--font-weight-medium)}.CodeMirror-hint-information-type-name-pill{border:1px solid hsla(var(--color-neutral),var(--alpha-tertiary));border-radius:var(--border-radius-4);color:hsla(var(--color-neutral),var(--alpha-secondary));margin-left:var(--px-6);padding:var(--px-4)}.CodeMirror-hint-information-type-name{color:inherit;text-decoration:none}.CodeMirror-hint-information-type-name:hover{text-decoration:underline dotted}.CodeMirror-hint-information-description{color:hsla(var(--color-neutral),var(--alpha-secondary));margin-top:var(--px-12)}.CodeMirror-info{background-color:hsl(var(--color-base));border:var(--popover-border);border-radius:var(--border-radius-8);box-shadow:var(--popover-box-shadow);color:hsla(var(--color-neutral),1);max-height:300px;max-width:400px;opacity:0;overflow:auto;padding:var(--px-12);position:fixed;transition:opacity .15s;z-index:10}.CodeMirror-info a{color:inherit;text-decoration:none}.CodeMirror-info a:hover{text-decoration:underline dotted}.CodeMirror-info .CodeMirror-info-header{display:flex;align-items:baseline}.CodeMirror-info .CodeMirror-info-header>.type-name,.CodeMirror-info .CodeMirror-info-header>.field-name,.CodeMirror-info .CodeMirror-info-header>.arg-name,.CodeMirror-info .CodeMirror-info-header>.directive-name,.CodeMirror-info .CodeMirror-info-header>.enum-value{font-size:var(--font-size-h4);font-weight:var(--font-weight-medium)}.CodeMirror-info .type-name-pill{border:1px solid hsla(var(--color-neutral),var(--alpha-tertiary));border-radius:var(--border-radius-4);color:hsla(var(--color-neutral),var(--alpha-secondary));margin-left:var(--px-6);padding:var(--px-4)}.CodeMirror-info .info-description{color:hsla(var(--color-neutral),var(--alpha-secondary));margin-top:var(--px-12);overflow:hidden}.CodeMirror-jump-token{text-decoration:underline dotted;cursor:pointer}.auto-inserted-leaf.cm-property{animation-duration:6s;animation-name:insertionFade;border-radius:var(--border-radius-4);padding:var(--px-2)}@keyframes insertionFade{0%,to{background-color:none}15%,85%{background-color:hsla(var(--color-warning),var(--alpha-background-light))}}button.graphiql-toolbar-button{display:flex;align-items:center;justify-content:center;height:var(--toolbar-width);width:var(--toolbar-width)}button.graphiql-toolbar-button.error{background:hsla(var(--color-error),var(--alpha-background-heavy))}.graphiql-execute-button-wrapper{position:relative}button.graphiql-execute-button{background-color:hsl(var(--color-primary));border:none;border-radius:var(--border-radius-8);cursor:pointer;height:var(--toolbar-width);padding:0;width:var(--toolbar-width)}button.graphiql-execute-button:hover{background-color:hsla(var(--color-primary),.9)}button.graphiql-execute-button:active{background-color:hsla(var(--color-primary),.8)}button.graphiql-execute-button:focus{outline:hsla(var(--color-primary),.8) auto 1px}button.graphiql-execute-button>svg{color:#fff;display:block;height:var(--px-16);margin:auto;width:var(--px-16)}button.graphiql-toolbar-menu{display:block;height:var(--toolbar-width);width:var(--toolbar-width)}
342
+ /* a very simple box-model reset, intentionally does not include pseudo elements */
343
+ .graphiql-container * {
344
+ box-sizing: border-box;
345
+ font-variant-ligatures: none;
346
+ }
347
+
348
+ .graphiql-container,
349
+ .CodeMirror-info,
350
+ .CodeMirror-lint-tooltip,
351
+ .graphiql-dialog,
352
+ .graphiql-dialog-overlay,
353
+ .graphiql-tooltip,
354
+ [data-radix-popper-content-wrapper] {
355
+ /* Colors */
356
+ --color-primary: 320, 95%, 43%;
357
+ --color-secondary: 242, 51%, 61%;
358
+ --color-tertiary: 188, 100%, 36%;
359
+ --color-info: 208, 100%, 46%;
360
+ --color-success: 158, 60%, 42%;
361
+ --color-warning: 36, 100%, 41%;
362
+ --color-error: 13, 93%, 58%;
363
+ --color-neutral: 219, 28%, 32%;
364
+ --color-base: 219, 28%, 100%;
365
+
366
+ /* Color alpha values */
367
+ --alpha-secondary: 0.76;
368
+ --alpha-tertiary: 0.5;
369
+ --alpha-background-heavy: 0.15;
370
+ --alpha-background-medium: 0.1;
371
+ --alpha-background-light: 0.07;
372
+
373
+ /* Font */
374
+ --font-family: 'Roboto', sans-serif;
375
+ --font-family-mono: 'Fira Code', monospace;
376
+ --font-size-hint: calc(12rem / 16);
377
+ --font-size-inline-code: calc(13rem / 16);
378
+ --font-size-body: calc(15rem / 16);
379
+ --font-size-h4: calc(18rem / 16);
380
+ --font-size-h3: calc(22rem / 16);
381
+ --font-size-h2: calc(29rem / 16);
382
+ --font-weight-regular: 400;
383
+ --font-weight-medium: 500;
384
+ --line-height: 1.5;
385
+
386
+ /* Spacing */
387
+ --px-2: 2px;
388
+ --px-4: 4px;
389
+ --px-6: 6px;
390
+ --px-8: 8px;
391
+ --px-10: 10px;
392
+ --px-12: 12px;
393
+ --px-16: 16px;
394
+ --px-20: 20px;
395
+ --px-24: 24px;
396
+
397
+ /* Border radius */
398
+ --border-radius-2: 2px;
399
+ --border-radius-4: 4px;
400
+ --border-radius-8: 8px;
401
+ --border-radius-12: 12px;
402
+
403
+ /* Popover styles (tooltip, dialog, etc) */
404
+ --popover-box-shadow: 0px 6px 20px rgba(59, 76, 106, 0.13),
405
+ 0px 1.34018px 4.46726px rgba(59, 76, 106, 0.0774939),
406
+ 0px 0.399006px 1.33002px rgba(59, 76, 106, 0.0525061);
407
+ --popover-border: none;
408
+
409
+ /* Layout */
410
+ --sidebar-width: 60px;
411
+ --toolbar-width: 40px;
412
+ --session-header-height: 51px;
413
+ }
414
+
415
+ @media (prefers-color-scheme: dark) {
416
+ body:not(.graphiql-light) .graphiql-container,
417
+ body:not(.graphiql-light) .CodeMirror-info,
418
+ body:not(.graphiql-light) .CodeMirror-lint-tooltip,
419
+ body:not(.graphiql-light) .graphiql-dialog,
420
+ body:not(.graphiql-light) .graphiql-dialog-overlay,
421
+ body:not(.graphiql-light) .graphiql-tooltip,
422
+ body:not(.graphiql-light) [data-radix-popper-content-wrapper] {
423
+ --color-primary: 338, 100%, 67%;
424
+ --color-secondary: 243, 100%, 77%;
425
+ --color-tertiary: 188, 100%, 44%;
426
+ --color-info: 208, 100%, 72%;
427
+ --color-success: 158, 100%, 42%;
428
+ --color-warning: 30, 100%, 80%;
429
+ --color-error: 13, 100%, 58%;
430
+ --color-neutral: 219, 29%, 78%;
431
+ --color-base: 219, 29%, 18%;
432
+
433
+ --popover-box-shadow: none;
434
+ --popover-border: 1px solid hsl(var(--color-neutral));
435
+ }
436
+ }
437
+
438
+ body.graphiql-dark .graphiql-container,
439
+ body.graphiql-dark .CodeMirror-info,
440
+ body.graphiql-dark .CodeMirror-lint-tooltip,
441
+ body.graphiql-dark .graphiql-dialog,
442
+ body.graphiql-dark .graphiql-dialog-overlay,
443
+ body.graphiql-dark .graphiql-tooltip,
444
+ body.graphiql-dark [data-radix-popper-content-wrapper] {
445
+ --color-primary: 338, 100%, 67%;
446
+ --color-secondary: 243, 100%, 77%;
447
+ --color-tertiary: 188, 100%, 44%;
448
+ --color-info: 208, 100%, 72%;
449
+ --color-success: 158, 100%, 42%;
450
+ --color-warning: 30, 100%, 80%;
451
+ --color-error: 13, 100%, 58%;
452
+ --color-neutral: 219, 29%, 78%;
453
+ --color-base: 219, 29%, 18%;
454
+
455
+ --popover-box-shadow: none;
456
+ --popover-border: 1px solid hsl(var(--color-neutral));
457
+ }
458
+
459
+ .graphiql-container,
460
+ .CodeMirror-info,
461
+ .CodeMirror-lint-tooltip,
462
+ .graphiql-dialog,
463
+ .graphiql-container:is(button),
464
+ .CodeMirror-info:is(button),
465
+ .CodeMirror-lint-tooltip:is(button),
466
+ .graphiql-dialog:is(button) {
467
+ color: hsl(var(--color-neutral));
468
+ font-family: var(--font-family);
469
+ font-size: var(--font-size-body);
470
+ font-weight: var(--font-weight-regular);
471
+ line-height: var(--line-height);
472
+ }
473
+
474
+ .graphiql-container input, .CodeMirror-info input, .CodeMirror-lint-tooltip input, .graphiql-dialog input {
475
+ color: hsl(var(--color-neutral));
476
+ font-family: var(--font-family);
477
+ font-size: var(--font-size-caption)
478
+ }
479
+
480
+ .graphiql-container input::placeholder, .CodeMirror-info input::placeholder, .CodeMirror-lint-tooltip input::placeholder, .graphiql-dialog input::placeholder {
481
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
482
+ }
483
+
484
+ .graphiql-container a, .CodeMirror-info a, .CodeMirror-lint-tooltip a, .graphiql-dialog a {
485
+ color: hsl(var(--color-primary))
486
+ }
487
+
488
+ .graphiql-container a:focus, .CodeMirror-info a:focus, .CodeMirror-lint-tooltip a:focus, .graphiql-dialog a:focus {
489
+ outline: hsl(var(--color-primary)) auto 1px;
490
+ }
491
+ .graphiql-un-styled,
492
+ button.graphiql-un-styled {
493
+ all: unset;
494
+ border-radius: var(--border-radius-4);
495
+ cursor: pointer
496
+ }
497
+
498
+ :is(.graphiql-un-styled,button.graphiql-un-styled):hover {
499
+ background-color: hsla(var(--color-neutral), var(--alpha-background-light));
500
+ }
501
+
502
+ :is(.graphiql-un-styled,button.graphiql-un-styled):active {
503
+ background-color: hsla(
504
+ var(--color-neutral),
505
+ var(--alpha-background-medium)
506
+ );
507
+ }
508
+
509
+ :is(.graphiql-un-styled,button.graphiql-un-styled):focus {
510
+ outline: hsla(var(--color-neutral), var(--alpha-background-heavy)) auto 1px;
511
+ }
512
+
513
+ .graphiql-button,
514
+ button.graphiql-button {
515
+ background-color: hsla(var(--color-neutral), var(--alpha-background-light));
516
+ border: none;
517
+ border-radius: var(--border-radius-4);
518
+ color: hsl(var(--color-neutral));
519
+ cursor: pointer;
520
+ font-size: var(--font-size-body);
521
+ padding: var(--px-8) var(--px-12)
522
+ }
523
+
524
+ :is(.graphiql-button,button.graphiql-button):hover,
525
+ :is(.graphiql-button,button.graphiql-button):active {
526
+ background-color: hsla(
527
+ var(--color-neutral),
528
+ var(--alpha-background-medium)
529
+ );
530
+ }
531
+
532
+ :is(.graphiql-button,button.graphiql-button):focus {
533
+ outline: hsla(var(--color-neutral), var(--alpha-background-heavy)) auto 1px;
534
+ }
535
+
536
+ .graphiql-button-success:is(.graphiql-button,button.graphiql-button) {
537
+ background-color: hsla(var(--color-success), var(--alpha-background-heavy));
538
+ }
539
+
540
+ .graphiql-button-error:is(.graphiql-button,button.graphiql-button) {
541
+ background-color: hsla(var(--color-error), var(--alpha-background-heavy));
542
+ }
543
+ .graphiql-button-group {
544
+ background-color: hsla(var(--color-neutral), var(--alpha-background-light));
545
+ /* Border radius of button plus padding */
546
+ border-radius: calc(var(--border-radius-4) + var(--px-4));
547
+ display: flex;
548
+ padding: var(--px-4)
549
+ }
550
+ .graphiql-button-group > button.graphiql-button {
551
+ background-color: transparent
552
+ }
553
+ .graphiql-button-group > button.graphiql-button:hover {
554
+ background-color: hsla(
555
+ var(--color-neutral),
556
+ var(--alpha-background-light)
557
+ );
558
+ }
559
+ .graphiql-button-group > button.graphiql-button.active {
560
+ background-color: hsl(var(--color-base));
561
+ cursor: default;
562
+ }
563
+ .graphiql-button-group > * + * {
564
+ margin-left: var(--px-8);
565
+ }
566
+ .graphiql-dialog-overlay {
567
+ position: fixed;
568
+ inset: 0;
569
+ background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
570
+ /**
571
+ * CodeMirror has a `z-index` set for the container of the scrollbar of the
572
+ * editor, so we have to add one here to make sure that the dialog is shown
573
+ * above the editor scrollbar (if they are visible).
574
+ */
575
+ z-index: 10;
576
+ }
577
+
578
+ .graphiql-dialog {
579
+ background-color: hsl(var(--color-base));
580
+ border: var(--popover-border);
581
+ border-radius: var(--border-radius-12);
582
+ box-shadow: var(--popover-box-shadow);
583
+ margin: 0;
584
+ max-height: 80vh;
585
+ max-width: 80vw;
586
+ overflow: auto;
587
+ padding: 0;
588
+ width: unset;
589
+ transform: translate(-50%, -50%);
590
+ top: 50%;
591
+ left: 50%;
592
+ position: fixed;
593
+ z-index: 10;
594
+ }
595
+
596
+ .graphiql-dialog-close > svg {
597
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
598
+ display: block;
599
+ height: var(--px-12);
600
+ padding: var(--px-12);
601
+ width: var(--px-12);
602
+ }
603
+ .graphiql-dropdown-content {
604
+ background-color: hsl(var(--color-base));
605
+ border: var(--popover-border);
606
+ border-radius: var(--border-radius-8);
607
+ box-shadow: var(--popover-box-shadow);
608
+ font-size: inherit;
609
+ max-width: 250px;
610
+ padding: var(--px-4);
611
+ font-family: var(--font-family);
612
+ color: hsl(var(--color-neutral));
613
+ max-height: min(
614
+ calc(var(--radix-dropdown-menu-content-available-height) - 10px),
615
+ 400px
616
+ );
617
+ overflow-y: scroll;
618
+ }
619
+
620
+ .graphiql-dropdown-item {
621
+ border-radius: var(--border-radius-4);
622
+ font-size: inherit;
623
+ margin: var(--px-4);
624
+ overflow: hidden;
625
+ padding: var(--px-6) var(--px-8);
626
+ text-overflow: ellipsis;
627
+ white-space: nowrap;
628
+ outline: none;
629
+ cursor: pointer;
630
+ line-height: var(--line-height)
631
+ }
632
+
633
+ .graphiql-dropdown-item[data-selected],
634
+ .graphiql-dropdown-item[data-current-nav],
635
+ .graphiql-dropdown-item:hover {
636
+ background-color: hsla(var(--color-neutral), var(--alpha-background-light));
637
+ color: inherit;
638
+ }
639
+
640
+ .graphiql-dropdown-item:not(:first-child) {
641
+ margin-top: 0;
642
+ }
643
+ /**
644
+ * We render markdown in the following places:
645
+ * - In the hint tooltip when typing in the query editor (field description
646
+ * and, optionally, deprecation reason).
647
+ * - In the info tooltip when hovering over a field in the query editor
648
+ * (field description and, optionally, deprecation reason).
649
+ */
650
+
651
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) blockquote {
652
+ margin-left: 0;
653
+ margin-right: 0;
654
+ padding-left: var(--px-8);
655
+ }
656
+
657
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) code,
658
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) pre {
659
+ border-radius: var(--border-radius-4);
660
+ font-family: var(--font-family-mono);
661
+ font-size: var(--font-size-inline-code);
662
+ }
663
+
664
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) code {
665
+ padding: var(--px-2);
666
+ }
667
+
668
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) pre {
669
+ overflow: auto;
670
+ padding: var(--px-6) var(--px-8);
671
+ }
672
+
673
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) pre code {
674
+ background-color: initial;
675
+ border-radius: 0;
676
+ padding: 0;
677
+ }
678
+
679
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) ol,
680
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) ul {
681
+ padding-left: var(--px-16);
682
+ }
683
+
684
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) ol {
685
+ list-style-type: decimal;
686
+ }
687
+
688
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) ul {
689
+ list-style-type: disc;
690
+ }
691
+
692
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) img {
693
+ border-radius: var(--border-radius-4);
694
+ max-height: 120px;
695
+ max-width: 100%;
696
+ }
697
+
698
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) > :first-child {
699
+ margin-top: 0;
700
+ }
701
+
702
+ :is(.graphiql-markdown-description,.graphiql-markdown-deprecation,.CodeMirror-hint-information-description,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-description,.CodeMirror-info .info-deprecation) > :last-child {
703
+ margin-bottom: 0;
704
+ }
705
+
706
+ :is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description) a {
707
+ color: hsl(var(--color-primary));
708
+ text-decoration: none
709
+ }
710
+
711
+ :is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description) a:hover {
712
+ text-decoration: underline;
713
+ }
714
+
715
+ :is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description) blockquote {
716
+ border-left: 1.5px solid hsla(var(--color-neutral), var(--alpha-tertiary));
717
+ }
718
+
719
+ :is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description) code,
720
+ :is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description) pre {
721
+ background-color: hsla(var(--color-neutral), var(--alpha-background-light));
722
+ color: hsl(var(--color-neutral));
723
+ }
724
+
725
+ :is(.graphiql-markdown-description,.CodeMirror-hint-information-description,.CodeMirror-info .info-description) > * {
726
+ margin: var(--px-12) 0;
727
+ }
728
+
729
+ :is(.graphiql-markdown-deprecation,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-deprecation) a {
730
+ color: hsl(var(--color-warning));
731
+ text-decoration: underline;
732
+ }
733
+
734
+ :is(.graphiql-markdown-deprecation,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-deprecation) blockquote {
735
+ border-left: 1.5px solid hsl(var(--color-warning));
736
+ }
737
+
738
+ :is(.graphiql-markdown-deprecation,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-deprecation) code,
739
+ :is(.graphiql-markdown-deprecation,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-deprecation) pre {
740
+ background-color: hsla(var(--color-warning), var(--alpha-background-heavy));
741
+ }
742
+
743
+ :is(.graphiql-markdown-deprecation,.CodeMirror-hint-information-deprecation-reason,.CodeMirror-info .info-deprecation) > * {
744
+ margin: var(--px-8) 0;
745
+ }
746
+
747
+ .graphiql-markdown-preview > :not(:first-child) {
748
+ display: none;
749
+ }
750
+
751
+ /**
752
+ * We show deprecations in the following places:
753
+ * - In the hint tooltip when typing in the query editor.
754
+ * - In the info tooltip when hovering over a field in the query editor.
755
+ */
756
+
757
+ .CodeMirror-hint-information-deprecation,
758
+ .CodeMirror-info .info-deprecation {
759
+ background-color: hsla(var(--color-warning), var(--alpha-background-light));
760
+ border: 1px solid hsl(var(--color-warning));
761
+ border-radius: var(--border-radius-4);
762
+ color: hsl(var(--color-warning));
763
+ margin-top: var(--px-12);
764
+ padding: var(--px-6) var(--px-8);
765
+ }
766
+
767
+ .CodeMirror-hint-information-deprecation-label,
768
+ .CodeMirror-info .info-deprecation-label {
769
+ font-size: var(--font-size-hint);
770
+ font-weight: var(--font-weight-medium);
771
+ }
772
+
773
+ .CodeMirror-hint-information-deprecation-reason,
774
+ .CodeMirror-info .info-deprecation-reason {
775
+ margin-top: var(--px-6);
776
+ }
777
+ .graphiql-spinner {
778
+ height: 56px;
779
+ margin: auto;
780
+ margin-top: var(--px-16);
781
+ width: 56px
782
+ }
783
+
784
+ .graphiql-spinner::after {
785
+ animation: rotation 0.8s linear 0s infinite;
786
+ border: 4px solid transparent;
787
+ border-radius: 100%;
788
+ border-top: 4px solid hsla(var(--color-neutral), var(--alpha-tertiary));
789
+ content: '';
790
+ display: inline-block;
791
+ height: 46px;
792
+ vertical-align: middle;
793
+ width: 46px;
794
+ }
795
+
796
+ @keyframes rotation {
797
+ from {
798
+ transform: rotate(0deg);
799
+ }
800
+ to {
801
+ transform: rotate(360deg);
802
+ }
803
+ }
804
+ .graphiql-tooltip {
805
+ background: hsl(var(--color-base));
806
+ border: var(--popover-border);
807
+ border-radius: var(--border-radius-4);
808
+ box-shadow: var(--popover-box-shadow);
809
+ color: hsl(var(--color-neutral));
810
+ font-size: inherit;
811
+ padding: var(--px-4) var(--px-6);
812
+ font-family: var(--font-family);
813
+ }
814
+ .graphiql-tabs {
815
+ display: flex;
816
+ align-items: center;
817
+ overflow-x: auto;
818
+ padding: var(--px-12)
819
+ }
820
+
821
+ .graphiql-tabs > :not(:first-child) {
822
+ margin-left: var(--px-12);
823
+ }
824
+
825
+ .graphiql-tab {
826
+ align-items: stretch;
827
+ border-radius: var(--border-radius-8);
828
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
829
+ display: flex
830
+ }
831
+
832
+ .graphiql-tab > button.graphiql-tab-close {
833
+ visibility: hidden;
834
+ }
835
+
836
+ .graphiql-tab.graphiql-tab-active > button.graphiql-tab-close,
837
+ .graphiql-tab:hover > button.graphiql-tab-close,
838
+ .graphiql-tab:focus-within > button.graphiql-tab-close {
839
+ visibility: unset;
840
+ }
841
+
842
+ .graphiql-tab.graphiql-tab-active {
843
+ background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
844
+ color: hsla(var(--color-neutral), 1);
845
+ }
846
+
847
+ button.graphiql-tab-button {
848
+ padding: var(--px-4) 0 var(--px-4) var(--px-8);
849
+ }
850
+
851
+ button.graphiql-tab-close {
852
+ align-items: center;
853
+ display: flex;
854
+ padding: var(--px-4) var(--px-8)
855
+ }
856
+
857
+ button.graphiql-tab-close > svg {
858
+ height: var(--px-8);
859
+ width: var(--px-8);
860
+ }
861
+ .graphiql-history-header {
862
+ font-size: var(--font-size-h2);
863
+ font-weight: var(--font-weight-medium);
864
+ display: flex;
865
+ justify-content: space-between;
866
+ align-items: center;
867
+ }
868
+
869
+ .graphiql-history-header button {
870
+ font-size: var(--font-size-inline-code);
871
+ padding: var(--px-6) var(--px-10);
872
+ }
873
+
874
+ .graphiql-history-items {
875
+ margin: var(--px-16) 0 0;
876
+ list-style: none;
877
+ padding: 0;
878
+ }
879
+
880
+ .graphiql-history-item {
881
+ border-radius: var(--border-radius-4);
882
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
883
+ display: flex;
884
+ font-size: var(--font-size-inline-code);
885
+ font-family: var(--font-family-mono);
886
+ height: 34px
887
+ }
888
+
889
+ .graphiql-history-item:hover {
890
+ color: hsl(var(--color-neutral));
891
+ background-color: hsla(var(--color-neutral), var(--alpha-background-light));
892
+ }
893
+
894
+ .graphiql-history-item:not(:first-child) {
895
+ margin-top: var(--px-4);
896
+ }
897
+
898
+ .graphiql-history-item.editable {
899
+ background-color: hsla(
900
+ var(--color-primary),
901
+ var(--alpha-background-medium)
902
+ )
903
+ }
904
+
905
+ .graphiql-history-item.editable > input {
906
+ background: transparent;
907
+ border: none;
908
+ flex: 1;
909
+ margin: 0;
910
+ outline: none;
911
+ padding: 0 var(--px-10);
912
+ width: 100%
913
+ }
914
+
915
+ .graphiql-history-item.editable > input::placeholder {
916
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
917
+ }
918
+
919
+ .graphiql-history-item.editable > button {
920
+ color: hsl(var(--color-primary));
921
+ padding: 0 var(--px-10)
922
+ }
923
+
924
+ .graphiql-history-item.editable > button:active {
925
+ background-color: hsla(
926
+ var(--color-primary),
927
+ var(--alpha-background-heavy)
928
+ );
929
+ }
930
+
931
+ .graphiql-history-item.editable > button:focus {
932
+ outline: hsl(var(--color-primary)) auto 1px;
933
+ }
934
+
935
+ .graphiql-history-item.editable > button > svg {
936
+ display: block;
937
+ }
938
+
939
+ button.graphiql-history-item-label {
940
+ flex: 1;
941
+ padding: var(--px-8) var(--px-10);
942
+ overflow: hidden;
943
+ text-overflow: ellipsis;
944
+ white-space: nowrap;
945
+ }
946
+
947
+ button.graphiql-history-item-action {
948
+ align-items: center;
949
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
950
+ display: flex;
951
+ padding: var(--px-8) var(--px-6)
952
+ }
953
+
954
+ button.graphiql-history-item-action:hover {
955
+ color: hsl(var(--color-neutral));
956
+ }
957
+
958
+ button.graphiql-history-item-action > svg {
959
+ height: 14px;
960
+ width: 14px;
961
+ }
962
+
963
+ .graphiql-history-item-spacer {
964
+ height: var(--px-16);
965
+ }
966
+ .graphiql-doc-explorer-default-value {
967
+ color: hsl(var(--color-success));
968
+ }
969
+ a.graphiql-doc-explorer-type-name {
970
+ color: hsl(var(--color-warning));
971
+ text-decoration: none
972
+ }
973
+ a.graphiql-doc-explorer-type-name:hover {
974
+ text-decoration: underline;
975
+ }
976
+ a.graphiql-doc-explorer-type-name:focus {
977
+ outline: hsl(var(--color-warning)) auto 1px;
978
+ }
979
+
980
+ .graphiql-doc-explorer-argument > * + * {
981
+ margin-top: var(--px-12);
982
+ }
983
+
984
+ .graphiql-doc-explorer-argument-name {
985
+ color: hsl(var(--color-secondary));
986
+ }
987
+
988
+ .graphiql-doc-explorer-argument-deprecation {
989
+ background-color: hsla(var(--color-warning), var(--alpha-background-light));
990
+ border: 1px solid hsl(var(--color-warning));
991
+ border-radius: var(--border-radius-4);
992
+ color: hsl(var(--color-warning));
993
+ padding: var(--px-8);
994
+ }
995
+
996
+ .graphiql-doc-explorer-argument-deprecation-label {
997
+ font-size: var(--font-size-hint);
998
+ font-weight: var(--font-weight-medium);
999
+ }
1000
+ .graphiql-doc-explorer-deprecation {
1001
+ background-color: hsla(var(--color-warning), var(--alpha-background-light));
1002
+ border: 1px solid hsl(var(--color-warning));
1003
+ border-radius: var(--px-4);
1004
+ color: hsl(var(--color-warning));
1005
+ padding: var(--px-8);
1006
+ }
1007
+
1008
+ .graphiql-doc-explorer-deprecation-label {
1009
+ font-size: var(--font-size-hint);
1010
+ font-weight: var(--font-weight-medium);
1011
+ }
1012
+ .graphiql-doc-explorer-directive {
1013
+ color: hsl(var(--color-secondary));
1014
+ }
1015
+ .graphiql-doc-explorer-section-title {
1016
+ align-items: center;
1017
+ display: flex;
1018
+ font-size: var(--font-size-hint);
1019
+ font-weight: var(--font-weight-medium);
1020
+ line-height: 1
1021
+ }
1022
+
1023
+ .graphiql-doc-explorer-section-title > svg {
1024
+ height: var(--px-16);
1025
+ margin-right: var(--px-8);
1026
+ width: var(--px-16);
1027
+ }
1028
+
1029
+ .graphiql-doc-explorer-section-content {
1030
+ margin-left: var(--px-8);
1031
+ margin-top: var(--px-16)
1032
+ }
1033
+
1034
+ .graphiql-doc-explorer-section-content > * + * {
1035
+ margin-top: var(--px-16);
1036
+ }
1037
+ .graphiql-doc-explorer-root-type {
1038
+ color: hsl(var(--color-info));
1039
+ }
1040
+ .graphiql-doc-explorer-search {
1041
+ color: hsla(var(--color-neutral), var(--alpha-secondary))
1042
+ }
1043
+
1044
+ .graphiql-doc-explorer-search:not([data-state='idle']) {
1045
+ border: var(--popover-border);
1046
+ border-radius: var(--border-radius-4);
1047
+ box-shadow: var(--popover-box-shadow);
1048
+ color: hsl(var(--color-neutral))
1049
+ }
1050
+
1051
+ .graphiql-doc-explorer-search:not([data-state='idle']) .graphiql-doc-explorer-search-input {
1052
+ background: hsl(var(--color-base));
1053
+ }
1054
+
1055
+ .graphiql-doc-explorer-search-input {
1056
+ align-items: center;
1057
+ background-color: hsla(var(--color-neutral), var(--alpha-background-light));
1058
+ border-radius: var(--border-radius-4);
1059
+ display: flex;
1060
+ padding: var(--px-8) var(--px-12);
1061
+ }
1062
+
1063
+ .graphiql-doc-explorer-search [role='combobox'] {
1064
+ border: none;
1065
+ background-color: transparent;
1066
+ margin-left: var(--px-4);
1067
+ width: 100%
1068
+ }
1069
+
1070
+ .graphiql-doc-explorer-search [role='combobox']:focus {
1071
+ outline: none;
1072
+ }
1073
+
1074
+ .graphiql-doc-explorer-search [role='listbox'] {
1075
+ background-color: hsl(var(--color-base));
1076
+ border: none;
1077
+ border-bottom-left-radius: var(--border-radius-4);
1078
+ border-bottom-right-radius: var(--border-radius-4);
1079
+ border-top: 1px solid
1080
+ hsla(var(--color-neutral), var(--alpha-background-heavy));
1081
+ max-height: 400px;
1082
+ overflow-y: auto;
1083
+ margin: 0;
1084
+ font-size: var(--font-size-body);
1085
+ padding: var(--px-4);
1086
+ /**
1087
+ * This makes sure that the logic for auto-scrolling the search results when
1088
+ * using keyboard navigation works properly (we use `offsetTop` there).
1089
+ */
1090
+ position: relative;
1091
+ }
1092
+
1093
+ .graphiql-doc-explorer-search [role='option'] {
1094
+ border-radius: var(--border-radius-4);
1095
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
1096
+ overflow-x: hidden;
1097
+ padding: var(--px-8) var(--px-12);
1098
+ text-overflow: ellipsis;
1099
+ white-space: nowrap;
1100
+ cursor: pointer
1101
+ }
1102
+
1103
+ .graphiql-doc-explorer-search [role='option'][data-headlessui-state='active'] {
1104
+ background-color: hsla(var(--color-neutral), var(--alpha-background-light));
1105
+ }
1106
+
1107
+ .graphiql-doc-explorer-search [role='option']:hover {
1108
+ background-color: hsla(
1109
+ var(--color-neutral),
1110
+ var(--alpha-background-medium)
1111
+ );
1112
+ }
1113
+
1114
+ .graphiql-doc-explorer-search [role='option'][data-headlessui-state='active']:hover {
1115
+ background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
1116
+ }
1117
+
1118
+ :is(.graphiql-doc-explorer-search [role='option']) + :is(.graphiql-doc-explorer-search [role='option']) {
1119
+ margin-top: var(--px-4);
1120
+ }
1121
+
1122
+ .graphiql-doc-explorer-search-type {
1123
+ color: hsl(var(--color-info));
1124
+ }
1125
+
1126
+ .graphiql-doc-explorer-search-field {
1127
+ color: hsl(var(--color-warning));
1128
+ }
1129
+
1130
+ .graphiql-doc-explorer-search-argument {
1131
+ color: hsl(var(--color-secondary));
1132
+ }
1133
+
1134
+ .graphiql-doc-explorer-search-divider {
1135
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
1136
+ font-size: var(--font-size-hint);
1137
+ font-weight: var(--font-weight-medium);
1138
+ margin-top: var(--px-8);
1139
+ padding: var(--px-8) var(--px-12);
1140
+ }
1141
+
1142
+ .graphiql-doc-explorer-search-empty {
1143
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
1144
+ padding: var(--px-8) var(--px-12);
1145
+ }
1146
+ a.graphiql-doc-explorer-field-name {
1147
+ color: hsl(var(--color-info));
1148
+ text-decoration: none
1149
+ }
1150
+ a.graphiql-doc-explorer-field-name:hover {
1151
+ text-decoration: underline;
1152
+ }
1153
+ a.graphiql-doc-explorer-field-name:focus {
1154
+ outline: hsl(var(--color-info)) auto 1px;
1155
+ }
1156
+ .graphiql-doc-explorer-item > :not(:first-child) {
1157
+ margin-top: var(--px-12);
1158
+ }
1159
+
1160
+ .graphiql-doc-explorer-argument-multiple {
1161
+ margin-left: var(--px-8);
1162
+ }
1163
+
1164
+ .graphiql-doc-explorer-enum-value {
1165
+ color: hsl(var(--color-info));
1166
+ }
1167
+ /* The header of the doc explorer */
1168
+ .graphiql-doc-explorer-header {
1169
+ display: flex;
1170
+ justify-content: space-between;
1171
+ position: relative
1172
+ }
1173
+ .graphiql-doc-explorer-header:focus-within .graphiql-doc-explorer-title {
1174
+ /* Hide the header when focussing the search input */
1175
+ visibility: hidden;
1176
+ }
1177
+ .graphiql-doc-explorer-header:focus-within .graphiql-doc-explorer-back:not(:focus) {
1178
+ /**
1179
+ * Make the back link invisible when focussing the search input. Hiding
1180
+ * it in any other way makes it impossible to focus the link by pressing
1181
+ * Shift-Tab while the input is focussed.
1182
+ */
1183
+ color: transparent;
1184
+ }
1185
+ .graphiql-doc-explorer-header-content {
1186
+ display: flex;
1187
+ flex-direction: column;
1188
+ min-width: 0;
1189
+ }
1190
+
1191
+ /* The search input in the header of the doc explorer */
1192
+ .graphiql-doc-explorer-search {
1193
+ position: absolute;
1194
+ right: 0;
1195
+ top: 0
1196
+ }
1197
+ .graphiql-doc-explorer-search:focus-within {
1198
+ left: 0;
1199
+ }
1200
+ .graphiql-doc-explorer-search:not(:focus-within) [role='combobox'] {
1201
+ height: 24px;
1202
+ width: 5ch;
1203
+ }
1204
+ .graphiql-doc-explorer-search [role='combobox']:focus {
1205
+ width: 100%;
1206
+ }
1207
+
1208
+ /* The back-button in the doc explorer */
1209
+ a.graphiql-doc-explorer-back {
1210
+ align-items: center;
1211
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
1212
+ display: flex;
1213
+ text-decoration: none
1214
+ }
1215
+ a.graphiql-doc-explorer-back:hover {
1216
+ text-decoration: underline;
1217
+ }
1218
+ a.graphiql-doc-explorer-back:focus {
1219
+ outline: hsla(var(--color-neutral), var(--alpha-secondary)) auto 1px
1220
+ }
1221
+ a.graphiql-doc-explorer-back:focus + .graphiql-doc-explorer-title {
1222
+ /* Don't hide the header when focussing the back link */
1223
+ visibility: unset;
1224
+ }
1225
+ a.graphiql-doc-explorer-back > svg {
1226
+ height: var(--px-8);
1227
+ margin-right: var(--px-8);
1228
+ width: var(--px-8);
1229
+ }
1230
+
1231
+ /* The title of the currently active page in the doc explorer */
1232
+ .graphiql-doc-explorer-title {
1233
+ font-weight: var(--font-weight-medium);
1234
+ font-size: var(--font-size-h2);
1235
+ overflow-x: hidden;
1236
+ text-overflow: ellipsis;
1237
+ white-space: nowrap
1238
+ }
1239
+ .graphiql-doc-explorer-title:not(:first-child) {
1240
+ font-size: var(--font-size-h3);
1241
+ margin-top: var(--px-8);
1242
+ }
1243
+
1244
+ /* The contents of the currently active page in the doc explorer */
1245
+ .graphiql-doc-explorer-content > * {
1246
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
1247
+ margin-top: var(--px-20);
1248
+ }
1249
+
1250
+ /* Error message */
1251
+ .graphiql-doc-explorer-error {
1252
+ background-color: hsla(var(--color-error), var(--alpha-background-heavy));
1253
+ border: 1px solid hsl(var(--color-error));
1254
+ border-radius: var(--border-radius-8);
1255
+ color: hsl(var(--color-error));
1256
+ padding: var(--px-8) var(--px-12);
1257
+ }
1258
+ /* BASICS */
1259
+
1260
+ .CodeMirror {
1261
+ /* Set height, width, borders, and global font properties here */
1262
+ font-family: monospace;
1263
+ height: 300px;
1264
+ color: black;
1265
+ direction: ltr;
1266
+ }
1267
+
1268
+ /* PADDING */
1269
+
1270
+ .CodeMirror-lines {
1271
+ padding: 4px 0; /* Vertical padding around content */
1272
+ }
1273
+
1274
+ .CodeMirror pre.CodeMirror-line,
1275
+ .CodeMirror pre.CodeMirror-line-like {
1276
+ padding: 0 4px; /* Horizontal padding of content */
1277
+ }
1278
+
1279
+ .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
1280
+ background-color: white; /* The little square between H and V scrollbars */
1281
+ }
1282
+
1283
+ /* GUTTER */
1284
+
1285
+ .CodeMirror-gutters {
1286
+ border-right: 1px solid #ddd;
1287
+ background-color: #f7f7f7;
1288
+ white-space: nowrap;
1289
+ }
1290
+
1291
+ .CodeMirror-linenumbers {}
1292
+
1293
+ .CodeMirror-linenumber {
1294
+ padding: 0 3px 0 5px;
1295
+ min-width: 20px;
1296
+ text-align: right;
1297
+ color: #999;
1298
+ white-space: nowrap;
1299
+ }
1300
+
1301
+ .CodeMirror-guttermarker { color: black; }
1302
+
1303
+ .CodeMirror-guttermarker-subtle { color: #999; }
1304
+
1305
+ /* CURSOR */
1306
+
1307
+ .CodeMirror-cursor {
1308
+ border-left: 1px solid black;
1309
+ border-right: none;
1310
+ width: 0;
1311
+ }
1312
+
1313
+ /* Shown when moving in bi-directional text */
1314
+
1315
+ .CodeMirror div.CodeMirror-secondarycursor {
1316
+ border-left: 1px solid silver;
1317
+ }
1318
+
1319
+ .cm-fat-cursor .CodeMirror-cursor {
1320
+ width: auto;
1321
+ border: 0 !important;
1322
+ background: #7e7;
1323
+ }
1324
+
1325
+ .cm-fat-cursor div.CodeMirror-cursors {
1326
+ z-index: 1;
1327
+ }
1328
+
1329
+ .cm-fat-cursor .CodeMirror-line::selection,
1330
+ .cm-fat-cursor .CodeMirror-line > span::selection,
1331
+ .cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
1332
+
1333
+ .cm-fat-cursor .CodeMirror-line::-moz-selection,
1334
+ .cm-fat-cursor .CodeMirror-line > span::-moz-selection,
1335
+ .cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
1336
+
1337
+ .cm-fat-cursor { caret-color: transparent; }
1338
+
1339
+ @-moz-keyframes blink {
1340
+ 0% {}
1341
+ 50% { background-color: transparent; }
1342
+ 100% {}
1343
+ }
1344
+
1345
+ @-webkit-keyframes blink {
1346
+ 0% {}
1347
+ 50% { background-color: transparent; }
1348
+ 100% {}
1349
+ }
1350
+
1351
+ @keyframes blink {
1352
+ 0% {}
1353
+ 50% { background-color: transparent; }
1354
+ 100% {}
1355
+ }
1356
+
1357
+ /* Can style cursor different in overwrite (non-insert) mode */
1358
+
1359
+ .CodeMirror-overwrite .CodeMirror-cursor {}
1360
+
1361
+ .cm-tab { display: inline-block; text-decoration: inherit; }
1362
+
1363
+ .CodeMirror-rulers {
1364
+ position: absolute;
1365
+ left: 0; right: 0; top: -50px; bottom: 0;
1366
+ overflow: hidden;
1367
+ }
1368
+
1369
+ .CodeMirror-ruler {
1370
+ border-left: 1px solid #ccc;
1371
+ top: 0; bottom: 0;
1372
+ position: absolute;
1373
+ }
1374
+
1375
+ /* DEFAULT THEME */
1376
+
1377
+ .cm-s-default .cm-header {color: blue;}
1378
+
1379
+ .cm-s-default .cm-quote {color: #090;}
1380
+
1381
+ .cm-negative {color: #d44;}
1382
+
1383
+ .cm-positive {color: #292;}
1384
+
1385
+ .cm-header, .cm-strong {font-weight: bold;}
1386
+
1387
+ .cm-em {font-style: italic;}
1388
+
1389
+ .cm-link {text-decoration: underline;}
1390
+
1391
+ .cm-strikethrough {text-decoration: line-through;}
1392
+
1393
+ .cm-s-default .cm-keyword {color: #708;}
1394
+
1395
+ .cm-s-default .cm-atom {color: #219;}
1396
+
1397
+ .cm-s-default .cm-number {color: #164;}
1398
+
1399
+ .cm-s-default .cm-def {color: #00f;}
1400
+
1401
+ .cm-s-default .cm-variable,
1402
+ .cm-s-default .cm-punctuation,
1403
+ .cm-s-default .cm-property,
1404
+ .cm-s-default .cm-operator {}
1405
+
1406
+ .cm-s-default .cm-variable-2 {color: #05a;}
1407
+
1408
+ .cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
1409
+
1410
+ .cm-s-default .cm-comment {color: #a50;}
1411
+
1412
+ .cm-s-default .cm-string {color: #a11;}
1413
+
1414
+ .cm-s-default .cm-string-2 {color: #f50;}
1415
+
1416
+ .cm-s-default .cm-meta {color: #555;}
1417
+
1418
+ .cm-s-default .cm-qualifier {color: #555;}
1419
+
1420
+ .cm-s-default .cm-builtin {color: #30a;}
1421
+
1422
+ .cm-s-default .cm-bracket {color: #997;}
1423
+
1424
+ .cm-s-default .cm-tag {color: #170;}
1425
+
1426
+ .cm-s-default .cm-attribute {color: #00c;}
1427
+
1428
+ .cm-s-default .cm-hr {color: #999;}
1429
+
1430
+ .cm-s-default .cm-link {color: #00c;}
1431
+
1432
+ .cm-s-default .cm-error {color: #f00;}
1433
+
1434
+ .cm-invalidchar {color: #f00;}
1435
+
1436
+ .CodeMirror-composing { border-bottom: 2px solid; }
1437
+
1438
+ /* Default styles for common addons */
1439
+
1440
+ div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
1441
+
1442
+ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
1443
+
1444
+ .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
1445
+
1446
+ .CodeMirror-activeline-background {background: #e8f2ff;}
1447
+
1448
+ /* STOP */
1449
+
1450
+ /* The rest of this file contains styles related to the mechanics of
1451
+ the editor. You probably shouldn't touch them. */
1452
+
1453
+ .CodeMirror {
1454
+ position: relative;
1455
+ overflow: hidden;
1456
+ background: white;
1457
+ }
1458
+
1459
+ .CodeMirror-scroll {
1460
+ overflow: scroll !important; /* Things will break if this is overridden */
1461
+ /* 50px is the magic margin used to hide the element's real scrollbars */
1462
+ /* See overflow: hidden in .CodeMirror */
1463
+ margin-bottom: -50px; margin-right: -50px;
1464
+ padding-bottom: 50px;
1465
+ height: 100%;
1466
+ outline: none; /* Prevent dragging from highlighting the element */
1467
+ position: relative;
1468
+ z-index: 0;
1469
+ }
1470
+
1471
+ .CodeMirror-sizer {
1472
+ position: relative;
1473
+ border-right: 50px solid transparent;
1474
+ }
1475
+
1476
+ /* The fake, visible scrollbars. Used to force redraw during scrolling
1477
+ before actual scrolling happens, thus preventing shaking and
1478
+ flickering artifacts. */
1479
+
1480
+ .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
1481
+ position: absolute;
1482
+ z-index: 6;
1483
+ display: none;
1484
+ outline: none;
1485
+ }
1486
+
1487
+ .CodeMirror-vscrollbar {
1488
+ right: 0; top: 0;
1489
+ overflow-x: hidden;
1490
+ overflow-y: scroll;
1491
+ }
1492
+
1493
+ .CodeMirror-hscrollbar {
1494
+ bottom: 0; left: 0;
1495
+ overflow-y: hidden;
1496
+ overflow-x: scroll;
1497
+ }
1498
+
1499
+ .CodeMirror-scrollbar-filler {
1500
+ right: 0; bottom: 0;
1501
+ }
1502
+
1503
+ .CodeMirror-gutter-filler {
1504
+ left: 0; bottom: 0;
1505
+ }
1506
+
1507
+ .CodeMirror-gutters {
1508
+ position: absolute; left: 0; top: 0;
1509
+ min-height: 100%;
1510
+ z-index: 3;
1511
+ }
1512
+
1513
+ .CodeMirror-gutter {
1514
+ white-space: normal;
1515
+ height: 100%;
1516
+ display: inline-block;
1517
+ vertical-align: top;
1518
+ margin-bottom: -50px;
1519
+ }
1520
+
1521
+ .CodeMirror-gutter-wrapper {
1522
+ position: absolute;
1523
+ z-index: 4;
1524
+ background: none !important;
1525
+ border: none !important;
1526
+ }
1527
+
1528
+ .CodeMirror-gutter-background {
1529
+ position: absolute;
1530
+ top: 0; bottom: 0;
1531
+ z-index: 4;
1532
+ }
1533
+
1534
+ .CodeMirror-gutter-elt {
1535
+ position: absolute;
1536
+ cursor: default;
1537
+ z-index: 4;
1538
+ }
1539
+
1540
+ .CodeMirror-gutter-wrapper ::selection { background-color: transparent }
1541
+
1542
+ .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
1543
+
1544
+ .CodeMirror-lines {
1545
+ cursor: text;
1546
+ min-height: 1px; /* prevents collapsing before first draw */
1547
+ }
1548
+
1549
+ .CodeMirror pre.CodeMirror-line,
1550
+ .CodeMirror pre.CodeMirror-line-like {
1551
+ /* Reset some styles that the rest of the page might have set */
1552
+ -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
1553
+ border-width: 0;
1554
+ background: transparent;
1555
+ font-family: inherit;
1556
+ font-size: inherit;
1557
+ margin: 0;
1558
+ white-space: pre;
1559
+ word-wrap: normal;
1560
+ line-height: inherit;
1561
+ color: inherit;
1562
+ z-index: 2;
1563
+ position: relative;
1564
+ overflow: visible;
1565
+ -webkit-tap-highlight-color: transparent;
1566
+ -webkit-font-variant-ligatures: contextual;
1567
+ font-variant-ligatures: contextual;
1568
+ }
1569
+
1570
+ .CodeMirror-wrap pre.CodeMirror-line,
1571
+ .CodeMirror-wrap pre.CodeMirror-line-like {
1572
+ word-wrap: break-word;
1573
+ white-space: pre-wrap;
1574
+ word-break: normal;
1575
+ }
1576
+
1577
+ .CodeMirror-linebackground {
1578
+ position: absolute;
1579
+ left: 0; right: 0; top: 0; bottom: 0;
1580
+ z-index: 0;
1581
+ }
1582
+
1583
+ .CodeMirror-linewidget {
1584
+ position: relative;
1585
+ z-index: 2;
1586
+ padding: 0.1px; /* Force widget margins to stay inside of the container */
1587
+ }
1588
+
1589
+ .CodeMirror-widget {}
1590
+
1591
+ .CodeMirror-rtl pre { direction: rtl; }
1592
+
1593
+ .CodeMirror-code {
1594
+ outline: none;
1595
+ }
1596
+
1597
+ /* Force content-box sizing for the elements where we expect it */
1598
+
1599
+ .CodeMirror-scroll,
1600
+ .CodeMirror-sizer,
1601
+ .CodeMirror-gutter,
1602
+ .CodeMirror-gutters,
1603
+ .CodeMirror-linenumber {
1604
+ -moz-box-sizing: content-box;
1605
+ box-sizing: content-box;
1606
+ }
1607
+
1608
+ .CodeMirror-measure {
1609
+ position: absolute;
1610
+ width: 100%;
1611
+ height: 0;
1612
+ overflow: hidden;
1613
+ visibility: hidden;
1614
+ }
1615
+
1616
+ .CodeMirror-cursor {
1617
+ position: absolute;
1618
+ pointer-events: none;
1619
+ }
1620
+
1621
+ .CodeMirror-measure pre { position: static; }
1622
+
1623
+ div.CodeMirror-cursors {
1624
+ visibility: hidden;
1625
+ position: relative;
1626
+ z-index: 3;
1627
+ }
1628
+
1629
+ div.CodeMirror-dragcursors {
1630
+ visibility: visible;
1631
+ }
1632
+
1633
+ .CodeMirror-focused div.CodeMirror-cursors {
1634
+ visibility: visible;
1635
+ }
1636
+
1637
+ .CodeMirror-selected { background: #d9d9d9; }
1638
+
1639
+ .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
1640
+
1641
+ .CodeMirror-crosshair { cursor: crosshair; }
1642
+
1643
+ .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
1644
+
1645
+ .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
1646
+
1647
+ .cm-searching {
1648
+ background-color: #ffa;
1649
+ background-color: rgba(255, 255, 0, .4);
1650
+ }
1651
+
1652
+ /* Used to force a border model for a node */
1653
+
1654
+ .cm-force-border { padding-right: .1px; }
1655
+
1656
+ @media print {
1657
+ /* Hide the cursor when printing */
1658
+ .CodeMirror div.CodeMirror-cursors {
1659
+ visibility: hidden;
1660
+ }
1661
+ }
1662
+
1663
+ /* See issue #2901 */
1664
+
1665
+ .cm-tab-wrap-hack:after { content: ''; }
1666
+
1667
+ /* Help users use markselection to safely style text background */
1668
+
1669
+ span.CodeMirror-selectedtext { background: none; }
1670
+
1671
+ /* Make the editors fill up their container and make them scrollable */
1672
+
1673
+ .graphiql-container .CodeMirror {
1674
+ height: 100%;
1675
+ position: absolute;
1676
+ width: 100%;
1677
+ }
1678
+
1679
+ /* Override font settings */
1680
+
1681
+ .graphiql-container .CodeMirror {
1682
+ font-family: var(--font-family-mono);
1683
+ }
1684
+
1685
+ /* Set default background color */
1686
+
1687
+ .graphiql-container .CodeMirror,
1688
+ .graphiql-container .CodeMirror-gutters {
1689
+ background: none;
1690
+ background-color: var(--editor-background, hsl(var(--color-base)));
1691
+ }
1692
+
1693
+ /* No padding around line numbers */
1694
+
1695
+ .graphiql-container .CodeMirror-linenumber {
1696
+ padding: 0;
1697
+ }
1698
+
1699
+ /* No border between gutter and editor */
1700
+
1701
+ .graphiql-container .CodeMirror-gutters {
1702
+ border: none;
1703
+ }
1704
+
1705
+ /**
1706
+ * Editor theme
1707
+ */
1708
+
1709
+ .cm-s-graphiql {
1710
+ /* Default to punctuation */
1711
+ color: hsla(var(--color-neutral), var(--alpha-tertiary))
1712
+
1713
+ /* OperationType, `fragment`, `on` */
1714
+ }
1715
+
1716
+ .cm-s-graphiql .cm-keyword {
1717
+ color: hsl(var(--color-primary));
1718
+ }
1719
+
1720
+ /* Name (OperationDefinition), FragmentName */
1721
+
1722
+ .cm-s-graphiql .cm-def {
1723
+ color: hsl(var(--color-tertiary));
1724
+ }
1725
+
1726
+ /* Punctuator (except `$` and `@`) */
1727
+
1728
+ .cm-s-graphiql .cm-punctuation {
1729
+ color: hsla(var(--color-neutral), var(--alpha-tertiary));
1730
+ }
1731
+
1732
+ /* Variable */
1733
+
1734
+ .cm-s-graphiql .cm-variable {
1735
+ color: hsl(var(--color-secondary));
1736
+ }
1737
+
1738
+ /* NamedType */
1739
+
1740
+ .cm-s-graphiql .cm-atom {
1741
+ color: hsl(var(--color-tertiary));
1742
+ }
1743
+
1744
+ /* IntValue, FloatValue */
1745
+
1746
+ .cm-s-graphiql .cm-number {
1747
+ color: hsl(var(--color-success));
1748
+ }
1749
+
1750
+ /* StringValue */
1751
+
1752
+ .cm-s-graphiql .cm-string {
1753
+ color: hsl(var(--color-warning));
1754
+ }
1755
+
1756
+ /* BooleanValue */
1757
+
1758
+ .cm-s-graphiql .cm-builtin {
1759
+ color: hsl(var(--color-success));
1760
+ }
1761
+
1762
+ /* EnumValue */
1763
+
1764
+ .cm-s-graphiql .cm-string-2 {
1765
+ color: hsl(var(--color-secondary));
1766
+ }
1767
+
1768
+ /* Name (ObjectField, Argument) */
1769
+
1770
+ .cm-s-graphiql .cm-attribute {
1771
+ color: hsl(var(--color-tertiary));
1772
+ }
1773
+
1774
+ /* Name (Directive) */
1775
+
1776
+ .cm-s-graphiql .cm-meta {
1777
+ color: hsl(var(--color-tertiary));
1778
+ }
1779
+
1780
+ /* Name (Alias, Field without Alias) */
1781
+
1782
+ .cm-s-graphiql .cm-property {
1783
+ color: hsl(var(--color-info));
1784
+ }
1785
+
1786
+ /* Name (Field with Alias) */
1787
+
1788
+ .cm-s-graphiql .cm-qualifier {
1789
+ color: hsl(var(--color-secondary));
1790
+ }
1791
+
1792
+ /* Comment */
1793
+
1794
+ .cm-s-graphiql .cm-comment {
1795
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
1796
+ }
1797
+
1798
+ /* Whitespace */
1799
+
1800
+ .cm-s-graphiql .cm-ws {
1801
+ color: hsla(var(--color-neutral), var(--alpha-tertiary));
1802
+ }
1803
+
1804
+ /* Invalid characters */
1805
+
1806
+ .cm-s-graphiql .cm-invalidchar {
1807
+ color: hsl(var(--color-error));
1808
+ }
1809
+
1810
+ /* Cursor */
1811
+
1812
+ .cm-s-graphiql .CodeMirror-cursor {
1813
+ border-left: 2px solid hsla(var(--color-neutral), var(--alpha-secondary));
1814
+ }
1815
+
1816
+ /* Color for line numbers and fold-gutters */
1817
+
1818
+ .cm-s-graphiql .CodeMirror-linenumber {
1819
+ color: hsla(var(--color-neutral), var(--alpha-tertiary));
1820
+ }
1821
+
1822
+ /* Matching bracket colors */
1823
+
1824
+ .graphiql-container div.CodeMirror span.CodeMirror-matchingbracket,
1825
+ .graphiql-container div.CodeMirror span.CodeMirror-nonmatchingbracket {
1826
+ color: hsl(var(--color-warning));
1827
+ }
1828
+
1829
+ /* Selected text blocks */
1830
+
1831
+ .graphiql-container .CodeMirror-selected,
1832
+ .graphiql-container .CodeMirror-focused .CodeMirror-selected {
1833
+ background: hsla(var(--color-neutral), var(--alpha-background-heavy));
1834
+ }
1835
+
1836
+ /* Position the search dialog */
1837
+
1838
+ .graphiql-container .CodeMirror-dialog {
1839
+ background: inherit;
1840
+ color: inherit;
1841
+ left: 0;
1842
+ right: 0;
1843
+ overflow: hidden;
1844
+ padding: var(--px-2) var(--px-6);
1845
+ position: absolute;
1846
+ z-index: 6;
1847
+ }
1848
+
1849
+ .graphiql-container .CodeMirror-dialog-top {
1850
+ border-bottom: 1px solid
1851
+ hsla(var(--color-neutral), var(--alpha-background-heavy));
1852
+ padding-bottom: var(--px-12);
1853
+ top: 0;
1854
+ }
1855
+
1856
+ .graphiql-container .CodeMirror-dialog-bottom {
1857
+ border-top: 1px solid
1858
+ hsla(var(--color-neutral), var(--alpha-background-heavy));
1859
+ bottom: 0;
1860
+ padding-top: var(--px-12);
1861
+ }
1862
+
1863
+ /* Hide the search hint */
1864
+
1865
+ .graphiql-container .CodeMirror-search-hint {
1866
+ display: none;
1867
+ }
1868
+
1869
+ /* Style the input field for searching */
1870
+
1871
+ .graphiql-container .CodeMirror-dialog input {
1872
+ border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
1873
+ border-radius: var(--border-radius-4);
1874
+ padding: var(--px-4);
1875
+ }
1876
+
1877
+ .graphiql-container .CodeMirror-dialog input:focus {
1878
+ outline: hsl(var(--color-primary)) solid 2px;
1879
+ }
1880
+
1881
+ /* Set the highlight color for search results */
1882
+
1883
+ .graphiql-container .cm-searching {
1884
+ background-color: hsla(var(--color-warning), var(--alpha-background-light));
1885
+ /**
1886
+ * When cycling through search results, CodeMirror overlays the current
1887
+ * selection with another element that has the .CodeMirror-selected class
1888
+ * applied. This adds another background color (see above), but this extra
1889
+ * box does not quite match the height of this element. To match them up we
1890
+ * add some extra padding here. (Note that this doesn't affect the line
1891
+ * height of the CodeMirror editor as all line wrappers have a fixed height.)
1892
+ */
1893
+ padding-bottom: 1.5px;
1894
+ padding-top: 0.5px;
1895
+ }
1896
+ .CodeMirror-foldmarker {
1897
+ color: blue;
1898
+ text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
1899
+ font-family: arial;
1900
+ line-height: .3;
1901
+ cursor: pointer;
1902
+ }
1903
+ .CodeMirror-foldgutter {
1904
+ width: .7em;
1905
+ }
1906
+ .CodeMirror-foldgutter-open,
1907
+ .CodeMirror-foldgutter-folded {
1908
+ cursor: pointer;
1909
+ }
1910
+ .CodeMirror-foldgutter-open:after {
1911
+ content: "\25BE";
1912
+ }
1913
+ .CodeMirror-foldgutter-folded:after {
1914
+ content: "\25B8";
1915
+ }
1916
+ .CodeMirror-foldgutter {
1917
+ width: var(--px-12);
1918
+ }
1919
+ .CodeMirror-foldmarker {
1920
+ background-color: hsl(var(--color-info));
1921
+ border-radius: var(--border-radius-4);
1922
+ color: hsl(var(--color-base));
1923
+ font-family: inherit;
1924
+ margin: 0 var(--px-4);
1925
+ padding: 0 var(--px-8);
1926
+ text-shadow: none;
1927
+ }
1928
+ .CodeMirror-foldgutter-open,
1929
+ .CodeMirror-foldgutter-folded {
1930
+ color: hsla(var(--color-neutral), var(--alpha-tertiary))
1931
+ }
1932
+ .CodeMirror-foldgutter-open::after, .CodeMirror-foldgutter-folded::after {
1933
+ margin: 0 var(--px-2);
1934
+ }
1935
+ .graphiql-editor {
1936
+ height: 100%;
1937
+ position: relative;
1938
+ width: 100%
1939
+ }
1940
+ .graphiql-editor.hidden {
1941
+ /* Just setting `display: none;` would break the editor gutters */
1942
+ left: -9999px;
1943
+ position: absolute;
1944
+ top: -9999px;
1945
+ visibility: hidden;
1946
+ }
1947
+ /* The lint marker gutter */
1948
+ .CodeMirror-lint-markers {
1949
+ width: 16px;
1950
+ }
1951
+ .CodeMirror-lint-tooltip {
1952
+ background-color: #ffd;
1953
+ border: 1px solid black;
1954
+ border-radius: 4px 4px 4px 4px;
1955
+ color: black;
1956
+ font-family: monospace;
1957
+ font-size: 10pt;
1958
+ overflow: hidden;
1959
+ padding: 2px 5px;
1960
+ position: fixed;
1961
+ white-space: pre;
1962
+ white-space: pre-wrap;
1963
+ z-index: 100;
1964
+ max-width: 600px;
1965
+ opacity: 0;
1966
+ transition: opacity .4s;
1967
+ -moz-transition: opacity .4s;
1968
+ -webkit-transition: opacity .4s;
1969
+ -o-transition: opacity .4s;
1970
+ -ms-transition: opacity .4s;
1971
+ }
1972
+ .CodeMirror-lint-mark {
1973
+ background-position: left bottom;
1974
+ background-repeat: repeat-x;
1975
+ }
1976
+ .CodeMirror-lint-mark-warning {
1977
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=);
1978
+ }
1979
+ .CodeMirror-lint-mark-error {
1980
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==);
1981
+ }
1982
+ .CodeMirror-lint-marker {
1983
+ background-position: center center;
1984
+ background-repeat: no-repeat;
1985
+ cursor: pointer;
1986
+ display: inline-block;
1987
+ height: 16px;
1988
+ width: 16px;
1989
+ vertical-align: middle;
1990
+ position: relative;
1991
+ }
1992
+ .CodeMirror-lint-message {
1993
+ padding-left: 18px;
1994
+ background-position: top left;
1995
+ background-repeat: no-repeat;
1996
+ }
1997
+ .CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
1998
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=);
1999
+ }
2000
+ .CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
2001
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=);
2002
+ }
2003
+ .CodeMirror-lint-marker-multiple {
2004
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC);
2005
+ background-repeat: no-repeat;
2006
+ background-position: right bottom;
2007
+ width: 100%; height: 100%;
2008
+ }
2009
+ .CodeMirror-lint-line-error {
2010
+ background-color: rgba(183, 76, 81, 0.08);
2011
+ }
2012
+ .CodeMirror-lint-line-warning {
2013
+ background-color: rgba(255, 211, 0, 0.1);
2014
+ }
2015
+ /* Text styles */
2016
+ .CodeMirror-lint-mark-error,
2017
+ .CodeMirror-lint-mark-warning {
2018
+ background-repeat: repeat-x;
2019
+ /**
2020
+ * The following two are very specific to the font size, so we use
2021
+ * "magic values" instead of variables.
2022
+ */
2023
+ background-size: 10px 3px;
2024
+ background-position: 0 95%;
2025
+ }
2026
+ .cm-s-graphiql .CodeMirror-lint-mark-error {
2027
+ color: hsl(var(--color-error));
2028
+ }
2029
+ .CodeMirror-lint-mark-error {
2030
+ background-image: linear-gradient(
2031
+ 45deg,
2032
+ transparent 65%,
2033
+ hsl(var(--color-error)) 80%,
2034
+ transparent 90%
2035
+ ),
2036
+ linear-gradient(
2037
+ 135deg,
2038
+ transparent 5%,
2039
+ hsl(var(--color-error)) 15%,
2040
+ transparent 25%
2041
+ ),
2042
+ linear-gradient(
2043
+ 135deg,
2044
+ transparent 45%,
2045
+ hsl(var(--color-error)) 55%,
2046
+ transparent 65%
2047
+ ),
2048
+ linear-gradient(
2049
+ 45deg,
2050
+ transparent 25%,
2051
+ hsl(var(--color-error)) 35%,
2052
+ transparent 50%
2053
+ );
2054
+ }
2055
+ .cm-s-graphiql .CodeMirror-lint-mark-warning {
2056
+ color: hsl(var(--color-warning));
2057
+ }
2058
+ .CodeMirror-lint-mark-warning {
2059
+ background-image: linear-gradient(
2060
+ 45deg,
2061
+ transparent 65%,
2062
+ hsl(var(--color-warning)) 80%,
2063
+ transparent 90%
2064
+ ),
2065
+ linear-gradient(
2066
+ 135deg,
2067
+ transparent 5%,
2068
+ hsl(var(--color-warning)) 15%,
2069
+ transparent 25%
2070
+ ),
2071
+ linear-gradient(
2072
+ 135deg,
2073
+ transparent 45%,
2074
+ hsl(var(--color-warning)) 55%,
2075
+ transparent 65%
2076
+ ),
2077
+ linear-gradient(
2078
+ 45deg,
2079
+ transparent 25%,
2080
+ hsl(var(--color-warning)) 35%,
2081
+ transparent 50%
2082
+ );
2083
+ }
2084
+ /* Popup styles */
2085
+ .CodeMirror-lint-tooltip {
2086
+ background-color: hsl(var(--color-base));
2087
+ border: var(--popover-border);
2088
+ border-radius: var(--border-radius-8);
2089
+ box-shadow: var(--popover-box-shadow);
2090
+ font-size: var(--font-size-body);
2091
+ font-family: var(--font-family);
2092
+ max-width: 600px;
2093
+ overflow: hidden;
2094
+ padding: var(--px-12);
2095
+ }
2096
+ .CodeMirror-lint-message-error,
2097
+ .CodeMirror-lint-message-warning {
2098
+ background-image: none;
2099
+ padding: 0;
2100
+ }
2101
+ .CodeMirror-lint-message-error {
2102
+ color: hsl(var(--color-error));
2103
+ }
2104
+ .CodeMirror-lint-message-warning {
2105
+ color: hsl(var(--color-warning));
2106
+ }
2107
+ .CodeMirror-hints {
2108
+ position: absolute;
2109
+ z-index: 10;
2110
+ overflow: hidden;
2111
+ list-style: none;
2112
+
2113
+ margin: 0;
2114
+ padding: 2px;
2115
+
2116
+ -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
2117
+ -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
2118
+ box-shadow: 2px 3px 5px rgba(0,0,0,.2);
2119
+ border-radius: 3px;
2120
+ border: 1px solid silver;
2121
+
2122
+ background: white;
2123
+ font-size: 90%;
2124
+ font-family: monospace;
2125
+
2126
+ max-height: 20em;
2127
+ overflow-y: auto;
2128
+ }
2129
+
2130
+ .CodeMirror-hint {
2131
+ margin: 0;
2132
+ padding: 0 4px;
2133
+ border-radius: 2px;
2134
+ white-space: pre;
2135
+ color: black;
2136
+ cursor: pointer;
2137
+ }
2138
+
2139
+ li.CodeMirror-hint-active {
2140
+ background: #08f;
2141
+ color: white;
2142
+ }
2143
+
2144
+ /* Popup styles */
2145
+
2146
+ .CodeMirror-hints {
2147
+ background: hsl(var(--color-base));
2148
+ border: var(--popover-border);
2149
+ border-radius: var(--border-radius-8);
2150
+ box-shadow: var(--popover-box-shadow);
2151
+ display: grid;
2152
+ font-family: var(--font-family);
2153
+ font-size: var(--font-size-body);
2154
+ grid-template-columns: auto fit-content(300px);
2155
+ /* By default this is equals exactly 8 items including margins */
2156
+ max-height: 264px;
2157
+ padding: 0;
2158
+ }
2159
+
2160
+ /* Autocomplete items */
2161
+
2162
+ .CodeMirror-hint {
2163
+ border-radius: var(--border-radius-4);
2164
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
2165
+ grid-column: 1 / 2;
2166
+ margin: var(--px-4);
2167
+ /* Override element style added by codemirror */
2168
+ padding: var(--px-6) var(--px-8) !important
2169
+ }
2170
+
2171
+ .CodeMirror-hint:not(:first-child) {
2172
+ margin-top: 0;
2173
+ }
2174
+
2175
+ li.CodeMirror-hint-active {
2176
+ background: hsla(var(--color-primary), var(--alpha-background-medium));
2177
+ color: hsl(var(--color-primary));
2178
+ }
2179
+
2180
+ /* Sidebar with additional information */
2181
+
2182
+ .CodeMirror-hint-information {
2183
+ border-left: 1px solid
2184
+ hsla(var(--color-neutral), var(--alpha-background-heavy));
2185
+ grid-column: 2 / 3;
2186
+ grid-row: 1 / 99999;
2187
+ /* Same as the popup */
2188
+ max-height: 264px;
2189
+ overflow: auto;
2190
+ padding: var(--px-12);
2191
+ }
2192
+
2193
+ .CodeMirror-hint-information-header {
2194
+ display: flex;
2195
+ align-items: baseline;
2196
+ }
2197
+
2198
+ .CodeMirror-hint-information-field-name {
2199
+ font-size: var(--font-size-h4);
2200
+ font-weight: var(--font-weight-medium);
2201
+ }
2202
+
2203
+ .CodeMirror-hint-information-type-name-pill {
2204
+ border: 1px solid hsla(var(--color-neutral), var(--alpha-tertiary));
2205
+ border-radius: var(--border-radius-4);
2206
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
2207
+ margin-left: var(--px-6);
2208
+ padding: var(--px-4);
2209
+ }
2210
+
2211
+ .CodeMirror-hint-information-type-name {
2212
+ color: inherit;
2213
+ text-decoration: none
2214
+ }
2215
+
2216
+ .CodeMirror-hint-information-type-name:hover {
2217
+ text-decoration: underline dotted;
2218
+ }
2219
+
2220
+ .CodeMirror-hint-information-description {
2221
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
2222
+ margin-top: var(--px-12);
2223
+ }
2224
+ /* Popup styles */
2225
+ .CodeMirror-info {
2226
+ background-color: hsl(var(--color-base));
2227
+ border: var(--popover-border);
2228
+ border-radius: var(--border-radius-8);
2229
+ box-shadow: var(--popover-box-shadow);
2230
+ color: hsl(var(--color-neutral));
2231
+ max-height: 300px;
2232
+ max-width: 400px;
2233
+ opacity: 0;
2234
+ overflow: auto;
2235
+ padding: var(--px-12);
2236
+ position: fixed;
2237
+ transition: opacity 0.15s;
2238
+ z-index: 10
2239
+
2240
+ /* Link styles */
2241
+ }
2242
+ .CodeMirror-info a {
2243
+ color: inherit;
2244
+ text-decoration: none
2245
+ }
2246
+ .CodeMirror-info a:hover {
2247
+ text-decoration: underline dotted;
2248
+ }
2249
+ /* Align elements in header */
2250
+ .CodeMirror-info .CodeMirror-info-header {
2251
+ display: flex;
2252
+ align-items: baseline;
2253
+ }
2254
+ /* Main elements */
2255
+ .CodeMirror-info .CodeMirror-info-header > .type-name,
2256
+ .CodeMirror-info .CodeMirror-info-header > .field-name,
2257
+ .CodeMirror-info .CodeMirror-info-header > .arg-name,
2258
+ .CodeMirror-info .CodeMirror-info-header > .directive-name,
2259
+ .CodeMirror-info .CodeMirror-info-header > .enum-value {
2260
+ font-size: var(--font-size-h4);
2261
+ font-weight: var(--font-weight-medium);
2262
+ }
2263
+ /* Type names */
2264
+ .CodeMirror-info .type-name-pill {
2265
+ border: 1px solid hsla(var(--color-neutral), var(--alpha-tertiary));
2266
+ border-radius: var(--border-radius-4);
2267
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
2268
+ margin-left: var(--px-6);
2269
+ padding: var(--px-4);
2270
+ }
2271
+ /* Descriptions */
2272
+ .CodeMirror-info .info-description {
2273
+ color: hsla(var(--color-neutral), var(--alpha-secondary));
2274
+ margin-top: var(--px-12);
2275
+ overflow: hidden;
2276
+ }
2277
+ /* Underline the clickable token */
2278
+ .CodeMirror-jump-token {
2279
+ text-decoration: underline dotted;
2280
+ cursor: pointer;
2281
+ }
2282
+ .auto-inserted-leaf.cm-property {
2283
+ animation-duration: 6s;
2284
+ animation-name: insertionFade;
2285
+ border-radius: var(--border-radius-4);
2286
+ padding: var(--px-2);
2287
+ }
2288
+
2289
+ @keyframes insertionFade {
2290
+ from,
2291
+ to {
2292
+ background-color: none;
2293
+ }
2294
+
2295
+ 15%,
2296
+ 85% {
2297
+ background-color: hsla(var(--color-warning), var(--alpha-background-light));
2298
+ }
2299
+ }
2300
+ button.graphiql-toolbar-button {
2301
+ display: flex;
2302
+ align-items: center;
2303
+ justify-content: center;
2304
+ height: var(--toolbar-width);
2305
+ width: var(--toolbar-width)
2306
+ }
2307
+ button.graphiql-toolbar-button.error {
2308
+ background: hsla(var(--color-error), var(--alpha-background-heavy));
2309
+ }
2310
+ .graphiql-execute-button-wrapper {
2311
+ position: relative;
2312
+ }
2313
+
2314
+ button.graphiql-execute-button {
2315
+ background-color: hsl(var(--color-primary));
2316
+ border: none;
2317
+ border-radius: var(--border-radius-8);
2318
+ cursor: pointer;
2319
+ height: var(--toolbar-width);
2320
+ padding: 0;
2321
+ width: var(--toolbar-width)
2322
+ }
2323
+
2324
+ button.graphiql-execute-button:hover {
2325
+ background-color: hsla(var(--color-primary), 0.9);
2326
+ }
2327
+
2328
+ button.graphiql-execute-button:active {
2329
+ background-color: hsla(var(--color-primary), 0.8);
2330
+ }
2331
+
2332
+ button.graphiql-execute-button:focus {
2333
+ outline: hsla(var(--color-primary), 0.8) auto 1px;
2334
+ }
2335
+
2336
+ button.graphiql-execute-button > svg {
2337
+ color: white;
2338
+ display: block;
2339
+ height: var(--px-16);
2340
+ margin: auto;
2341
+ width: var(--px-16);
2342
+ }
2343
+ button.graphiql-toolbar-menu {
2344
+ display: block;
2345
+ height: var(--toolbar-width);
2346
+ width: var(--toolbar-width);
2347
+ }
343
2348
 
344
2349
  /*!*********************************************************************************************************************!*\
345
2350
  !*** css ../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/postcss-loader/dist/cjs.js!./style.css ***!
@@ -375,7 +2380,7 @@
375
2380
  width: calc(var(--sidebar-width) - (2 * var(--px-8)));
376
2381
  }
377
2382
  .graphiql-container .graphiql-sidebar button.active {
378
- color: hsla(var(--color-neutral), 1);
2383
+ color: hsl(var(--color-neutral));
379
2384
  }
380
2385
  .graphiql-container .graphiql-sidebar button:not(:first-child) {
381
2386
  margin-top: var(--px-4);
@@ -491,7 +2496,7 @@ button.graphiql-tab-add > svg {
491
2496
  color: hsla(var(--color-neutral), var(--alpha-secondary));
492
2497
  }
493
2498
  .graphiql-container .graphiql-editor-tools button.active {
494
- color: hsla(var(--color-neutral), 1);
2499
+ color: hsl(var(--color-neutral));
495
2500
  }
496
2501
  /* The tab buttons to switch between editor tools */
497
2502
  .graphiql-container