.highlight-container {
    margin: 0 (-$grid-gutter-width * .5) 1rem;
    background-color: $gray-100;
    border: solid $gray-300;
    border-width: 0 0 1px;

    @include media-breakpoint-up(sm) {
        margin-right: 0;
        margin-left: 0;
        border-width: 0 1px 1px;
        @include border-bottom-radius(.25rem);
    }
}

.simple-highlight {
    .highlight {
        background-color: $gray-100;
        @include border-radius(.25rem);
    }
}

.highlight {
    padding: 1rem;

    @include media-breakpoint-up(sm) {
        padding: 1rem 1.5rem;
    }

    @at-root .tab-pane & {
        margin-bottom: 0;
    }

    pre {
        width: 100%;
        padding: 0;
        margin-top: .65rem;
        margin-bottom: .65rem;
        white-space: pre;
        background-color: transparent;
        border: 0;

        code {
            @include font-size(inherit);
            color: $gray-900; // Effectively the base text color
            word-wrap: normal;
        }
    }

    .language-bash,
    .language-sh {
        &::before {
            color: #000099;
            content: "$ ";
            user-select: none;
        }
    }

    .language-powershell::before {
        color: #000099;
        content: "PM> ";
        user-select: none;
    }

    .c {
        color: #727272;
    }

    .ch {
        font-style: italic;
        color: #60a0b0;
    }

    .cm {
        color: #727272;
    }

    .cp {
        color: #008085;
    }

    .cpf {
        color: #007020;
    }

    .c1 {
        color: #727272;
    }

    .cs {
        color: #727272;
    }

    .gd {
        background-color: #ffcccc;
        border: 1px solid #cc0000;
    }

    .ge {
        font-style: italic;
    }

    .gr {
        color: #ff0000;
    }

    .gh {
        color: #003300;
    }

    .gi {
        background-color: #ccffcc;
        border: 1px solid #00cc00;
    }

    .go {
        color: #aaaaaa;
    }

    .gp {
        color: #000099;
    }

    .gs {
        font-weight: 700;
    }

    .gu {
        color: #003300;
    }

    .gt {
        color: #99cc66;
    }

    .gl {
        text-decoration: underline;
    }

    .k {
        color: #006699;
    }

    .kc {
        color: #006699;
    }

    .kd {
        color: #006699;
    }

    .kn {
        color: #006699;
    }

    .kp {
        color: #006699;
    }

    .kr {
        color: #006699;
    }

    .kt {
        color: #007788;
    }

    .m {
        color: #c24f19;
    }

    .mb {
        color: #40a070;
    }

    .mf {
        color: #c24f19;
    }

    .mh {
        color: #c24f19;
    }

    .mi {
        color: #c24f19;
    }

    .il {
        color: #c24f19;
    }

    .mo {
        color: #c24f19;
    }

    .s {
        color: #d73038;
    }

    .sa {
        color: #4070a0;
    }

    .sb {
        color: #cc3300;
    }

    .sc {
        color: #cc3300;
    }

    .dl {
        color: #cc3300;
    }

    .sd {
        font-style: italic;
        color: #cc3300;
    }

    .s2 {
        color: #cc3300;
    }

    .se {
        color: #cc3300;
    }

    .sh {
        color: #cc3300;
    }

    .si {
        color: #aa0000;
    }

    .sx {
        color: #cc3300;
    }

    .sr {
        color: #337e7e;
    }

    .s1 {
        color: #cc3300;
    }

    .ss {
        color: #ffcc33;
    }

    .na {
        color: #006ee0;
    }

    .nb {
        color: #336666;
    }

    .nc {
        color: #168174;
    }

    .no {
        color: #336600;
    }

    .nd {
        color: #6b62de;
    }

    .ni {
        color: #727272;
    }

    .ne {
        color: #cc0000;
    }

    .nf {
        color: #b715f4;
    }

    .nl {
        color: #6b62de;
    }

    .nn {
        color: #007ca5;
    }

    .nt {
        color: #2f6f9f;
    }

    .nv {
        color: #003333;
    }

    .o {
        color: #555555;
    }

    .ow {
        color: #000000;
    }

    .w {
        color: #bbbbbb;
    }
}
