.ck.ck-editor {
    /* Base font size of entire editor UI */
    --ck-font-size-base: 11px;
    --ck-line-height-base: 1.6;

    /* Make the font size of the content the same as from the page itself */
    --ck-content-font-size: var(--font-size);

    /* Smaller buttons & toolbar */
    --ck-ui-component-min-height: 20px;
    --ck-ui-component-min-width: 20px;

    /* Decrease toolbar button icon size */
    --ck-icon-size: 14px;

    /* Make the toolbar appear absolute positioned on top */
    .ck.ck-editor__top {
        display: none;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        transform: translateY(-100%);
    }

    .ck-editor__top:hover {
        display: block;
    }
    &:focus-within,
    &:has(:focus),
    &:has(:active),
    &:has(.wsc-badge:hover)
    {
        .ck-editor__top {
            display: block;
        }
    }
    .ck-heading-dropdown .ck-button__label {
        width: auto !important;
        min-width: 40px;
    }

    .ck-editor__main {
        max-height: 30rlh;
        overflow-y: auto;
        resize: vertical; /* Add a native browser drag handle */
        border: 1px solid var(--ck-color-base-border, #bbbbbb); /* Put the border on the wrapper */
        /**
          * As soon as a user drags the handle, the browser natively adds a style="height: ...px;" to the element
          * from that point we don't want max-height anymore
          */
        &[style*=";height:"],
        &[style*=" height:"],
        &[style^="height:"] {
            max-height: none;
        }
        .ck-content {
            border: none;
            height: 100%; /** follow the max-height of the parent */
        }
    }
}

.ck-powered-by-balloon {
    display: none !important;
}