/* style the construct of component by text editor */
.AppComponentTextEditor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    border: 1px solid rgb(237, 237, 237);
    border-radius: var(--size-07);
    
    width: 100%;
    height: 100%;
}

    .AppComponentTextEditor__Functions {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;

        background: rgb(255, 255, 255);
        border-top-left-radius: var(--size-07);
        border-top-right-radius: var(--size-07);

        width: 100%;

        padding: var(--size-04);
    }

        .AppComponentTextEditor__Functions > button {
            margin-right: var(--size-04);
        }

        @media screen and (max-width: 650px){
            .AppComponentTextEditor__Functions > button {
                display: none;
            }

            .AppComponentTextEditor__Functions > button:nth-of-type( 1 ),
            .AppComponentTextEditor__Functions > button:nth-of-type( 2 ),
            .AppComponentTextEditor__Functions > button:nth-of-type( 3 ),
            .AppComponentTextEditor__Functions > button:nth-of-type( 4 ),
            .AppComponentTextEditor__Functions > button:nth-of-type( 5 ),
            .AppComponentTextEditor__Functions > button:nth-of-type( 6 ) {
                display: flex;
            }
        }

    .AppComponentTextEditor__Content {
        display: block;

        background: rgb(245, 245, 245);
        border-bottom-left-radius: var(--size-07);
        border-bottom-right-radius: var(--size-07);

        outline: unset;

        text-align: left;
        white-space: normal !important;
        word-break: break-word !important;

        width: 100%;
        height: 100%;
        min-height: var(--size-7);

        overflow-y: auto;
        overflow-x: hidden;

        cursor: text;

        padding: var(--size-04);
        transition: 0.4s;
    }

        .AppComponentTextEditor__Content:hover {
            transition: 0.4s;
            background: rgb(240, 240, 240);
        }

        .AppComponentTextEditor__Content * {
            font-size: var(--fotn-size) !important;
            text-align: left;
            white-space: normal !important;
            word-break: break-word !important;

            width: auto !important;

            cursor: text;
        }

        .AppComponentTextEditor__Content > p {
            margin: unset;
        }

/* HTML THE TEMPLATE */
/* <div class="AppComponentTextEditor">
    <div class="AppComponentTextEditor__Functions">
        <button onclick="document.execCommand( 'bold', true );" class="ButtonContext"><i class="icon-bold"></i></button>
        <button onclick="document.execCommand( 'underline', true );" class="ButtonContext"><i class="icon-underline"></i></button>
        <button onclick="document.execCommand( 'italic', true );" class="ButtonContext"><i class="icon-italic"></i></button>
        <button onclick="document.execCommand( 'strikethrough', true );" class="ButtonContext"><i class="icon-strikethrough"></i></button>
        <button onclick="document.execCommand( 'insertOrderedList', true );" class="ButtonContext"><i class="icon-list-ol"></i></button>
        <button onclick="document.execCommand( 'insertUnorderedList', true );" class="ButtonContext"><i class="icon-list-ul"></i></button>
        <button onclick="document.execCommand( 'justifyLeft', true );" class="ButtonContext"><i class="icon-align-left"></i></button>
        <button onclick="document.execCommand( 'justifyCenter', true );" class="ButtonContext"><i class="icon-align-center"></i></button>
        <button onclick="document.execCommand( 'justifyRight', true );" class="ButtonContext"><i class="icon-align-right"></i></button>
        <button onclick="document.execCommand( 'removeFormat', true, null );" class="ButtonContext"><i class="icon-adjust"></i></button>
    </div>
    <div class="AppComponentTextEditor__Content" contenteditable="true"></div>
</div> */