.DevToolsConsole.light {
    --color-background: rgb(255, 255, 255);
    --color-background-warn: rgb(254, 251, 229);
    --color-background-error: rgb(254, 241, 240);
    --color-border-primary: rgb(203, 205, 209);
    --color-border-light: rgb(240, 240, 240);
    --color-border-warn: rgb(254, 245, 193);
    --color-border-error: rgb(254, 215, 214);
    --color-text-primary: rgb(48, 57, 66);
    --color-text-secondary: rgb(95, 99, 103);
    --color-text-warn: rgb(91, 59, 1);
    --color-text-error: rgb(255, 0, 0);
    --color-text-grey-1: #80868a;
    --color-text-grey-2: #5f6367;
    --color-text-blue: #1a1aa6;
    --color-text-red: #c80200;
    --color-text-green: #226d25;
}

.DevToolsConsole.dark {
    --color-background: rgb(32, 33, 36);
    --color-background-warn: rgb(51, 42, 0);
    --color-background-error: rgb(41, 0, 0);
    --color-border-primary: rgb(74, 76, 80);
    --color-border-light: rgb(58, 58, 58);
    --color-border-warn: rgb(101, 85, 0);
    --color-border-error: rgb(91, 1, 0);
    --color-text-primary: rgb(190, 198, 207);
    --color-text-secondary: rgb(154, 160, 166);
    --color-text-warn: rgb(242, 170, 39);
    --color-text-error: rgb(255, 128, 128);
    --color-text-grey-1: #80868a;
    --color-text-grey-2: #9aa0a6;
    --color-text-blue: #9980ff;
    --color-text-red: #36d4c7;
    --color-text-green: #ababab;
}

.DevToolsConsole {
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-border-primary);
    background-color: var(--color-background);
    font-family: ui-monospace, SFMono-Regular, SF Mono, 
        Menlo, Consolas, Liberation Mono ,monospace;
    font-size: 11px;
    overflow-y: scroll;
    cursor: default;
}

.DevToolsConsole .message {
    display: flex;
    padding: 2px 28px 2px 0;
    margin-top: -1px;
    position: relative;
}
.DevToolsConsole .gutter {
    width: 28px;
    height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.DevToolsConsole .content {
    width: 100%;
}
.DevToolsConsole .caller {
    float: right;
    padding-left: 2px;
    color: var(--color-text-secondary);
    text-decoration: underline;
}
.DevToolsConsole .text {
    margin: 0;
    font-family: inherit;
    white-space: pre-wrap;
    width: 100%;
}
.DevToolsConsole .call {
    color: var(--color-text-secondary);
    text-decoration: underline;
}
.DevToolsConsole .log {
    border-top: 1px solid transparent;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    z-index: 0;
}
.DevToolsConsole .warn {
    background-color: var(--color-background-warn);
    border-top: 1px solid var(--color-border-warn);
    border-bottom: 1px solid var(--color-border-warn);
    color: var(--color-text-warn);
    z-index: 1;
}
.DevToolsConsole .error {
    background-color: var(--color-background-error);
    border-top: 1px solid var(--color-border-error);
    border-bottom: 1px solid var(--color-border-error);
    color: var(--color-text-error);
    z-index: 2;
}
.DevToolsConsole .parameter-null,
.DevToolsConsole .parameter-undefined {
    color: var(--color-text-grey-1);
}
.DevToolsConsole .parameter-number,
.DevToolsConsole .parameter-boolean,
.DevToolsConsole .keyword-function {
    color: var(--color-text-blue);
}
.DevToolsConsole .parameter-string,
.DevToolsConsole .parameter-regexp {
    color: var(--color-text-red);
}
.DevToolsConsole .parameter-bigint {
    color: var(--color-text-green);
}
.DevToolsConsole .parameter-function,
.DevToolsConsole .parameter-object {
    font-style: italic;
}
.DevToolsConsole .preview {
    display: flex;
    align-items: center;
}
.DevToolsConsole .object-key {
    color: var(--color-text-grey-2);
}
.DevToolsConsole .preview svg {
    fill: var(--color-text-grey-2);
}