:root
{
    --var-font: 'Roboto Mono', monospace;
    --box-padding: 0px 6px;
    --box-display: inline-block; 

    --file-color: rgb(255, 234, 113);
    --path-color: var(--md-code-hl-string-color);
    --rounding: 4px;
}

[data-md-color-scheme="default"] 
{
    --file-color: #a36f00;
    --md-code-bg-color: rgb(200, 200, 200);
}

[data-md-color-scheme="slate"] 
{
    --md-code-bg-color: #363946;
}

/* variables / values / config etc */
.config-value
{ 
    color:rgb(63, 110, 198);
    font-family: var(--var-font);
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    display: var(--box-display);
    border-radius: var(--rounding);
}

.var-bool
{
    color:#c92a2a;
    font-family: var(--var-font);
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    display: var(--box-display);
}

.var-number
{
    color:#3c5aa6;
    font-family: var(--var-font);
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    display: var(--box-display);
}

.var-float
{
    color:#0096c7;
    font-family: var(--var-font);
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    display: var(--box-display);
}

.var-string
{
    color:var(--md-code-hl-string-color);
    font-family: var(--var-font);
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    display: var(--box-display);
}

.var-filter
{
    color:#927c5d;
    font-family: var(--var-font);
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    display: var(--box-display);
}

.var-command
{
    color:rgb(169, 79, 204);
    font-family: var(--var-font);
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    padding-left: 0px;
    padding-right: 0px;
    display: var(--box-display);
}

.var-command-arg
{
    color:#d97b00;
    font-family: var(--var-font);
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    padding-left: 0px;
    padding-right: 0px;
    display: var(--box-display);
}

.var-command-optional
{
    color:#666666;
    font-family: var(--var-font);
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    padding-left: 0px;
    padding-right: 0px;
    display: var(--box-display);
}

.arg-string
{
    color:var(--md-code-hl-string-color);
    font-family: var(--var-font);
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    padding-left: 0px;
    padding-right: 0px;
    display: var(--box-display);
}

.path
{
    color:var(--path-color);
    font-family: var(--var-font);
    text-decoration: underline;
    text-underline-offset: 6px;
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    display: var(--box-display);
}

.file
{
    color: var(--file-color);
    font-family: var(--var-font);
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    display: var(--box-display);
}

.path-partial
{
    color:var(--path-color);
    font-family: var(--var-font);
    text-decoration: underline;
    text-underline-offset: 6px;
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    padding-right: 0px;
    display: var(--box-display);
}

.file-partial
{
    color: var(--file-color);
    font-family: var(--var-font);
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 6px;
    background-color: var(--md-code-bg-color);
    padding: var(--box-padding);
    padding-left: 0px;
    display: var(--box-display);
}