@if $site-ui-mode == 'auto' {

@media (prefers-color-scheme: dark) {
    @include highlight-dark-theme();
}

@media (prefers-color-scheme: light) {
    @include highlight-light-theme();
}

} @else if $site-ui-mode == 'dark' {

@include highlight-dark-theme();

} @else if $site-ui-mode == 'light' {

@include highlight-light-theme();

}

.highlight {

@include themer(background-color, (
    'dark': #3f3f3f,
    'light': #f7f7f9,
));
@include themer(border-color, (
    'dark': #222222,
    'light': #e1e1e8,
));

border-style: solid;
border-width: 1px;
border-radius: 4px;
padding: 9px 14px;
margin-bottom: 14px;

}

.highlight pre {

background-color: transparent;
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;

}

.highlight pre code {

@include themer(color, (
    'dark': #fdce93,
    'light': #333,
));

font-size: inherit;
white-space: pre;

}

.highlight pre .lineno {

display: inline-block;
color: #bebec5;
margin-right: 10px;
padding-right: 5px;
text-align: right;
width: 22px;

}