body:not([data-bs-theme="dark"]) {
    --b-codeblock-bg: #f8f9fb;
    --b-codeblock-text: #2f3338;
    --b-codeblock-border: #e1e4e8;
    --b-inline-bg: #f2f4f7;
    --b-inline-text: #2f3338;
    --b-syntax-tag: #3a6e55;
    --b-syntax-attr: #356ab7;
    --b-syntax-string: #2e5a94;
    --b-syntax-keyword: #b03c3c;
    --b-syntax-number: #2d5aa0;
    --b-syntax-comment: #8a9199;
    --b-syntax-function: #6c5ce7;
    --b-syntax-class: #9c4a1a;
    --b-syntax-variable: #3866d3;
}

body[data-bs-theme="dark"] {
    --b-codeblock-bg: #1c2128;
    --b-codeblock-text: #d3d7dd;
    --b-codeblock-border: #2b3138;
    --b-inline-bg: #2a3038;
    --b-inline-text: #e0e3e8;
    --b-syntax-tag: #81c995;
    --b-syntax-attr: #9ccaff;
    --b-syntax-string: #aad2ff;
    --b-syntax-keyword: #ff938a;
    --b-syntax-number: #9ccaff;
    --b-syntax-comment: #9da4ad;
    --b-syntax-function: #cdbaff;
    --b-syntax-class: #e7b88c;
    --b-syntax-variable: #97b8f7;
}

.blazorise-codeblock {
    background-color: var(--b-codeblock-bg);
    color: var(--b-codeblock-text);
    border: 1px solid var(--b-codeblock-border);
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 1em;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

    .blazorise-codeblock pre {
        margin: 0;
        padding: 0;
        background-color: var(--b-codeblock-bg);
        color: inherit;
        overflow: visible;
        white-space: pre;
    }

code {
    background-color: var(--b-inline-bg);
    color: var(--b-inline-text);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    border-radius: 6px;
    border: 1px solid var(--b-codeblock-border);
    padding: 0.15em 0.35em;
    font-size: 0.85em;
}

.blazorise-codeblock .html .htmlTagDelimiter {
    color: var(--b-syntax-tag);
}

.blazorise-codeblock .html .htmlElementName {
    color: var(--b-syntax-tag);
    font-weight: 600;
}

.blazorise-codeblock .html .htmlAttributeName {
    color: var(--b-syntax-attr);
}

.blazorise-codeblock .html .htmlOperator,
.blazorise-codeblock .html .quot {
    color: var(--b-syntax-comment);
}

.blazorise-codeblock .html .htmlAttributeValue {
    color: var(--b-syntax-string);
}

.blazorise-codeblock .html .comment {
    color: var(--b-syntax-comment);
    font-style: italic;
}

.blazorise-codeblock .csharp .keyword {
    color: var(--b-syntax-keyword);
    font-weight: 600;
}

.blazorise-codeblock .csharp .string {
    color: var(--b-syntax-string);
}

.blazorise-codeblock .csharp .function {
    color: var(--b-syntax-function);
}

.blazorise-codeblock .csharp .class {
    color: var(--b-syntax-class);
    font-weight: 600;
}

.blazorise-codeblock .csharp .number {
    color: var(--b-syntax-number);
}

.blazorise-codeblock .csharp .localVar,
.blazorise-codeblock .csharp .variable {
    color: var(--b-syntax-variable);
}

.blazorise-codeblock .csharp .enum {
    color: var(--b-syntax-function);
}

.blazorise-codeblock .csharp .comment {
    color: var(--b-syntax-comment);
    font-style: italic;
}

.blazorise-codeblock .powershell .comment {
    color: var(--b-syntax-comment);
}

.blazorise-codeblock .powershell .powershellOperator {
    color: var(--b-syntax-keyword);
}

.blazorise-codeblock::-webkit-scrollbar {
    height: 10px;
}

.blazorise-codeblock::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 10px;
}

.blazorise-codeblock:hover::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.5);
}

.blazorise-codeblock ::selection {
    background-color: rgba(187, 222, 251, 0.3);
}

body[data-bs-theme="dark"] .blazorise-codeblock ::selection {
    background-color: rgba(56, 139, 253, 0.35);
}

.blazorise-codeblock .razor .razorComment {
    color: var(--b-syntax-comment);
    font-style: italic;
}

.blazorise-codeblock .razor .razorDirective {
    color: var(--b-syntax-keyword);
    font-weight: 600;
}

.blazorise-codeblock .razor .razorTransition {
    color: var(--b-syntax-comment);
}
