// Inline code, code blocks and syntax highlighting

/* Applies to inline ‘code blocks` */ .highlighter-rouge {

font-family: $code-font-family;
    font-size: 92%;
    padding: 3px 3px;
background-color: $code-inline-bg;
color: $code-inline;
    white-space: nowrap;
border: 1.5px solid $code-inline;
border-radius: .25em;

@media (prefers-color-scheme: light) {
    color: $code-inline-light;
    background-color: $code-inline-bg-light;
    border: 1.5px solid #D2D2D2;
    }

}

/* Applies to all code */ pre, code {

font-size: 14px;
font-family: $code-font-family;
font-style: normal;

font-feature-settings: "kern" off;
font-kerning: none;
font-variant: none;

background-color: #eef;

::selection {
    color: $code-block-bg;
    background: #bdbdb3;
}

::-moz-selection {
    color: $code-block-bg;
    background: #bdbdb3;
}

::-webkit-selection {
    color: $code-block-bg;
    background: #bdbdb3;
}

@media (prefers-color-scheme: light) {
    background-color: $code-block-bg-light;

}

}

/* Inline code, no highlight */ code {

padding: 2px 4px;
border-radius: 3px;

white-space: nowrap;

}

blockquote code {

color: #656565;

}

/* Inline code, highlight */ code.highlight {

border-radius: 3px;

color: #bdbdb3;
background-color: $code-block-bg;

}

/* Block code, no highlight */ pre {

border-radius: 5px;
margin: 30px * 0.75 30px / 2;
padding: 15px 17px;
overflow-x: auto;
background-color: #f1f1ff;

code {
    border: 0;
    padding: 0;

    white-space: pre;
}

}

/* Block code, highlight */ figure.highlight, div.highlight {

position: relative;

pre {
    background-color: $code-block-bg;
            border: 1.5px solid $code-block-accent;
        border-radius: 20px;
            box-shadow: 0 4px 30px rgba(0,0,0,.4);

    @media (prefers-color-scheme: light) {
            background-color: $code-block-bg-light;
            border: 1.5px solid $code-block-accent-light;
    }

    code {
        background-color: $code-block-bg;
        color: #babaad;

        counter-reset: code;
        display: block;
        line-height: 1.6;

        @media (prefers-color-scheme: light) {
                background-color: $code-block-bg-light;
        }

        /* Display language name */
        &[data-lang]::before {
            content: attr(data-lang);
            position: absolute;
            right: 20px;

            font-size: 15px;
            top: -14px;
                            padding: 2px 9px;
                            text-transform: uppercase;
                            font-weight: bold;

            border: 1px solid $code-block-accent;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;

            min-width: 30px;
            text-align: center;

            color: $code-block-accent;
            background-color: $code-block-bg;

            @media (prefers-color-scheme: light) {
            border: 1px solid $code-block-accent-light;
            color: $code-block-accent-light;
            background-color: $code-block-bg-light;
            }

                            @mixin media-query($device) {
                            @media screen and (max-width: $device) {
                            @content;
                            }
                    }

            @include media-query(300px) {
                visibility: hidden;
            }
        }

        div {
            counter-increment: code;

            /* Line numbers */
            &::before {
                color: #608079;
                content: counter(code);

                width: 14px;
                text-align: right;

                /* Add a nice border */
                display: inline-block;
                padding-right: 30px / 4;
                margin-right: 30px * 0.4;
                border-right: 1px solid #656565;

                /* For older browsers and Safari */
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
        }
    }
}

}

/* Hide language */ .hide-lang + figure code::before {

visibility: hidden;

}

/**

* Language-specific settings
*/

.language-liquid {

.p {
    color: #6aaf50;
}

}

/**

* ID-specific overrides
*/

c-example + figure {

.kt {
    color: #5180b3;
}

}

liquid-example + figure {

.p {
    color: #bdbdb3;
}

}

borders-example + figure {

div {
    &::before {
        padding-left: 0.625em;
        border-left: 1px solid #656565;
    }

    &:first-of-type::before {
        padding-top: 0.25em;
        border-top: 1px solid #656565;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    &:last-of-type::before {
        padding-bottom: 0.25em;
        border-bottom: 1px solid #656565;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}

}

yaml-example + figure {

.na, .s {
    color: #ab75c3;
}

}

.hl-1 + figure .line-1 {

background-color: #112b47;

}