/*
 * New diff- syntax
 */

pre[class*="language-diff-"] {
    --eleventy-code-padding: 1.25em;
    padding-left: var(--eleventy-code-padding);
    padding-right: var(--eleventy-code-padding);
}
.token.deleted {
    background-color: hsl(0, 51%, 37%);
}
.token.inserted {
    background-color: hsl(126, 31%, 39%);
}

/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
    -webkit-user-select: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--eleventy-code-padding);
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: rgba(0, 0, 0, 0.2);
}

/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
    display: block;
    margin-left: calc(-1 * var(--eleventy-code-padding));
    margin-right: calc(-1 * var(--eleventy-code-padding));
    text-decoration: none; /* override del, ins, mark defaults */
    color: inherit; /* override del, ins, mark defaults */
}