body.theme-light {
    --hl-transparency: 0.4;
}
body.theme-dark {
    --hl-transparency: 0.5;
}

.cm-align-left, p.align-left {
    text-align: left;
}
.cm-align-right, p.align-right {
    text-align: right;
}
.cm-align-center, p.align-center {
    text-align: center;
}
.cm-align-justify, p.align-justify {
    text-align: justify;
}

.cm-ins {
    text-decoration: underline;
}
.cm-sup {
    vertical-align: top;
    font-size: var(--font-smallest);
}
.cm-sub {
    vertical-align: bottom;
    font-size: var(--font-smallest);
}

.cm-custom-highlight {
    padding-inline: 2px;
    border-radius: 2px;
    background-color: var(--text-highlight-bg);
    &>span.cm-highlight {
        background-color: transparent;
    }
}

.cm-custom-highlight-red, .markdown-rendered mark.custom-highlight-red, .cm-item-red>.menu-item-title {
    background-color: rgba(var(--color-red-rgb), var(--hl-transparency));
}
.cm-custom-highlight-orange, .markdown-rendered mark.custom-highlight-orange, .cm-item-orange>.menu-item-title {
    background-color: rgba(var(--color-orange-rgb), var(--hl-transparency));
}
.cm-custom-highlight-yellow, .markdown-rendered mark.custom-highlight-yellow, .cm-item-yellow>.menu-item-title {
    background-color: rgba(var(--color-yellow-rgb), var(--hl-transparency));
}
.cm-custom-highlight-green, .markdown-rendered mark.custom-highlight-green, .cm-item-green>.menu-item-title {
    background-color: rgba(var(--color-green-rgb), var(--hl-transparency));
}
.cm-custom-highlight-cyan, .markdown-rendered mark.custom-highlight-cyan, .cm-item-cyan>.menu-item-title {
    background-color: rgba(var(--color-cyan-rgb), var(--hl-transparency));
}
.cm-custom-highlight-blue, .markdown-rendered mark.custom-highlight-blue, .cm-item-blue>.menu-item-title {
    background-color: rgba(var(--color-blue-rgb), var(--hl-transparency));
}
.cm-custom-highlight-purple, .markdown-rendered mark.custom-highlight-purple, .cm-item-purple>.menu-item-title {
    background-color: rgba(var(--color-purple-rgb), var(--hl-transparency));
}
.cm-custom-highlight-pink, .markdown-rendered mark.custom-highlight-pink, .cm-item-pink>.menu-item-title {
    background-color: rgba(var(--color-pink-rgb), var(--hl-transparency));
}
.cm-custom-highlight-accent, .markdown-rendered mark.custom-highlight-accent, .cm-item-accent>.menu-item-title {
    background-color: hsl(var(--color-accent-hsl), var(--hl-transparency));
}
.cm-custom-highlight-default, .markdown-rendered mark.custom-highlight-default, .cm-item-default>.menu-item-title {
    background-color: var(--text-highlight-bg);
}

mark {
    padding-inline: 2px;
    border-radius: 2px;
}

.cm-highlight-color-btn {
    margin-inline: 2px;
    width: 12px;
    display: inline-block;
    height: 12px;
    border: solid 1px;
    border-color: #ffffff44;
    vertical-align: middle;
    border-radius: 2px;
    background-color: inherit;
}

.menu.cm-highlight-colors-modal {
    .menu-item {
        padding-top: 3px;
        padding-bottom: 3px;
        & > .menu-item-title {
            /* flex: 0 1 auto; */
            padding-inline: 2px;
            padding-block: 1px;
            border-radius: 2px;
        }
    }
}

.cm-spoiler {
    border-radius: 2px;
    transition-duration: 0.1s;
    transition-property: color;
    .theme-dark & {
        background-color: var(--color-base-25);
    }
    .theme-light & {
        background-color: var(--color-base-40);
    }
    &:not(:is(:hover), :has(.cm-spoiler-revealed), .cm-delim) {
        color: transparent;
    }
}

span.spoiler {
    border-radius: 2px;
    transition-duration: 0.1s;
    transition-property: color;
    .theme-dark & {
        background-color: var(--color-base-25);
    }
    .theme-light & {
        background-color: var(--color-base-40);
    }
    &:not(.spoiler-revealed) {
        color: transparent;
    }
}

.warning-desc {
    color: rgb(var(--color-orange-rgb));
}