/* Variables come from Blogar Light/Dark */

/* CK variables constant between modes */
.ck {
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    
    /* Old, originally-hardcoded CK variables */
    --ck-color-switch-button-off-background: var(--color-midgray);
    --ck-color-input-disabled-text: var(--color-midgray);
    
    /* New CK variables */
    --ck-color-editor-editable-border-active-focus: var(--color-primary);
    
    /* New CK variables - RGB values of originally RGBA-based colors */
    --ck-color-table-focused-cell-background-rgb: 158, 201, 250;
    --ck-table-selected-cell-background-rgb: 158, 207, 250;
    --ck-color-link-selected-background-rgb: 31, 176, 255;
    --ck-color-link-fake-selection-rgb: 31, 176, 255;
}

/* New CK variables that change between modes */
.ck {
    --ck-color-base-background-light: var(--color-lightest);
    --ck-color-base-background-dark: var(--color-darker);
    --ck-color-base-border-light: var(--color-lighter);
    --ck-color-base-border-dark: var(--color-dark);
    --ck-color-base-text-light: var(--bs-body-color);
    --ck-color-base-text-dark: var(--color-white);
    --ck-color-state-light: var(--color-lighter);
    --ck-color-state-dark: var(--color-dark);
    --ck-color-state-extra-light: var(--color-light);
    --ck-color-state-extra-dark: var(--color-darkest);
    
    /* Alpha values of originally RGBA-based colors */
    --ck-color-table-focused-cell-background-a-light: 0.3;
    --ck-color-table-focused-cell-background-a-dark: 1.0;
    --ck-table-selected-cell-background-a-light: 0.3;
    --ck-table-selected-cell-background-a-dark: 0.3;
    --ck-color-link-selected-background-a-light: 0.2;
    --ck-color-link-selected-background-a-dark: 0.4;
    --ck-color-link-fake-selection-a-light: 0.4;
    --ck-color-link-fake-selection-a-dark: 0.6;
}

/* No editing required after this point */

/* CK variables for light mode */
body.active-light-mode .ck {
    /* Originally-hardcoded variables */
    --ck-color-base-background: var(--ck-color-base-background-light);
    --ck-color-base-border: var(--ck-color-base-border-light);
    --ck-color-base-text: var(--ck-color-base-text-light);
    --ck-color-button-default-hover-background: var(--ck-color-state-light);
    --ck-color-button-default-active-background: var(--ck-color-state-light);
    --ck-color-input-disabled-background: var(--ck-color-state-light);
    --ck-color-editable-blur-selection: var(--ck-color-state-light);
    --ck-color-split-button-hover-background: var(--ck-color-state-extra-light);
    
    /* New variables */
    --ck-color-table-header: var(--ck-color-state-extra-light);
    --ck-color-table-cell: var(--ck-color-base-background-light);
    --ck-color-table-border: var(--ck-color-base-border-light);
    
    /* Alpha values of originally RGBA-based colors */
    --ck-color-table-focused-cell-background-a: var(--ck-color-table-focused-cell-background-a-light);
    --ck-table-selected-cell-background-a: var(--ck-table-selected-cell-background-a-light);
    --ck-color-link-selected-background-a: var(--ck-color-link-selected-background-a-light);
    --ck-color-link-fake-selection-a: var(--ck-color-link-fake-selection-a-light);
}

/* CK variables for dark mode */
body.active-dark-mode .ck {
    /* Originally-hardcoded variables */
    --ck-color-base-background: var(--ck-color-base-background-dark);
    --ck-color-base-border: var(--ck-color-base-border-dark);
    --ck-color-base-text: var(--ck-color-base-text-dark);
    --ck-color-button-default-hover-background: var(--ck-color-state-dark);
    --ck-color-button-default-active-background: var(--ck-color-state-dark);
    --ck-color-input-disabled-background: var(--ck-color-state-dark);
    --ck-color-editable-blur-selection: var(--ck-color-state-dark);
    --ck-color-split-button-hover-background: var(--ck-color-state-extra-dark);
    
    /* New variables */
    --ck-color-table-header: var(--ck-color-state-extra-dark);
    --ck-color-table-cell: var(--ck-color-base-background-dark);
    --ck-color-table-border: var(--ck-color-base-border-dark);
    
    /* Alpha values of originally RGBA-based colors */
    --ck-color-table-focused-cell-background-a: var(--ck-color-table-focused-cell-background-a-dark);
    --ck-table-selected-cell-background-a: var(--ck-table-selected-cell-background-a-dark);
    --ck-color-link-selected-background-a: var(--ck-color-link-selected-background-a-dark);
    --ck-color-link-fake-selection-a: var(--ck-color-link-fake-selection-a-dark);
}

/* CK variables dependent on other ck variables above */
.ck {
    
    /* Originally-hardcoded variables */
    --ck-color-button-on-disabled-background: var(--ck-color-base-background);
    --ck-color-switch-button-off-hover-background: var(--ck-color-base-text);
    --ck-color-split-button-hover-border: var(--ck-color-base-text);
    
    /* CK variables originally equal to other ck variables */
    --ck-color-button-action-text: var(--ck-color-base-background);
    --ck-color-switch-button-inner-background: var(--ck-color-base-background);
    --ck-color-dropdown-panel-background: var(--ck-color-base-background);
    --ck-color-input-background: var(--ck-color-base-background);
    --ck-color-list-background: var(--ck-color-base-background);
    --ck-color-list-button-on-text: var(--ck-color-base-background);
    --ck-color-panel-background: var(--ck-color-base-background);
    --ck-color-toolbar-background: var(--ck-color-base-background);
    --ck-color-labeled-field-label-background: var(--ck-color-base-background);
    --ck-color-tooltip-text: var(--ck-color-base-background);
    --ck-color-widget-type-around-button-icon: var(--ck-color-base-background);
    --ck-color-widget-editable-focus-background: var(--ck-color-base-background);
    --ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background);
    --ck-color-widget-blurred-border: var(--ck-color-base-border);
    --ck-color-widget-type-around-button-blurred-editable: var(--ck-color-widget-blurred-border);
    --ck-color-dropdown-panel-border: var(--ck-color-base-border);
    --ck-color-input-border: var(--ck-color-base-border);
    --ck-color-input-disabled-border: var(--ck-color-base-border);
    --ck-color-panel-border: var(--ck-color-base-border);
    --ck-color-toolbar-border: var(--ck-color-base-border);
    --ck-color-text: var(--ck-color-base-text);
    --ck-color-input-text: var(--ck-color-base-text);
    --ck-color-tooltip-background: var(--ck-color-base-text);
    --ck-color-media-embed-placeholder-url-text-hover: var(--ck-color-base-text);
    --ck-color-block-toolbar-button: var(--ck-color-text);
    --ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background);
    
    /* Calculation of RGBA-based colors */
    --ck-color-table-focused-cell-background: rgba(var(--ck-color-table-focused-cell-background-rgb), var(--ck-color-table-focused-cell-background-a));
    --ck-table-selected-cell-background: rgba(var(--ck-table-selected-cell-background-rgb), var(--ck-table-selected-cell-background-a));
    --ck-color-link-selected-background: rgba(var(--ck-color-link-selected-background-rgb), var(--ck-color-link-selected-background-a));
    --ck-color-link-fake-selection: rgba(var(--ck-color-link-fake-selection-rgb), var(--ck-color-link-fake-selection-a));
}

/* Classes requiring direct styling */
.ck-toolbar {
    border-color: var(--ck-color-base-background) !important;
    border-bottom-width: 1px !important;
    border-bottom-color: var(--ck-color-base-border) !important;
}

.ck-editor__editable {
    border-color: var(--ck-color-base-background) !important;
}

.ck-content .table table th:not(:focus) {
    background-color: var(--ck-color-table-header) !important;
}

.ck-content .table table td:not(:focus) {
    background-color: var(--ck-color-table-cell) !important;
}

    .ck-content .table table:not(:focus),
    .ck-content .table table th:not(:focus),
    .ck-content .table table td:not(:focus) {
        border-color: var(--ck-color-table-border) !important;
    }

.ck.ck-editor__editable .table table .ck-editor__editable_selected:focus {
    background-color: var(--ck-color-table-focused-cell-background) !important;
}

.ck-editor__editable:active,
.ck-editor__editable:focus {
    border-color: var(--ck-color-editor-editable-border-active-focus) !important;
}