.table-ws-gql {
    display: grid;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 10px;

    &.logs {
        grid-template-columns: auto auto 1fr;
        grid-auto-rows: max-content;
        background: $form-control-bg-color;

        &>.d-contents>.d-contents> :is(div, pre) {
            padding: 4px;
            vertical-align: middle;
        }
    }
}

.gql-ws-spinner {
    margin: 0px;
    background: $form-control-bg-color;
}

.gql-container {
    display: grid;

    @media (max-width: $breakpoint-md) {
        grid-template-columns: 100%;
        grid-template-areas: "explorer""query""response";
    }

    @media (max-width: $breakpoint-xl) and (min-width: $breakpoint-md) {
        grid-template-columns: 30% 70%;
        grid-template-areas: "explorer query"". response";
    }

    @media (min-width: $breakpoint-xl) {
        grid-template-columns: 20% 40% 40%;
        grid-template-areas: "explorer query response";
    }
}

.gql-explorer-grid {
    grid-area: explorer;

    @media (max-width: $breakpoint-xl) and (min-width: $breakpoint-md) {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    h4 {
        margin-top: 0;
    }

    @media (min-width: $breakpoint-md) {
        padding-right: 20px;
    }

    @media (max-width: $breakpoint-md) {
        margin-bottom: 20px;
    }
}

.gql-query-grid {
    grid-area: query;

    @media (min-width: $breakpoint-xl) {
        padding-right: 20px;
    }

    h4 {
        margin-top: 0;
    }
}

.gql-response-grid {
    grid-area: response;

    h4 {
        margin-top: 0;
    }

    @media (max-width: $breakpoint-xl) {
        margin-top: 15px;
    }
}

.operation-pointer {
    cursor: pointer;
}

.graphql-console-width {
    @media (min-width: $breakpoint-md) {
        max-width: 1680px;
    }
}

.query-editor {
    @media (max-height: $breakpoint-ml) {
        height: 290px;

        &.with-errors {
            height: 190px;
        }
    }

    @media (max-height: $breakpoint-xl) and (min-height: $breakpoint-ml) {
        height: 440px;

        &.with-errors {
            height: 340px;
        }

        @media (max-width: $breakpoint-xl) and (min-width: $breakpoint-md) {
            height: 150px;

            &.with-errors {
                height: 150px;
            }
        }
    }

    @media (min-height: $breakpoint-xl) {
        height: 533px;

        &.with-errors {
            height: 450px;
        }

        @media (max-width: $breakpoint-xl) and (min-width: $breakpoint-md) {
            height: 303px;

            &.with-errors {
                height: 203px;
            }
        }
    }
}

.query-variable {
    @media (max-height: $breakpoint-xl) {
        height: 166px;

        &.with-errors {
            height: 153px;
        }

        @media (max-width: $breakpoint-xl) and (min-width: $breakpoint-md) {
            height: 100px;

            &.with-errors {
                height: 100px;
            }
        }
    }

    @media (min-height: $breakpoint-xl) {
        height: 263px;

        &.with-errors {
            height: 233px;
        }

        @media (max-width: $breakpoint-xl) and (min-width: $breakpoint-md) {
            height: 103px;

            &.with-errors {
                height: 103px;
            }
        }
    }
}

.response-editor {
    @media (max-height: $breakpoint-ml) {
        height: 520px;

        &.with-ws {
            height: 225px;
        }
    }

    @media (max-height: $breakpoint-xl) and (min-height: $breakpoint-ml) {
        height: 670px;

        &.with-ws {
            height: 295px;
        }

        @media (max-width: $breakpoint-xl) and (min-width: $breakpoint-md) {
            height: 218px;

            &.with-ws {
                height: 218px;
            }
        }

        @media (max-width: $breakpoint-md) {
            height: 600px;

            &.with-ws {
                height: 280px;
            }
        }
    }

    @media (min-height: $breakpoint-xl) {
        height: 860px;

        &.with-ws {
            height: 392px;
        }

        @media (max-width: $breakpoint-xl) and (min-width: $breakpoint-md) {
            height: 254px;

            &.with-ws {
                height: 254px;
            }
        }
    }
}

.response-ws {
    @media (max-height: $breakpoint-ml) {
        height: 231px;

        &.with-spinner {
            height: 207px;
        }
    }

    @media (max-height: $breakpoint-xl) and (min-height: $breakpoint-ml) {
        height: 311px;

        &.with-spinner {
            height: 287px;
        }

        @media (max-width: $breakpoint-xl) and (min-width: $breakpoint-md) {
            height: 218px;
        }

        @media (max-width: $breakpoint-md) {
            height: 280px;
        }
    }

    @media (min-height: $breakpoint-xl) {
        height: 404px;

        &.with-spinner {
            height: 380px;
        }

        @media (max-width: $breakpoint-xl) and (min-width: $breakpoint-md) {
            height: 254px;
        }
    }
}

.explorer-operations {
    @media (max-height: $breakpoint-ml) {
        height: 464px;

        @media (max-width: $breakpoint-xl) and (min-width: $breakpoint-md) {
            height: 1044px;
        }

        @media (max-width: $breakpoint-md) {
            height: 400px;
        }
    }

    @media (max-height: $breakpoint-xl) and (min-height: $breakpoint-ml) {
        height: 614px;

        @media (max-width: $breakpoint-md) {
            height: 400px;
        }
    }

    @media (min-height: $breakpoint-xl) {
        height: 804px;

        @media (max-width: $breakpoint-md) {
            height: 400px;
        }
    }
}

.gql-list-group {
    list-style: none;
    padding-left: 10px;

    li {
        border-top: none;
    }
}

.mw-600 {
    flex: 0 0 100%;
    max-width: 100%;

    @media (min-width: 901px) {
        flex: 0 0 600px;
        max-width: 600px;
    }
}

.input-node-color {
    color: $gql-input-node-color;
}

.not-input-node-color {
    color: $gql-not-input-node-color;
}

.presentation-item {
    padding: 2px 10px;

    label {
        margin-bottom: 0;
    }

    select {
        background-color: $form-control-bg-color;
        color: $gql-not-input-node-color;
    }
}

.headers-gql {
    height: 60px;
}

.operation-type-gql {
    width: 100%;
    color: $gql-operation-type-color;
    font-weight: bold;
}

.gql-editor-errors {
    padding: 20px !important;
    margin-top: 15px;
}