/**
 * ============================================================================
 * TITAN BOARD
 * TITAN WYSIWYG EDITOR
 * ============================================================================
 */

:root {

    --titan-editor-bg:
        #0d0d14;

    --titan-editor-panel:
        #15151f;

    --titan-editor-panel-2:
        #1b1b27;

    --titan-editor-border:
        #2b2b39;

    --titan-editor-border-light:
        #39394a;

    --titan-editor-text:
        #f2f2f5;

    --titan-editor-muted:
        #a4a4b0;

    --titan-editor-accent:
        #5865f2;

    --titan-editor-accent-hover:
        #6875ff;

}


/*
|--------------------------------------------------------------------------
| Editor Container
|--------------------------------------------------------------------------
*/

.ck.ck-editor {

    width: 100%;

    border:
        1px solid
        var(--titan-editor-border);

    border-radius:
        10px;

    overflow:
        hidden;

    background:
        var(--titan-editor-bg);

}


/*
|--------------------------------------------------------------------------
| Toolbar
|--------------------------------------------------------------------------
*/

.ck.ck-toolbar {

    background:
        var(--titan-editor-panel) !important;

    border:
        0 !important;

    border-bottom:
        1px solid
        var(--titan-editor-border) !important;

    padding:
        8px !important;

    gap:
        3px;

}


/*
|--------------------------------------------------------------------------
| Toolbar Buttons
|--------------------------------------------------------------------------
*/

.ck.ck-button,
.ck.ck-toolbar__separator {

    color:
        var(--titan-editor-text) !important;

}


.ck.ck-button {

    border-radius:
        6px !important;

}


.ck.ck-button:hover {

    background:
        var(--titan-editor-panel-2) !important;

}


.ck.ck-button.ck-on {

    background:
        var(--titan-editor-accent) !important;

    color:
        #ffffff !important;

}


/*
|--------------------------------------------------------------------------
| Dropdowns
|--------------------------------------------------------------------------
*/

.ck.ck-dropdown__panel {

    background:
        var(--titan-editor-panel) !important;

    border:
        1px solid
        var(--titan-editor-border) !important;

    color:
        var(--titan-editor-text) !important;

}


.ck.ck-list {

    background:
        var(--titan-editor-panel) !important;

}


.ck.ck-list__item {

    color:
        var(--titan-editor-text) !important;

}


.ck.ck-list__item:hover {

    background:
        var(--titan-editor-panel-2) !important;

}


/*
|--------------------------------------------------------------------------
| Labels
|--------------------------------------------------------------------------
*/

.ck.ck-button .ck-button__label {

    color:
        inherit !important;

}


/*
|--------------------------------------------------------------------------
| Editable Area
|--------------------------------------------------------------------------
*/

.ck-editor__editable_inline {

    min-height:
        280px;

    padding:
        22px !important;

    background:
        var(--titan-editor-bg) !important;

    color:
        var(--titan-editor-text) !important;

}


/*
|--------------------------------------------------------------------------
| Placeholder
|--------------------------------------------------------------------------
*/

.ck.ck-editor__editable
.ck-placeholder::before {

    color:
        var(--titan-editor-muted) !important;

}


/*
|--------------------------------------------------------------------------
| Paragraph
|--------------------------------------------------------------------------
*/

.ck-content p {

    margin:
        0 0 12px;

    line-height:
        1.7;

}


/*
|--------------------------------------------------------------------------
| Headings
|--------------------------------------------------------------------------
*/

.ck-content h2 {

    font-size:
        1.7rem;

    margin:
        24px 0 14px;

}


.ck-content h3 {

    font-size:
        1.4rem;

    margin:
        20px 0 12px;

}


.ck-content h4 {

    font-size:
        1.15rem;

    margin:
        18px 0 10px;

}


/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

.ck-content a {

    color:
        #6d7cff;

}


.ck-content a:hover {

    color:
        #8b96ff;

}


/*
|--------------------------------------------------------------------------
| Blockquote
|--------------------------------------------------------------------------
*/

.ck-content blockquote {

    margin:
        18px 0;

    padding:
        12px 18px;

    background:
        var(--titan-editor-panel);

    border-left:
        4px solid
        var(--titan-editor-accent);

    border-radius:
        0 6px 6px 0;

    color:
        #d7d7df;

}


/*
|--------------------------------------------------------------------------
| Code
|--------------------------------------------------------------------------
*/

.ck-content code {

    padding:
        2px 6px;

    border-radius:
        4px;

    background:
        #20202b;

    color:
        #f3c969;

    font-family:
        Consolas,
        Monaco,
        monospace;

}


.ck-content pre {

    margin:
        18px 0;

    padding:
        18px;

    background:
        #09090e;

    border:
        1px solid
        var(--titan-editor-border);

    border-radius:
        8px;

    overflow:
        auto;

}


.ck-content pre code {

    padding:
        0;

    background:
        transparent;

    color:
        #e5e5ea;

}


/*
|--------------------------------------------------------------------------
| Lists
|--------------------------------------------------------------------------
*/

.ck-content ul,
.ck-content ol {

    padding-left:
        30px;

}


.ck-content li {

    margin:
        5px 0;

}


/*
|--------------------------------------------------------------------------
| Tables
|--------------------------------------------------------------------------
*/

.ck-content figure.table {

    margin:
        18px 0;

}


.ck-content table {

    width:
        100%;

    border-collapse:
        collapse;

}


.ck-content table td,
.ck-content table th {

    border:
        1px solid
        var(--titan-editor-border-light);

    padding:
        9px 12px;

}


.ck-content table th {

    background:
        var(--titan-editor-panel);

    font-weight:
        700;

}


.ck-content table td {

    background:
        var(--titan-editor-bg);

}


/*
|--------------------------------------------------------------------------
| Horizontal Rule
|--------------------------------------------------------------------------
*/

.ck-content hr {

    border:
        0;

    border-top:
        1px solid
        var(--titan-editor-border);

    margin:
        25px 0;

}


/*
|--------------------------------------------------------------------------
| Titan Spoiler - Editor
|--------------------------------------------------------------------------
*/

.titan-editor-spoiler {

    margin:
        18px 0;

    border:
        1px solid
        var(--titan-editor-border);

    border-radius:
        8px;

    background:
        var(--titan-editor-panel);

    overflow:
        hidden;

}


.titan-editor-spoiler__header {

    padding:
        11px 14px;

    background:
        var(--titan-editor-panel-2);

    color:
        var(--titan-editor-text);

    font-weight:
        700;

}


/*
|--------------------------------------------------------------------------
| Titan Spoiler - Output
|--------------------------------------------------------------------------
*/

.titan-wysiwyg-spoiler {

    display:
        block;

    margin:
        18px 0;

    padding:
        12px 15px;

    border:
        1px solid
        var(--titan-editor-border);

    border-radius:
        8px;

    background:
        var(--titan-editor-panel);

}


.titan-wysiwyg-spoiler summary {

    cursor:
        pointer;

    color:
        var(--titan-editor-text);

    font-weight:
        700;

    user-select:
        none;

}


.titan-wysiwyg-spoiler[open] summary {

    padding-bottom:
        10px;

    margin-bottom:
        12px;

    border-bottom:
        1px solid
        var(--titan-editor-border);

}


/*
|--------------------------------------------------------------------------
| Source Editing
|--------------------------------------------------------------------------
*/

.ck-source-editing-area {

    background:
        #08080d !important;

}


.ck-source-editing-area textarea {

    background:
        #08080d !important;

    color:
        #e7e7ec !important;

    border:
        0 !important;

    font-family:
        Consolas,
        Monaco,
        monospace !important;

    font-size:
        14px !important;

    line-height:
        1.6 !important;

}


/*
|--------------------------------------------------------------------------
| Focus
|--------------------------------------------------------------------------
*/

.ck.ck-editor.ck-focused {

    border-color:
        var(--titan-editor-accent);

    box-shadow:
        0 0 0 2px
        rgba(88, 101, 242, .18);

}


/*
|--------------------------------------------------------------------------
| Font Dropdown
|--------------------------------------------------------------------------
*/

.ck-font-family-dropdown
.ck-button {

    min-width:
        150px;

}


/*
|--------------------------------------------------------------------------
| Mention Dropdown
|--------------------------------------------------------------------------
*/

.ck-mentions {

    background:
        var(--titan-editor-panel) !important;

    border:
        1px solid
        var(--titan-editor-border) !important;

}


.ck-mentions .ck-list__item {

    color:
        var(--titan-editor-text);

}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .ck.ck-toolbar {

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

    }

}


@media (max-width: 600px) {

    .ck-editor__editable_inline {

        min-height:
            220px;

        padding:
            15px !important;

    }

    .ck.ck-toolbar {

        padding:
            6px !important;

    }

}


/*
|--------------------------------------------------------------------------
| Upload / Attachment Compatibility
|--------------------------------------------------------------------------
*/

.titan-editor-attachments {

    margin-top:
        15px;

}


/*
|--------------------------------------------------------------------------
| Selection
|--------------------------------------------------------------------------
*/

.ck-content ::selection {

    background:
        rgba(88, 101, 242, .35);

}