code {
    font-family: "TX-02", monospace;
    font-size: var(--medium-size);

    padding: 3px 8px;
    overflow-wrap: anywhere;

    background-color: var(--palette0);
    border-radius: 5px;
}

pre:has(code) {
    font-family: "TX-02", monospace;
    line-height: 1.4;

    background-color: var(--palette0);
    border-radius: 5px;

    padding: 10px 15px;
    overflow-y: auto;

    code {
        padding: unset;
        border-radius: unset;
    }
}

.block:has(pre > code) {
    pre {
        margin: 0 16px;
    }
}

figure:has(pre > code) {
    margin: auto;

    figcaption {
        text-align: center;
    }
}

@mixin style($color: --none, $font-weight: 400, $font-style: normal) {
    color: var($color);
    font-weight: $font-weight;
    font-style: $font-style;

    &::selection {
        background-color: var($color);
        color: var(--selection-foreground);
    }

    &::-moz-selection {
        background-color: var($color);
        color: var(--selection-foreground);
    }
}

// Syntax

code > .variable {
    // color: var(--fg);
    @include style($color: --fg);
}

code > .variable_builtin {
    // color: var(--syn-special2);
    // font-style: italic;
    @include style($color: --syn-special2, $font-style: bold);
}

code > .comment {
    // color: var(--syn-comment);
    @include style($color: --syn-comment, $font-style: italic);
}

code > .constant,
code > .markup_math,
code > .attribute {
    // color: var(--syn-constant);
    @include style($color: --syn-constant);
}

code > .string,
code > .character,
code > .markup_raw {
    // color: var(--syn-string);
    @include style($color: --syn-string);
}

code > .number,
code > .float {
    // color: var(--syn-number);
    @include style($color: --syn-number);
}

code > .boolean {
    // color: var(--syn-constant);
    // font-weight: bold;
    @include style($color: --syn-constant, $font-weight: bold);
}

code > .identifier {
    // color: var(--syn-identifier);
    @include style($color: --syn-identifier);
}

code > .function,
code > .function_call,
code > .markup_heading {
    // color: var(--syn-fun);
    @include style($color: --syn-fun);
}

code > .statement,
code > .module {
    // color: var(--syn-statement);
    @include style($color: --syn-statement);
}

code > .operator {
    // color: var(--syn-operator);
    @include style($color: --syn-operator);
}

code > .keyword,
code > .markup_environment {
    // color: var(--syn-keyword);
    @include style($color: --syn-keyword);
}

code > .preproc,
code > .keyword_import {
    // color: var(--syn-preproc);
    @include style($color: --syn-preproc);
}

code > .type,
code > .constructor.constant {
    // color: var(--syn-type);
    @include style($color: --syn-type);
}

code > .type_builtin,
code > .function_builtin {
    @include style($color: --syn-keyword);
}

code > .special {
    // color: var(--syn-special1);
    @include style($color: --syn-special1);
}

code > .delimiter {
    // color: var(--syn-punct);
    @include style($color: --syn-punct);
}

code > .underlined {
    // color: var(--syn-special1);
    text-decoration: underline;
    @include style($color: --syn-special1);
}

code > .bold {
    // font-weight: bold;
    @include style($font-weight: bold);
}

code > .italic {
    // font-style: italic;
    @include style($font-style: italic);
}

code > .error {
    // color: var(--diag-error);
    @include style($color: --diag-error);
}

code > .todo {
    // color: var(--fg-reverse);
    background-color: var(--diag-info);
    // font-weight: bold;
    @include style($color: --fg-reverse, $font-weight: bold);
}

// Treesitter

code > .variable_parameter {
    // color: var(--syn-parameter);
    @include style($color: --syn-parameter);
}

code > .variable_member,
code > .property,
code > .tag_attribute {
    // color: var(--syn-identifier);
    @include style($color: --syn-identifier);
}

code > .string_regexp {
    // color: var(--syn-regex);
    @include style($color: --syn-regex);
}

code > .string_escape {
    // color: var(--syn-regex);
    // font-weight: bold;
    @include style($color: --syn-regex, $font-weight: bold);
}

code > .string_special_symbol {
    // color: var(--syn-identifier);
    @include style($color: --syn-identifier);
}

code > .string_special_url,
code > .markup_link_url {
    // color: var(--syn-special1);
    text-decoration: wavy;
    @include style($color: --syn-special1);
}

code > .constructor {
    // color: var(--syn-special1);
    @include style($color: --syn-special1);
}

code > .keyword_operator {
    // color: var(--syn-operator);
    // font-weight: bold;
    @include style($color: --syn-operator, $font-weight: bold);
}

code > .keyword_modifier,
code > .keyword_function,
code > .keyword_type {
    @include style($color: --syn-keyword);
}

code > .keyword_return {
    @include style($color: --syn-special3);
}

code > .keyword_conditional {
    @include style($color: --syn-keyword);
}

code > .keyword_exception {
    @include style($color: --syn-special3, $font-weight: bold);
}

code > .punctuation_delimiter,
code > .punctuation_bracket,
code > .tag_delimiter {
    @include style($color: --syn-punct);
}

code > .punctuation_special {
    @include style($color: --syn-special1);
}

code > .comment_error {
    background-color: var(--diag-error);
    @include style($color: --fg, $font-weight: bold);
}

code > .comment_warning {
    background-color: var(--diag-warning);
    @include style($color: --fg, $font-weight: bold);
}

code > .comment_note {
    color: var(--fg);
    background-color: var(--diag-hint);
    font-weight: bold;
    @include style($color: --syn-constant);
}

code > .markup_strong {
    @include style($font-weight: bold);
}

code > .markup_italic {
    @include style($font-style: italic);

    &::selection {
        background-color: var(--selection-background);
        color: var(--selection-foreground);
    }

    &::-moz-selection {
        background-color: var(--selection-background);
        color: var(--selection-foreground);
    }
}

code > .markup_strikethrough {
    text-decoration: line-through;
}

code > .markup_quote {
    @include style($color: --syn-parameter);
}

code > .diff_plus {
    // color: var(--vcs-added);
    @include style($color: --syn-added);
}

code > .diff_minus {
    @include style($color: --syn-removed);
}

code > .diff_delta {
    @include style($color: --syn-changed);
}