ckeditor/ckeditor5-theme-lark

/*
 * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

:root {
    --ck-color-restricted-editing-exception-background: hsla(31, 100%, 65%, .2);
    --ck-color-restricted-editing-exception-hover-background: hsla(31, 100%, 65%, .35);
    --ck-color-restricted-editing-exception-brackets: hsla(31, 100%, 40%, .4);
    --ck-color-restricted-editing-selected-exception-background: hsla(31, 100%, 65%, .5);
    --ck-color-restricted-editing-selected-exception-brackets: hsla(31, 100%, 40%, .6);
}

.ck-editor__editable .restricted-editing-exception {
    transition: .2s ease-in-out background;
    background-color: var(--ck-color-restricted-editing-exception-background);
    border: 1px solid;
    border-image: linear-gradient(
        to right,
        var(--ck-color-restricted-editing-exception-brackets) 0%,
        var(--ck-color-restricted-editing-exception-brackets) 5px,
        hsla(0, 0%, 0%, 0) 6px,
        hsla(0, 0%, 0%, 0) calc(100% - 6px),
        var(--ck-color-restricted-editing-exception-brackets) calc(100% - 5px),
        var(--ck-color-restricted-editing-exception-brackets) 100%
    ) 1;

    &.restricted-editing-exception_selected {
        background-color: var(--ck-color-restricted-editing-selected-exception-background);
        border-image: linear-gradient(
            to right,
            var(--ck-color-restricted-editing-selected-exception-brackets) 0%,
            var(--ck-color-restricted-editing-selected-exception-brackets) 5px,
            var(--ck-color-restricted-editing-selected-exception-brackets) calc(100% - 5px),
            var(--ck-color-restricted-editing-selected-exception-brackets) 100%
        ) 1;
    }

    &.restricted-editing-exception_collapsed {
        /* Empty exception should have the same width as exception with at least 1 char */
        padding-left: 1ch;
    }
}

.ck-restricted-editing_mode_restricted {
    cursor: default;

    /* We also have to override all elements inside the restricted editable to prevent cursor switching between default and text
    during the pointer movement. */
    & * {
        cursor: default;
    }

    & .restricted-editing-exception {
        cursor: text;

        & * {
            cursor: text;
        }

        &:hover {
            background: var(--ck-color-restricted-editing-exception-hover-background);
        }
    }
}