/*
Kyler Olsen
November 2023
*/

.code {
    position: relative;
}

.code > pre {
    padding: 5px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    display: block;
    width: 100%;
}

.code > pre > code {
    display: block;
    min-height: 1rem;
}

.view-code {
    background-color: #002240;
    color: #ffffff;
}

.edit-code {
    color: transparent;
    /* border: 1px dotted #4242de; */
}

.idle-light .view-code { background-color: #ffffff; color: #000000; }
.idle-light .edit-code { caret-color: #000000; }
.idle-light .token { color: #000000 }
.idle-light .comment { color: #dd0000 }
.idle-light .output { color: #000000 }
.idle-light .error { color: #000000 }
.idle-light .literal { color: #000000 }
.idle-light .literal.number { color: #000000 }
.idle-light .literal.string { color: #00aa00 }
.idle-light .literal.string .format { color: #00aa00 }
.idle-light .escape { color: #000000 }
.idle-light .identifier { color: #000000 }
.idle-light .identifier.variable { color: #000000 }
.idle-light .identifier.constant{ color: #000000 }
.idle-light .identifier.function { color: #0000ff }
.idle-light .identifier.class { color: #0000ff }
.idle-light .identifier.attribute { color: #000000 }
.idle-light .identifier.property { color: #000000 }
.idle-light .keyword { color: #ff7700 }
.idle-light .keyword.operator { color: #ff7700 }
.idle-light .builtin { color: #900090 }
.idle-light .operator { color: #000000 }
.idle-light .punctuation { color: #000000 }
.idle-light .whitespace { color: #000000 }

.idle-dark .view-code { background-color: #002240; color: #ffffff; }
.idle-dark .edit-code { caret-color: #ffffff; }
.idle-dark .token { color: #ffffff }
.idle-dark .comment { color: #dd0000 }
.idle-dark .output { color: #ffffff }
.idle-dark .error { color: #ffffff }
.idle-dark .literal { color: #ffffff }
.idle-dark .literal.number { color: #ffffff }
.idle-dark .literal.string { color: #02ff02 }
.idle-dark .literal.string .format { color: #02ff02 }
.idle-dark .escape { color: #ffffff }
.idle-dark .identifier { color: #ffffff }
.idle-dark .identifier.variable { color: #ffffff }
.idle-dark .identifier.constant{ color: #ffffff }
.idle-dark .identifier.function { color: #5e5eff }
.idle-dark .identifier.class { color: #5e5eff }
.idle-dark .identifier.attribute { color: #ffffff }
.idle-dark .identifier.property { color: #ffffff }
.idle-dark .keyword { color: #ff8000 }
.idle-dark .keyword.operator { color: #ff8000 }
.idle-dark .builtin { color: #ff00ff }
.idle-dark .operator { color: #ffffff }
.idle-dark .punctuation { color: #ffffff }
.idle-dark .whitespace { color: #ffffff }

.idle-test .view-code { background-color: #442240; color: #ff0000; }
.idle-test .edit-code { caret-color: #ff0000; }
.idle-test .token { color: #ffffff }
.idle-test .comment { color: #c0c0c0; font-style: italic; }
.idle-test .output { color: #808080 }
.idle-test .error { color: #ff0080 }
.idle-test .literal { color: #00ffff }
.idle-test .literal.number { color: #008080 }
.idle-test .literal.string { color: #00ff00 }
.idle-test .literal.string .format { color: #0000ff }
.idle-test .escape { color: #ffff80 }
.idle-test .identifier { color: #ffff00 }
.idle-test .identifier.variable { color: #808000 }
.idle-test .identifier.constant{ color: #008000 }
.idle-test .identifier.function { color: #8080ff }
.idle-test .identifier.class { color: #80ff80 }
.idle-test .identifier.attribute { color: #800000 }
.idle-test .identifier.property { color: #800080 }
.idle-test .keyword { color: #ff8000 }
.idle-test .keyword.operator { color: #ff8080 }
.idle-test .builtin { color: #ff00ff }
.idle-test .operator { color: #000080 }
.idle-test .punctuation { color: #8000ff }
.idle-test .whitespace { background-color: #ffffff }