/* Dark/light theme */
// :root:not(.dark) {
//     --vp-code-block-bg: rgba(125, 125, 125, 0.04);
//     --vp-code-copy-code-active-text: var(--vp-c-text-2);
//     --vp-code-copy-code-hover-bg: rgba(125, 125, 125, 0.1);
//     --vp-code-tab-divider: var(--vp-c-mute-dark);
//     --vp-code-tab-hover-text-color: var(--vp-c-text-1);
//     /* fix contrast: lang name on gray code block */
//     --vp-c-text-dark-3: rgba(180, 180, 180, 0.7);
// }
// :root.dark {
//     --vp-code-block-bg: rgba(0, 0, 0, 0.2);
//     /* fix lang name: check the same above (this is the default) */
//     --vp-c-text-dark-3: rgba(235, 235, 235, 0.38);
// }

/* Hide block based on theme */
html:not(.dark) pre.shiki[class*='dark'] {
    display: none;
}
html:not(.dark) pre.shiki[class*='light'] {
    display: block;
}
html.dark pre.shiki[class*='dark'] {
    display: block;
}
html.dark pre.shiki[class*='light'] {
    display: none;
}

/* VitePress Twoslash */
:root {
    --vp-twoslash-c-annotation-fg: var(--vp-c-text-1);

    --vp-twoslash-c-brand: var(--vp-c-brand);

    --vp-twoslash-c-error-bg: var(--vp-c-red-dimm-2);
    --vp-twoslash-c-error-fg: var(--vp-c-text-1);

    --vp-twoslash-c-logger-error-bg: var(--vp-c-red-dimm-2);
    --vp-twoslash-c-logger-error-fg: var(--vp-c-red-dark);
    --vp-twoslash-c-logger-fg: var(--vp-c-text-1);
    --vp-twoslash-c-logger-log-bg: var(--vp-c-mute-dark);
    --vp-twoslash-c-logger-log-fg: var(--vp-c-gray);
    --vp-twoslash-c-logger-warn-bg: var(--vp-c-yellow-dimm-2);
    --vp-twoslash-c-logger-warn-fg: var(--vp-c-yellow-dark);

    --vp-twoslash-c-lsp-bg: var(--vp-c-bg-elv);
    --vp-twoslash-c-lsp-border: var(--vp-c-divider);
    --vp-twoslash-c-lsp-fg: var(--vp-c-text-1);
    --vp-twoslash-c-lsp-underline: var(--vp-c-text-2);
    --vp-twoslash-lsp-shadow: var(--vp-shadow-2);

    --vp-twoslash-c-query-bg: var(--vp-c-mute-dark);
    --vp-twoslash-c-query-fg-2: var(--vp-c-text-2);
    --vp-twoslash-c-query-fg: var(--vp-c-text-1);
}

/* Fix tab color */
.vp-code-group .tabs label {
    background-color: transparent;
    --vp-code-tab-text-color: var(--vp-c-text-2);
    --vp-code-tab-active-text-color: var(--vp-c-text-1);
}

/* h3 breaks SEO => replaced with h2 with the same size */
.home-content h2 {
    margin-top: 2rem;
    font-size: 1.35rem;
    border-bottom: none;
    margin-bottom: 0;
}

img.resizable-img {
    width: unset;
    height: unset;
}