@import "base";

#{$code-selector} {
    -moz-tab-size: $code-tab-size;
    -o-tab-size: $code-tab-size;
    tab-size: $code-tab-size;
    -webkit-hyphens: $code-hyphens;
    -moz-hyphens: $code-hyphens;
    -ms-hyphens: $code-hyphens;
    hyphens: $code-hyphens;
    // whitespace management
    white-space: pre; // fallback
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
    font-family: $font-family-monospace;
    //font-size: 	$code-font-size;
    line-height: $code-line-height;
    color: $code-color;
    text-shadow: $code-text-shadow;
    background: none;
    text-align: left;
    word-spacing: normal;
    overflow: auto;
    background: $code-background;

    &::-moz-selection {
        text-shadow: none;
        text-shadow: none;
        background: #b3d4fc;
        background: #b3d4fc;
    }
    &::selection {
        text-shadow: none;
        text-shadow: none;
        background: #b3d4fc;
        background: #b3d4fc;
    }

}

#{$code-selector-block} {
    padding: 6px;
    margin: .5em 0;
}

:not(pre) {
    > code[class*="language-"] {
        background: $code-background;
        padding: .1em;
        //border-radius: .3em;
        white-space: normal;
    }
}

.token.comment { color: $code-color-comment; }

.token.prolog { color: $code-color-prolog; }

.token.doctype { color: $code-color-doctype; }

.token.cdata { color: $code-color-cdata; }

.token.punctuation { color: $code-color-punctuation; }

.namespace {
    opacity: .7;
}

.token.property { color: $code-color-property; }

.token.tag { color: $code-color-tag; }

.token.boolean { color: $code-color-boolean; }

.token.number { color: $code-color-number; }

.token.constant { color: $code-color-constant; }

.token.symbol { color: $code-color-symbol; }

.token.deleted { color: $code-color-deleted; }

.token.selector { color: $code-color-selector; }

.token.attr-name { color: $code-color-attr-name; }

.token.string { color: $code-color-string; }

.token.char { color: $code-color-char; }

.token.builtin { color: $code-color-builtin; }

.token.inserted { color: $code-color-inserted; }

.token.operator {
    color: $code-color-operator;
    //background: hsla(0, 0%, 100%, .5);
}

.token.entity {
    color: $code-color-operator;
    background: hsla(0, 0%, 100%, .5);
    cursor: help;
}

.token.url {
    color: $code-color-operator;
    background: hsla(0, 0%, 100%, .5);
}

.language-css {
    .token.string {
        color: $code-color-operator;
        background: hsla(0, 0%, 100%, .5);
    }
}

.style {
    .token.string {
        color: $code-color-operator;
        background: hsla(0, 0%, 100%, .5);
    }
}

.token.atrule { color: $code-color-atrule; }

.token.attr-value { color: $code-color-atrule; }

.token.keyword { color: $code-color-keyword; }

.token.function { color: $code-color-function; }

.token.regex { color: $code-color-regex; }

.token.important {
    color: $code-color-regex;
    font-weight: bold;
}

.token.variable { color: $code-color-variable; }

.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

@media print {
    code[class*="language-"] {
        text-shadow: none;
    }
    pre[class*="language-"] {
        text-shadow: none;
    }
}

//@import '../vendor/prism/autolinker';
//@import '../vendor/prism/line-numbers';
//@import '../vendor/prism/show-language';
//@import '../vendor/prism/wpd';
//@import '../vendor/prism/command-line';
//@import '../vendor/prism/line-highlight';
//
//
//

#app {
    div.prism-show-language {
        background-color: transparent;
        //test:
        position: relative;
        //top: 22px;
        text-align: right;
        width: 20%;
        left: 80%;
        //margin-top: -15px;
        //endtest

        div.prism-show-language-label {
            //color: #82a7c7;
            color: #b0bec5;
            font-size: 12px;
            padding: 6px 10px 0 0;
            background-color: transparent;;
        }
    }
    .prism-show-language + pre[class*="language-"] {
        //   padding-top: 0;
        margin-top: 0;
    }
    //pre.line-numbers {
    //    position: relative;
    //    padding-left: 3.8em;
    //    counter-reset: linenumber;
    //}

    .line-numbers-rows > span {
        //margin-bottom: 2px;
    }
    .line-numbers .line-numbers-rows {
        top: -2px;
        font-size: 100%;
        left: -3.8em;
        width: 3em; /* works for line-numbers below 1000 lines */
        letter-spacing: -1px;
        border-right: 1px solid rgba(#000, 0.2);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        > span:before {
            color: rgba(#000, 0.2);
        }

    }

    pre.code-toolbar {
        > .toolbar {
            opacity: 1;

            > .toolbar-item {
                &:first-child {
                    border-left: none;
                }
            }

            a, button, span {
                color: #bbbbbb;
                font-size: .8rem;
                padding: 0.2rem .7rem;
                //background: #f5f2f0;
                background: white;
                box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
                border-radius: 0;
            }

            a, button {
                transition: opacity 0.3s ease-in-out;
                opacity: 0;
                border: 1px solid rgba(0, 0, 0, 0.2);
            }
            span {
                box-shadow: none;
            }
        }
        &:hover > .toolbar {
            opacity: 1;
            a, button {
                opacity: 1;
            }
        }
    }

}