/* from：https://stackoverflow.com/questions/33451683/pen-highlighter-effect-in-css */

body {
    --pen-highlighter-effect: disable;
}

@container style(--pen-highlighter-effect: enable) {
    .cm-s-obsidian span.cm-highlight,
    .markdown-rendered mark {
        background-color: transparent;
        background-image: linear-gradient(
                104deg,
                transparent 0.9%,
                var(--text-highlight-bg) 2.4%,
                color-mix(in srgb, var(--text-highlight-bg), transparent 30%) 5.8%,
                color-mix(in srgb, var(--text-highlight-bg), transparent 70%) 93%,
                color-mix(in srgb, var(--text-highlight-bg), transparent 10%) 96%,
                var(--text-highlight-bg) 98%
            ),
            linear-gradient(
                183deg,
                transparent 0%,
                color-mix(in srgb, var(--text-highlight-bg), transparent 70%) 7.9%,
                transparent 15%
            );
        padding: 0.1em 3.7px;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        margin: 0;
        border-radius: 0.8em 0.3em;
    }
}
