:root {
    --color-accent-rgb: 51, 139, 255;
}

.cm-line {
    &.cmx-align-left {
        text-align: left;
    }
    &.cmx-align-right {
        text-align: right;
    }
    &.cmx-align-center {
        text-align: center;
    }
    &.cmx-align-justify {
        text-align: justify;
    }
}

.cmx-underline {
    text-decoration: underline;
}
.cmx-superscript {
    vertical-align: top;
    font-size: var(--font-smallest);
}
.cmx-subscript {
    vertical-align: bottom;
    font-size: var(--font-smallest);
}

.cm-selectionBackground {
    transition-duration: 0.1s;
    transition-property: left, width;
}
.cm-s-obsidian .cm-cursor {
    transition-property: left, top;
    transition-duration: 0.1s;
}

.cm-s-obsidian span.cm-highlight:has(.cmx-highlight) {
    background-color: transparent;
    .cmx-highlight {
        &:has(.cmx-highlight-first-letter) {
            padding-inline-start: 2px;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
        }
        &:has(.cmx-highlight-last-letter) {
            padding-inline-end: 2px;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }
    }
    &.cm-formatting-highlight .cmx-highlight {
        padding-inline: 2px;
        border-radius: 2px;
    }
}

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

.cmx-highlight:has(.cmx-color-btn) {
    background-color: transparent;
}

mark.cmx-highlight-red, .cmx-highlight-red, .cmx-highlight-red .cmx-color-btn, .es-item-red .menu-item-title {
    background-color: rgba(var(--color-red-rgb), 0.5);
}
mark.cmx-highlight-orange, .cmx-highlight-orange, .cmx-highlight-orange .cmx-color-btn, .es-item-orange .menu-item-title {
    background-color: rgba(var(--color-orange-rgb), 0.5);
}
mark.cmx-highlight-yellow, .cmx-highlight-yellow, .cmx-highlight-yellow .cmx-color-btn, .es-item-yellow .menu-item-title {
    background-color: rgba(var(--color-yellow-rgb), 0.5);
}
mark.cmx-highlight-green, .cmx-highlight-green, .cmx-highlight-green .cmx-color-btn, .es-item-green .menu-item-title {
    background-color: rgba(var(--color-green-rgb), 0.5);
}
mark.cmx-highlight-cyan, .cmx-highlight-cyan, .cmx-highlight-cyan .cmx-color-btn, .es-item-cyan .menu-item-title {
    background-color: rgba(var(--color-cyan-rgb), 0.5);
}
mark.cmx-highlight-blue, .cmx-highlight-blue, .cmx-highlight-blue .cmx-color-btn, .es-item-blue .menu-item-title {
    background-color: rgba(var(--color-blue-rgb), 0.5);
}
mark.cmx-highlight-purple, .cmx-highlight-purple, .cmx-highlight-purple .cmx-color-btn, .es-item-purple .menu-item-title {
    background-color: rgba(var(--color-purple-rgb), 0.5);
}
mark.cmx-highlight-pink, .cmx-highlight-pink, .cmx-highlight-pink .cmx-color-btn, .es-item-pink .menu-item-title {
    background-color: rgba(var(--color-pink-rgb), 0.5);
}
mark.cmx-highlight-accent, .cmx-highlight-accent, .cmx-highlight-accent .cmx-color-btn, .es-item-accent .menu-item-title {
    background-color: rgba(var(--color-accent-rgb), 0.5);
}
mark.cmx-highlight-default, .cmx-highlight-default, .cmx-highlight-default .cmx-color-btn, .es-item-default .menu-item-title {
    background-color: var(--text-highlight-bg);
}

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

.menu.es-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;
        }
    }
}

.cmx-spoiler:not(.cmx-spoiler-formatting) {
    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);
    }
    &.cmx-spoiler-hidden:not(:is(:hover)) {
        color: transparent;
    }
}

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(.cmx-revealed)) {
        color: transparent;
    }
}