.theme-frontend-highlight {
    --tfh-bg: #f5f6f7;
    --tfh-border: #dadada;
    --tfh-color: #1f2937;
    --tfh-number-bg: #eef2f6;
    --tfh-number-border: #d7dde5;
    --tfh-number-color: #94a3b8;
    --tfh-gutter-width: 48px;
    margin: 0 0 1.6rem;
}

.theme-frontend-highlight[data-highlight-language]:not([data-highlight-language=""])::before {
    content: attr(data-highlight-language);
    display: inline-flex;
    align-items: center;
    margin: 0 0 0.5rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--tfh-border);
    border-radius: 999px;
    background: var(--tfh-number-bg);
    color: var(--tfh-number-color);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.theme-frontend-highlight[data-highlight-theme="github"],
.theme-frontend-highlight[data-highlight-theme="default"] {
    --tfh-bg: #f5f6f7;
    --tfh-border: #dadada;
    --tfh-color: #1f2937;
    --tfh-number-bg: #eef2f6;
    --tfh-number-border: #d7dde5;
    --tfh-number-color: #94a3b8;
}

.theme-frontend-highlight[data-highlight-theme="dark"] {
    --tfh-bg: #0f172a;
    --tfh-border: #1e293b;
    --tfh-color: #e2e8f0;
    --tfh-number-bg: #111827;
    --tfh-number-border: #1f2937;
    --tfh-number-color: #64748b;
}

.theme-frontend-highlight[data-highlight-theme="light"] {
    --tfh-bg: #ffffff;
    --tfh-border: #d8dee4;
    --tfh-color: #111827;
    --tfh-number-bg: #f8fafc;
    --tfh-number-border: #e2e8f0;
    --tfh-number-color: #94a3b8;
}

.theme-frontend-highlight[data-highlight-theme="nord"] {
    --tfh-bg: #2e3440;
    --tfh-border: #3b4252;
    --tfh-color: #e5e9f0;
    --tfh-number-bg: #3b4252;
    --tfh-number-border: #434c5e;
    --tfh-number-color: #81a1c1;
}

.theme-frontend-highlight[data-highlight-theme="monokai"] {
    --tfh-bg: #272822;
    --tfh-border: #3e3d32;
    --tfh-color: #f8f8f2;
    --tfh-number-bg: #272822;
    --tfh-number-border: #3e3d32;
    --tfh-number-color: #75715e;
}

.theme-frontend-highlight[data-highlight-theme="dracula"] {
    --tfh-bg: #282a36;
    --tfh-border: #44475a;
    --tfh-color: #f8f8f2;
    --tfh-number-bg: #21222c;
    --tfh-number-border: #44475a;
    --tfh-number-color: #6272a4;
}

.theme-frontend-highlight[data-highlight-theme="one-dark"] {
    --tfh-bg: #282c34;
    --tfh-border: #3a404b;
    --tfh-color: #abb2bf;
    --tfh-number-bg: #21252b;
    --tfh-number-border: #3a404b;
    --tfh-number-color: #5c6370;
}

.theme-frontend-highlight[data-highlight-theme="solarized-dark"] {
    --tfh-bg: #002b36;
    --tfh-border: #073642;
    --tfh-color: #93a1a1;
    --tfh-number-bg: #073642;
    --tfh-number-border: #0b4b5a;
    --tfh-number-color: #586e75;
}

.theme-frontend-highlight[data-highlight-theme="solarized-light"] {
    --tfh-bg: #fdf6e3;
    --tfh-border: #e4cb8f;
    --tfh-color: #657b83;
    --tfh-number-bg: #fdf6e3;
    --tfh-number-border: #eee8d5;
    --tfh-number-color: #93a1a1;
}

.theme-frontend-highlight__body {
    display: grid;
    grid-template-columns: min-content minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid var(--tfh-border);
    background: var(--tfh-bg);
    overflow: hidden;
}

.theme-frontend-highlight:not(.has-line-numbers) .theme-frontend-highlight__body {
    grid-template-columns: minmax(0, 1fr);
}

.theme-frontend-highlight[data-highlight-density="compact"] .theme-line-numbers-rows {
    padding-top: 1rem;
    padding-bottom: 0.75rem;
}

.theme-frontend-highlight[data-highlight-density="compact"] .theme-line-numbers-rows span,
.theme-frontend-highlight[data-highlight-density="compact"] .theme-frontend-highlight__code {
    line-height: 1.35;
}

.theme-frontend-highlight[data-highlight-density="compact"] .theme-frontend-highlight__code {
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important;
}

.theme-frontend-highlight[data-highlight-density="comfortable"] .theme-line-numbers-rows {
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
}

.theme-frontend-highlight[data-highlight-density="comfortable"] .theme-line-numbers-rows span,
.theme-frontend-highlight[data-highlight-density="comfortable"] .theme-frontend-highlight__code {
    line-height: 1.7;
}

.theme-frontend-highlight[data-highlight-density="comfortable"] .theme-frontend-highlight__code {
    padding-top: 1.75rem !important;
    padding-bottom: 1.25rem !important;
}

.theme-line-numbers-rows {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: var(--tfh-gutter-width);
    padding: 1.5rem 0 1rem;
    background: var(--tfh-number-bg);
    border-right: 1px solid var(--tfh-number-border);
    color: var(--tfh-number-color);
    text-align: right;
    user-select: none;
}

.theme-line-numbers-rows span {
    display: block;
    padding: 0 12px 0 10px;
    line-height: 1.5;
    box-sizing: border-box;
}

.theme-frontend-highlight__pre {
    margin: 0;
    background: transparent !important;
    overflow: auto;
}

.theme-frontend-highlight__code {
    display: block;
    margin: 0 !important;
    padding: 1.5rem 1rem 1rem !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--tfh-color) !important;
    line-height: 1.5;
    white-space: pre;
    tab-size: 4;
    font-family: Inconsolata, Monaco, "Andale Mono", "Lucida Console",
        "Bitstream Vera Sans Mono", "Courier New", Courier, "Hiragino Sans",
        "Yu Gothic UI", monospace;
    -webkit-font-smoothing: subpixel-antialiased;
}

.theme-frontend-highlight[data-highlight-wrap="soft"] .theme-frontend-highlight__code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.theme-frontend-highlight__pre::-webkit-scrollbar {
    height: 10px;
}

.theme-frontend-highlight__pre::-webkit-scrollbar-track {
    background: transparent;
}

.theme-frontend-highlight__pre::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

.theme-frontend-highlight[data-highlight-theme="dark"] .theme-frontend-highlight__pre::-webkit-scrollbar-thumb,
.theme-frontend-highlight[data-highlight-theme="nord"] .theme-frontend-highlight__pre::-webkit-scrollbar-thumb,
.theme-frontend-highlight[data-highlight-theme="monokai"] .theme-frontend-highlight__pre::-webkit-scrollbar-thumb,
.theme-frontend-highlight[data-highlight-theme="dracula"] .theme-frontend-highlight__pre::-webkit-scrollbar-thumb,
.theme-frontend-highlight[data-highlight-theme="one-dark"] .theme-frontend-highlight__pre::-webkit-scrollbar-thumb,
.theme-frontend-highlight[data-highlight-theme="solarized-dark"] .theme-frontend-highlight__pre::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
}
