/**
 * CKEditor 4 Dark Theme
 * Applied when body.able-pro-dark class is present
 */

/* Dark theme variables */
body.able-pro-dark {
  --cke-dark-bg: #0f192f;
  --cke-dark-bg-light: #0f192f;
  --cke-dark-bg-lighter: #0a1120;
  --cke-dark-border: black;
  --cke-dark-text: #adb7be;
  --cke-dark-text-muted: #858585;
  --cke-dark-hover: #37373d;
  --cke-dark-active: #094771;
}

/* Main editor container */
body.able-pro-dark .cke_chrome {
  border-color: var(--cke-dark-border);
  background: var(--cke-dark-bg);
}

body.able-pro-dark .cke_inner {
  background: var(--cke-dark-bg);
}

/* Toolbar */
body.able-pro-dark .cke_top {
  background: var(--cke-dark-bg-light);
  border-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_bottom {
  background: var(--cke-dark-bg-light);
  border-color: var(--cke-dark-border);
}

/* Toolbar buttons */
body.able-pro-dark a.cke_button_on {
  background: var(--cke-dark-hover);
  border-color: var(--cke-dark-border);
}

body.able-pro-dark a.cke_button_off:hover,
body.able-pro-dark a.cke_button_off:focus,
body.able-pro-dark a.cke_button_off:active {
  background: var(--cke-dark-hover);
  border-color: var(--cke-dark-border);
}

body.able-pro-dark a.cke_button_on,
body.able-pro-dark a.cke_button_off:active {
  background: var(--cke-dark-active);
}

/* Toolbar separators */
body.able-pro-dark .cke_toolbar_separator {
  background-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_toolgroup a.cke_button:last-child:after,
body.able-pro-dark .cke_toolgroup a.cke_button.cke_button_disabled:hover:last-child:after {
  border-right-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_rtl .cke_toolgroup a.cke_button:last-child:after,
body.able-pro-dark .cke_rtl .cke_toolgroup a.cke_button.cke_button_disabled:hover:last-child:after {
  border-left-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_combo:after {
  border-right-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_rtl .cke_combo:after {
  border-left-color: var(--cke-dark-border);
}

/* Button labels and text */
body.able-pro-dark .cke_button_label {
  color: var(--cke-dark-text);
}

body.able-pro-dark .cke_button_arrow {
  border-top-color: var(--cke-dark-text);
}

/* Combo boxes (Font, Size, etc.) */
body.able-pro-dark .cke_combo_text {
  color: var(--cke-dark-text);
}

body.able-pro-dark .cke_combo_arrow {
  border-top-color: var(--cke-dark-text);
}

body.able-pro-dark .cke_combo_on a.cke_combo_button,
body.able-pro-dark .cke_combo_off a.cke_combo_button:hover,
body.able-pro-dark .cke_combo_off a.cke_combo_button:focus,
body.able-pro-dark .cke_combo_off a.cke_combo_button:active {
  background: var(--cke-dark-hover);
  border-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_combo_on a.cke_combo_button,
body.able-pro-dark .cke_combo_off a.cke_combo_button:active {
  background: var(--cke-dark-active);
}

/* Toolbox collapser */
body.able-pro-dark a.cke_toolbox_collapser {
  border-color: var(--cke-dark-border);
  background: var(--cke-dark-bg-light);
}

body.able-pro-dark a.cke_toolbox_collapser:hover {
  background: var(--cke-dark-hover);
}

body.able-pro-dark .cke_toolbox_collapser .cke_arrow {
  border-bottom-color: var(--cke-dark-text);
}

body.able-pro-dark .cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow {
  border-top-color: var(--cke-dark-text);
}

/* Panels and dropdowns */
body.able-pro-dark .cke_panel {
  background-color: var(--cke-dark-bg-light);
  border-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_panel_grouptitle {
  background: var(--cke-dark-bg);
  border-color: var(--cke-dark-border);
  color: var(--cke-dark-text);
}

body.able-pro-dark .cke_panel_listItem a {
  color: var(--cke-dark-text) !important;
}

body.able-pro-dark .cke_panel_listItem.cke_selected a,
body.able-pro-dark .cke_panel_listItem a:hover,
body.able-pro-dark .cke_panel_listItem a:focus,
body.able-pro-dark .cke_panel_listItem a:active {
  background-color: var(--cke-dark-hover);
}

/* Menu items */
body.able-pro-dark .cke_menubutton:hover,
body.able-pro-dark .cke_menubutton:focus,
body.able-pro-dark .cke_menubutton:active {
  background-color: var(--cke-dark-hover);
}

body.able-pro-dark .cke_menubutton_icon {
  background-color: var(--cke-dark-bg);
}

body.able-pro-dark .cke_menubutton:hover .cke_menubutton_icon,
body.able-pro-dark .cke_menubutton:focus .cke_menubutton_icon,
body.able-pro-dark .cke_menubutton:active .cke_menubutton_icon {
  background-color: var(--cke-dark-hover);
}

body.able-pro-dark .cke_menuitem .cke_menubutton_on {
  background-color: var(--cke-dark-hover);
  border-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_menubutton_on .cke_menubutton_icon {
  background-color: var(--cke-dark-hover);
}

body.able-pro-dark .cke_menuseparator {
  background-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_menubutton_shortcut {
  color: var(--cke-dark-text-muted);
}

/* Color blocks */
body.able-pro-dark .cke_colorblock,
body.able-pro-dark .cke_colorblock a {
  color: var(--cke-dark-text);
}

body.able-pro-dark a.cke_colorauto,
body.able-pro-dark a.cke_colormore {
  border-color: var(--cke-dark-border);
}

body.able-pro-dark a:hover.cke_colorauto,
body.able-pro-dark a:hover.cke_colormore,
body.able-pro-dark a:focus.cke_colorauto,
body.able-pro-dark a:focus.cke_colormore,
body.able-pro-dark a:active.cke_colorauto,
body.able-pro-dark a:active.cke_colormore {
  background-color: var(--cke-dark-hover);
  border-color: var(--cke-dark-border);
}

/* Editor content area */
body.able-pro-dark .cke_wysiwyg_frame,
body.able-pro-dark .cke_wysiwyg_div {
  background-color: var(--cke-dark-bg-lighter);
}

/* Source mode textarea */
body.able-pro-dark textarea.cke_source {
  background-color: var(--cke-dark-bg-lighter);
  color: var(--cke-dark-text);
}

/* Path bar at bottom */
body.able-pro-dark .cke_path {
  color: var(--cke-dark-text);
}

body.able-pro-dark a.cke_path_item,
body.able-pro-dark span.cke_path_empty {
  color: var(--cke-dark-text);
}

body.able-pro-dark a.cke_path_item:hover,
body.able-pro-dark a.cke_path_item:focus,
body.able-pro-dark a.cke_path_item:active {
  background-color: var(--cke-dark-hover);
}

/* Resizer */
body.able-pro-dark .cke_resizer {
  border-color: transparent var(--cke-dark-border) transparent transparent;
}

body.able-pro-dark .cke_resizer_rtl {
  border-color: transparent transparent transparent var(--cke-dark-border);
}

/* Notifications */
body.able-pro-dark .cke_notification {
  background: var(--cke-dark-bg-light);
  color: var(--cke-dark-text);
}

/* Dialog boxes (if opened) */
body.able-pro-dark .cke_dialog {
  background-color: var(--cke-dark-bg-light);
}

body.able-pro-dark .cke_dialog_title {
  background: var(--cke-dark-bg);
  color: var(--cke-dark-text);
  border-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_dialog_contents {
  background-color: var(--cke-dark-bg-light);
  border-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_dialog_body {
  background: var(--cke-dark-bg-light);
  border-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_dialog_tab {
  background: var(--cke-dark-bg);
  color: var(--cke-dark-text);
  border-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_dialog_tab:hover {
  background: var(--cke-dark-hover);
}

body.able-pro-dark .cke_dialog_tab_selected {
  background: var(--cke-dark-bg-lighter);
}

body.able-pro-dark .cke_dialog_footer {
  background-color: var(--cke-dark-bg);
  border-color: var(--cke-dark-border);
}

/* Form elements in dialogs */
body.able-pro-dark .cke_dialog input[type="text"],
body.able-pro-dark .cke_dialog input[type="password"],
body.able-pro-dark .cke_dialog textarea,
body.able-pro-dark .cke_dialog select {
  background-color: var(--cke-dark-bg-lighter);
  color: var(--cke-dark-text);
  border-color: var(--cke-dark-border);
}

body.able-pro-dark .cke_dialog label {
  color: var(--cke-dark-text);
}

/* Make icons visible in dark mode (they use sprites, so we need to adjust contrast) */
body.able-pro-dark .cke_button_icon {
  opacity: 0.9;
  filter: brightness(1.2) contrast(0.9);
}

body.able-pro-dark .cke_button_on .cke_button_icon,
body.able-pro-dark a.cke_button_off:hover .cke_button_icon {
  opacity: 1;
  filter: brightness(1.4) contrast(1);
}