code,
mark,
cite,
del,
ins
{
    padding-inline: 0.6ch;
    border-radius: calc(var(--radius) / 2);
}

code,
var,
pre,
pre~figcaption
{
    font-family: fira, monospace;
    color: whitesmoke;
    background-color: #4b3d4d;
}

pre
{
    display: block;
    margin: 0;
    overflow-x: auto;

    >code
    {
        display: block;
        padding: 0.6rem 0.9rem;
    }

    ~figcaption
    {
        border-block-end: 0;
        border-inline: 0;
        background: #665268;
    }
}

:not(pre)>code
{
    white-space: nowrap;
}

code[data-language=html]
{
    color: #cae7fc;

    span.keyword
    {
        color: #fd6f64;
    }

    span.attribute
    {
        color: #fd9a43;
    }

    span.value
    {
        color: #c48cff;
    }

    span.string
    {
        color: #ccea53;
    }

    span.text-node
    {
        color: #fffbf4;
    }

    span.method
    {
        color: #ff7b72;
    }

    span.constant
    {
        color: #ff7b72;
    }
}

code[data-language=shell]
{
    color: #fffbf4;

    span.command-line
    {
        color: #c6dc6c;
        font-weight: bold;
    }

    span.directory
    {
        font-weight: bold;
    }

    span.host,
    span.directory
    {
        color: #58a5dd;
    }

    span.command
    {
        color: #fd6f64;
    }

    span.path
    {
        color: #c6dc6c;
    }

    span.argument
    {
        color: #fff8e1;
    }
}