/*
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 .name { color: #000000 }
.idle-light .name.variable { color: #000000 }
.idle-light .name.constant{ color: #000000 }
.idle-light .name.function { color: #0000ff }
.idle-light .name.class { color: #0000ff }
.idle-light .name.attribute { color: #000000 }
.idle-light .name.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-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 .name { color: #ffffff }
.idle-dark .name.variable { color: #ffffff }
.idle-dark .name.constant{ color: #ffffff }
.idle-dark .name.function { color: #5e5eff }
.idle-dark .name.class { color: #5e5eff }
.idle-dark .name.attribute { color: #ffffff }
.idle-dark .name.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 }