@layer base {
    :root {
        --shiki-color-text: theme("colors.white");
        --shiki-token-constant: theme("colors.brand.300");
        --shiki-token-string: theme("colors.brand.300");
        --shiki-token-comment: theme("colors.zinc.500");
        --shiki-token-keyword: theme("colors.sky.300");
        --shiki-token-parameter: theme("colors.pink.300");
        --shiki-token-function: theme("colors.violet.300");
        --shiki-token-string-expression: theme("colors.brand.300");
        --shiki-token-punctuation: theme("colors.zinc.200");
    }

    [inert] ::-webkit-scrollbar {
        display: none;
    }

    .prose [class*="language-"] code .highlighted {
        background-color: var(--vp-code-line-highlight-color);
        transition: background-color 0.5s;
        margin: 0 -24px;
        padding: 0 24px;
        width: calc(100% + 48px);
        display: inline-block;
    }

    .prose [class*="language-"] code .highlighted.error {
        background-color: var(--vp-code-line-error-color);
    }

    .prose [class*="language-"] code .highlighted.warning {
        background-color: var(--vp-code-line-warning-color);
    }

    .prose [class*="language-"] code .diff {
        transition: background-color 0.5s;
        margin: 0 -24px;
        padding: 0 24px;
        width: calc(100% + 48px);
        display: inline-block;
    }

    .prose [class*="language-"] code .diff:before {
        position: absolute;
        left: 10px;
    }

    .prose [class*="language-"] .has-focused .line:not(.focused) {
        filter: blur(0.095rem);
        opacity: 0.4;
        transition: filter 0.35s, opacity 0.35s;
    }

    .prose [class*="language-"] .has-focused .line:not(.focused) {
        opacity: 0.7;
        transition: filter 0.35s, opacity 0.35s;
    }

    .prose [class*="language-"]:hover .has-focused .line:not(.focused) {
        filter: blur(0);
        opacity: 1;
    }

    .prose [class*="language-"] code .diff.remove {
        background-color: var(--vp-code-line-diff-remove-color);
        opacity: 0.7;
    }

    .prose [class*="language-"] code .diff.remove:before {
        content: "-";
        color: var(--vp-code-line-diff-remove-symbol-color);
    }

    .prose [class*="language-"] code .diff.add {
        background-color: var(--vp-code-line-diff-add-color);
    }

    .prose [class*="language-"] code .diff.add:before {
        content: "+";
        color: var(--vp-code-line-diff-add-symbol-color);
    }
}

@tailwind base;
@tailwind components;
@tailwind utilities;