import { css } from 'styled-components';

export const theme = css`
    .CodeMirror.cm-s-docz-light {
        background-color: #282c34;
        color: #abb2bf;
        font-family: Inconsolata, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        border-radius: 5px;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        line-height: 1.5;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
    }
    .cm-s-docz-light .CodeMirror-selected {
        background-color: rgba(67, 76, 94, 0.8);
    }
    .cm-s-docz-light .CodeMirror-gutter,
    .cm-s-docz-light .CodeMirror-gutters {
        border: none;
        background-color: #2e3440;
        border-radius: 0;
    }
    .cm-s-docz-light .CodeMirror-linenumber,
    .cm-s-docz-light .CodeMirror-linenumbers {
        color: rgba(216, 222, 233, 0.4) !important;
        background-color: #2e3440;
    }
    .cm-s-docz-light .CodeMirror-lines {
        color: #d8dee9 !important;
        background-color: transparent;
    }
    .cm-s-docz-light .CodeMirror-cursor {
        border-left: 2px solid #d8dee9 !important;
    }
    /* addon: edit/machingbrackets.js & addon: edit/matchtags.js */
    .cm-s-docz-light .CodeMirror-matchingbracket,
    .cm-s-docz-light .CodeMirror-matchingtag {
        border-bottom: 2px solid #81a1c1;
        color: #d8dee9 !important;
        background-color: transparent;
    }
    .cm-s-docz-light .CodeMirror-nonmatchingbracket {
        border-bottom: 2px solid #bf616a;
        color: #d8dee9 !important;
        background-color: transparent;
    }
    /* addon: fold/foldgutter.js */
    .cm-s-docz-light .CodeMirror-foldmarker,
    .cm-s-docz-light .CodeMirror-foldgutter,
    .cm-s-docz-light .CodeMirror-foldgutter-open,
    .cm-s-docz-light .CodeMirror-foldgutter-folded {
        border: none;
        text-shadow: none;
        color: #d8dee9 !important;
        background-color: transparent;
    }
    /* addon: selection/active-line.js */
    .cm-s-docz-light .CodeMirror-activeline-background {
        background-color: rgba(67, 76, 94, 0.32);
    }
    /* basic syntax */
    .cm-s-docz-light .cm-attribute {
        color: #8fbcbb;
    }
    .cm-s-docz-light .cm-keyword {
        color: #81a1c1;
    }
    .cm-s-docz-light .cm-def {
        color: #d8dee9;
    }
    .cm-s-docz-light .cm-atom {
        color: #81a1c1;
    }
    .cm-s-docz-light .cm-number {
        color: #b48ead;
    }
    .cm-s-docz-light .cm-property {
        color: #d8dee9;
    }
    .cm-s-docz-light .cm-qualifier {
        color: #88c0d0;
    }
    .cm-s-docz-light .cm-variable,
    .cm-s-docz-light .cm-variable-2 {
        color: #88c0d0;
    }
    .cm-s-docz-light .cm-variable-3 {
        color: #d8dee9;
    }
    .cm-s-docz-light .cm-string,
    .cm-s-docz-light .cm-string-2 {
        color: #98c379;
    }
    .cm-s-docz-light .cm-operator {
        color: #81a1c1;
    }
    .cm-s-docz-light .cm-meta {
        color: #81a1c1;
    }
    .cm-s-docz-light .cm-comment {
        color: #4c566a;
    }
    .cm-s-docz-light .cm-error {
        color: #bf616a;
    }
    /* markdown */
    .cm-s-docz-light .cm-header {
        color: #88c0d0;
    }
    .cm-s-docz-light .cm-quote {
        color: #4c566a;
    }
    .cm-s-docz-light .cm-link {
        color: #88c0d0;
        text-decoration: none;
    }
    .cm-s-docz-light .cm-url {
        color: #d8dee9;
        text-decoration: underline;
    }
    .cm-s-docz-light .cm-strong {
        font-weight: bold;
    }
    .cm-s-docz-light .cm-em {
        font-style: italic;
    }
    /* diff */
    .cm-s-docz-light .cm-negative {
        color: #bf616a;
    }
    .cm-s-docz-light .cm-positive {
        color: #a3be8c;
    }
    /* html */
    .cm-s-docz-light .cm-tag {
        color: #81a1c1;
    }
`;