@import './colors';
@import './variables';
@import './mixins';

/** Adapted from https://github.com/atom-material/atom-material-syntax-light */
.hljs {
    display: block;
    overflow-x: auto;
    padding: 0;
    background: $block-text-background;
    color: $slate-gray-500;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    font: 300 100%/1 Roboto Mono, monospace;
    font-size: 14px;
}

.hljs > *::selection {
    background-color: shade($blue, 10%);
    color: $white;
}

.hljs-section {
    background-color: $white;
}

.hljs-comment {
    color: darken($slate-gray-300, 5%);
    font-style: italic;
}

.hljs-tag,
.hljs-selector-tag,
.hljs-regexp,
.hljs-meta {
    color: $magenta;
}

.hljs-string,
.hljs-subst {
    color: $green;
}

.hljs-number,
.hljs-variable,
.hljs-template-variable {
    color: $teal;
}

.hljs-name,
.hljs-keyword,
.hljs-type,
.hljs-attribute {
    color: shade($blue, 20%);
}

.hljs-title,
.hljs-function > .hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-built_in,
.hljs-builtin-name,
.hljs-link {
    color: $dark-blue;
}

.hljs-params {
    color: $deep-red;
}

.hljs-addition {
    color: $azure;
    display: inline-block;
    width: 100%;
}

.hljs-deletion {
    color: $red-orange;
    display: inline-block;
    width: 100%;
}

.hljs-selector-id,
.hljs-selector-class {
    color: $slate-gray-400;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}

.hljs-link {
    text-decoration: underline;
}