:root {
    --editor1: #fff;
    --editor2: #f1f1f1; }

.theme-dark {
    --editor1: #5c6a9f;
    --editor2: #3c4975; }

.koda-editor {
    max-width: 800px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.36);
    border-radius: .4rem;
    background: var(--editor1);
    text-align: left;
}
.koda-editor textarea {
    width: 100%;
    margin: 0;
    border-right: .5em solid var(--editor1);
    border-bottom: .5em solid var(--editor1);
    box-shadow: 0 0 0;
    border-radius: .4rem;
    resize: vertical;
}
.editor-functions {
    box-shadow: 0 1.2rem 1rem -1rem rgba(0,0,0,0.10);
    padding: .5rem;
    margin-bottom: 1rem;
    line-height: 0;
    font-size: 0;
}
.editor-functions select {
    background: url(icons/code.svg) no-repeat center / 1.8rem;
    padding: 0 1.5rem;
    margin: 0;
    border-radius: .3rem;
    border: 0;
    box-shadow: none;
}
.editor-preview {
    display: none;
    box-shadow: 0 -1.2rem 1rem -1rem rgba(0,0,0,0.10);
    margin-top: 1rem;
    padding: 1rem;
    outline: none;
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
}
.func {
    display: inline-block;
    margin: .2rem .1rem;
    width: 2.5rem;
    height: 2rem;
    border: 0;
    border-radius: .3rem;
    background-color: var(--editor1);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.8rem;
    vertical-align: middle;
}
.func:hover {
    background-color: var(--editor2);
}
.func--curr {
    background-color: var(--editor2);
}
.func--p    { background-image: url(icons/paragraph.svg); }
.func--h    { background-image: url(icons/header.svg); }
.func--bold { background-image: url(icons/bold.svg); }
.func--i    { background-image: url(icons/i.svg); }
.func--ol   { background-image: url(icons/ol.svg); }
.func--ul   { background-image: url(icons/ul.svg); }
.func--a    { background-image: url(icons/link.svg); }
.func--q    { background-image: url(icons/quote.svg); }
.func--img  { background-image: url(icons/img.svg); }
.func--view { background-image: url(icons/view.svg); }
.func--code { background-image: url(icons/code.svg); }
.func--mark { background-image: url(icons/mark.svg); }

.theme-dark {
    .editor-functions select {
        background-image: url(icons/dark/code.svg);
    }
    .func--p    { background-image: url(icons/dark/paragraph.svg); }
    .func--h    { background-image: url(icons/dark/header.svg); }
    .func--bold { background-image: url(icons/dark/bold.svg); }
    .func--i    { background-image: url(icons/dark/i.svg); }
    .func--ol   { background-image: url(icons/dark/ol.svg); }
    .func--ul   { background-image: url(icons/dark/ul.svg); }
    .func--a    { background-image: url(icons/dark/link.svg); }
    .func--q    { background-image: url(icons/dark/quote.svg); }
    .func--img  { background-image: url(icons/dark/img.svg); }
    .func--view { background-image: url(icons/dark/view.svg); }
    .func--code { background-image: url(icons/dark/code.svg); }
    .func--mark { background-image: url(icons/dark/mark.svg); }
}