/**
 * Sourcegraph theme for GraphiQL.
 *
 * This is 100% specific to our webapp, since GraphiQL does not actually
 * support any type of theming. These are just hard CSS overrides for the
 * standard GraphiQL CSS.
 *
 * This works pretty well for now, but is unfortunetly CSS spagetti code. If we
 * ever want to do anything more advanced with GraphiQL, we will likely have to
 * rewrite it as it sadly lacks a lot in terms of customization and
 * extensibility.
 **/

@import '~graphiql/graphiql.css';

/* stylelint-disable selector-class-pattern */
/* stylelint-disable declaration-property-unit-whitelist */

.graphiql-container {
    color: $color-text;
    font-family: var(--sans-serif);
    margin-bottom: 1px;

    .topBar {
        background: var(--body-bg);
        height: 3rem;
        border-color: $color-border;
        .title {
            white-space: nowrap;
        }
        .toolbar {
            flex: 1;
            margin-left: auto;
        }
    }
    .variable-editor-title,
    .resultWrap,
    .history-contents,
    .history-contents p,
    .doc-explorer-contents,
    .doc-category-title {
        border-color: $color-border;
    }
    .variable-editor-title,
    .result-window .CodeMirror-gutters,
    .historyPaneWrap,
    .history-contents,
    .doc-explorer,
    .doc-explorer-contents,
    .execute-options {
        background: #1d2837;
    }
    .variable-editor {
        height: auto;
        .variable-editor-title {
            border-bottom: none;
            font-weight: 400;
            color: #777;
        }
    }
    .history-title-bar,
    .doc-explorer-title-bar {
        height: 3rem;
        border-top: 1px solid var(--body-bg);
    }
    .doc-explorer-contents {
        font-family: var(--monospace);
        .keyword {
            color: var(--theme-color-keyword);
        }
        .search-box .search-box-clear {
            background: none;
        }
        .type-name {
            color: #b58901;
            font-weight: bold;
        }
        .field-name {
            color: var(--link-color);
        }
        .type-name:hover,
        .field-name:hover {
            text-decoration: underline;
            color: var(--link-hover-color);
        }
        .arg-name {
            color: var(--theme-color-attribute);
            font-style: italic;
        }
        .field-short-description {
            font-family: var(--sans-serif);
            color: $color-text-1;
            border-left: 3px solid $color-border;
            padding-left: 0.5rem;
            margin-top: 0.5rem;
            > p {
                margin-top: 0.25rem;
                margin-bottom: 0.25rem;
            }
        }
        .doc-deprecation {
            font-family: var(--sans-serif);
            background: rgba(42, 58, 81, 0.7);
            box-shadow: none;
            border: 1px solid $color-border;
            color: inherit;
        }
        .doc-category-item {
            color: inherit;
            border-bottom: 1px solid $color-border;
            padding-bottom: 1rem;
            .field-name:first-of-type {
                font-weight: bold;
            }
        }
    }
    li:active,
    li:hover,
    .history-contents p:active,
    .history-contents p:hover,
    .execute-options > li.selected {
        background: rgba(42, 58, 81, 0.7);
        color: inherit;
    }
    .execute-button,
    .toolbar-button,
    .docExplorerShow,
    .doc-category .show-btn {
        @extend .btn;
        color: white;
        box-shadow: none;
        &:active {
            box-shadow: none;
        }
        &.error {
            color: $red;
        }
    }
    .execute-button {
        border-radius: 17px;
    }
    .execute-button,
    .doc-category .show-btn {
        @extend .btn-primary;
        background: $blue;
        border-color: $blue;
        fill: white;
        padding: 0;
        &.error {
            background: $blue;
        }
    }
    .toolbar-button,
    .docExplorerShow {
        @extend .btn-secondary;
        background: $secondary;
        border-color: $secondary;
    }
    .toolbar-button.error {
        background: $secondary;
    }
    .doc-explorer-back {
        color: var(--link-color);
        &::before {
            margin: 0 3px 0;
            width: 10px;
            height: 10px;
            border-color: var(--link-color);
        }
        &:hover {
            text-decoration: underline;
            color: var(--link-hover-color);
            &::before {
                border-color: var(--link-hover-color);
            }
        }
    }
    .docExplorerShow::before {
        margin: 0 3px 0;
        width: 10px;
        height: 10px;
        border-color: white;
    }
    .doc-explorer {
        .search-box {
            border: none;
            &::before {
                color: var(--input-placeholder-color);
                margin-left: 0.5rem;
            }
            > input {
                @extend .form-control;
                padding: 0.375rem 0.75rem 0.375rem 1.75rem;
                border-right: none;
            }
        }
    }
    .CodeMirror-foldmarker {
        background: $blue;
    }
    button,
    input {
        color: $color-text;
        font-family: var(--sans-serif);
    }
}

/* Light theme overrides */
.theme-light {
    .graphiql-container {
        color: $color-light-text-1;
        .topBar,
        .variable-editor-title,
        .resultWrap,
        .history-contents,
        .history-contents p,
        .doc-explorer-contents,
        .doc-category-title,
        .doc-explorer-contents .doc-deprecation,
        .doc-explorer-contents .doc-category-item,
        .doc-explorer-contents .field-short-description {
            border-color: $color-light-border;
        }
        .variable-editor-title,
        .result-window .CodeMirror-gutters,
        .historyPaneWrap,
        .history-contents,
        .doc-explorer,
        .doc-explorer-contents,
        .execute-options {
            background: $color-light-bg-2;
        }
        .variable-editor-title,
        button,
        input {
            color: $color-light-text-1;
        }
        li:active,
        li:hover,
        .history-contents p:active,
        .history-contents p:hover,
        .doc-explorer-contents .doc-deprecation,
        .execute-options > li.selected {
            background: $color-light-bg-3;
        }
        .toolbar-button.error {
            background: $secondary-light;
        }
        .docExplorerShow::before {
            border-color: $color-light-text-1; /* icon */
        }
        .doc-explorer-contents .field-short-description {
            color: $color-light-text-2;
        }
    }
}

// Tooltip and popover panels are added to the body, so we must handle them
// separately.
body > .CodeMirror-lint-tooltip,
body > .CodeMirror-info,
body > .CodeMirror-hints {
    background: #1d2837;
    color: $color-text;
    .info-description {
        color: $color-text;
    }
    .CodeMirror-hint {
        border-color: $color-border;
        color: $color-text;
        &-information {
            border-color: $color-border;
            > .content {
                color: $color-text;
                p:nth-child(odd) {
                    margin-right: 1rem;
                }
            }
        }
        &-active {
            color: white !important;
            background-color: #1c7cd6;
        }
    }
}
body.theme-light > .CodeMirror-lint-tooltip,
body.theme-light > .CodeMirror-info,
body.theme-light > .CodeMirror-hints {
    background: $color-light-bg-2;
    color: $color-light-text-1;
    .info-description {
        color: $color-light-text-1;
    }
    .CodeMirror-hint {
        border-color: $color-light-border;
        color: $color-light-text-1;
        &-information {
            border-color: $color-light-border;
            > .content {
                color: $color-light-text-1;
            }
        }
    }
}