.highlight-red,
.highlight-orange,
.highlight-yellow,
.highlight-green,
.highlight-blue,
.highlight-purple {
    --highlight-size-1: 64%;
    --highlight-size-2: 48%;
    background-image:
        linear-gradient(
            101deg,
            transparent 0%,
            color-mix(in srgb, var(--highlight-color) 60%, transparent) 5%,
            color-mix(in srgb, var(--highlight-color) 88%, transparent) 18%,
            color-mix(in srgb, var(--highlight-color) 45%, transparent) 50%,
            color-mix(in srgb, var(--highlight-color) 92%, transparent) 82%,
            color-mix(in srgb, var(--highlight-color) 60%, transparent) 95%,
            transparent 100%
        ),
        linear-gradient(
            96deg,
            transparent 2%,
            color-mix(in srgb, var(--highlight-color) 55%, transparent) 22%,
            color-mix(in srgb, var(--highlight-color) 30%, transparent) 65%,
            transparent 97%
        );
    background-repeat: no-repeat, no-repeat;
    background-size: 100% var(--highlight-size-1), 100% var(--highlight-size-2);
    background-position: 0 90%, 0 76%;
    padding: 0 0.22em;
    margin: 0 -0.22em;
}

.highlight-red    { --highlight-color: var(--color-system-red); }
.highlight-orange { --highlight-color: var(--color-system-orange); }
.highlight-yellow { --highlight-color: var(--color-system-yellow); }
.highlight-green  { --highlight-color: var(--color-system-green); }
.highlight-blue   { --highlight-color: var(--color-system-blue); }
.highlight-purple { --highlight-color: var(--color-system-purple); }

.highlight-sm { --highlight-size-1: 44%; --highlight-size-2: 30%; }
.highlight-md { --highlight-size-1: 64%; --highlight-size-2: 48%; }
.highlight-lg { --highlight-size-1: 84%; --highlight-size-2: 64%; }