/* Make ckeditor widget responsive */
@media (max-width: 48rem) {
  .ck-editor-container {
    max-width: calc(100dvw - var(--spacing) * 14);
  }
}

@media (min-width: 40rem) and (max-width: 48rem) {
  .ck-editor-container {
    max-width: calc(40rem - var(--spacing) * 6);
  }
}

@media (min-width: 48rem) and (max-width: 64rem) {
  .ck-editor-container {
    max-width: calc(48rem - var(--spacing) * 6);
  }
}

@media (min-width: 64rem) and (max-width: 80rem) {
  .ck-editor-container {
    max-width: calc(64rem - var(--spacing) * 6);
  }
}

@media (min-width: 80rem) {
  .ck-editor-container {
    max-width: calc(100dvw - var(--spacing) * 14 - 288px);
  }
}

/*
Dark theme
https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/ui/theme-customization.html
*/
:root.dark {
  /* Helper variables based on the project palette */
  --ck-custom-foreground: var(--color-base-900); /* panels / surfaces */
  --ck-custom-border: var(--color-base-800); /* borders */
  --ck-custom-white: var(--color-base-50); /* light text / accents */

  /* -- Overrides generic colors. ------------------------------------------------------------- */

  /* Content text */
  --ck-content-font-color: var(--color-base-100); /* font.default-dark */

  /* Base surfaces */
  --ck-color-base-background: var(--color-base-900); /* editor background */
  --ck-color-base-foreground: var(--ck-custom-foreground);
  --ck-color-base-border: var(--ck-custom-border);

  /* Focus and typography */
  --ck-color-focus-border: var(--color-primary-600); /* Areal Gold */
  --ck-color-text: var(--color-base-100);
  --ck-color-shadow-drop: rgba(0, 0, 0, 0.35);
  --ck-color-shadow-inner: rgba(0, 0, 0, 0.18);

  /* -- Overrides the default .ck-button class colors. ---------------------------------------- */

  --ck-color-button-default-hover-background: var(--color-base-900);
  --ck-color-button-default-active-background: var(--color-base-800);
  --ck-color-button-default-active-shadow: var(--color-base-800);

  /* "On" buttons (pressed / active) */
  --ck-color-button-on-background: var(--color-base-900);
  --ck-color-button-on-hover-background: var(--color-base-800);
  --ck-color-button-on-active-background: var(--color-base-800);
  --ck-color-button-on-active-shadow: var(--color-base-700);
  --ck-color-button-on-disabled-background: var(--color-base-900);

  /* Action button uses the primary color */
  --ck-color-button-action-background: var(--color-primary-600);
  --ck-color-button-action-hover-background: var(--color-primary-700);
  --ck-color-button-action-active-background: var(--color-primary-800);
  --ck-color-button-action-active-shadow: var(--color-primary-800);
  --ck-color-button-action-disabled-background: var(--color-primary-600);
  --ck-color-button-action-text: var(--color-base-900);

  /* Save/Cancel use brand/danger-like colors without external palette colors. */
  --ck-color-button-save: var(--color-primary-600);
  --ck-color-button-cancel: var(--color-base-300);

  /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */

  --ck-color-dropdown-panel-background: var(--color-base-900);
  --ck-color-dropdown-panel-border: var(--ck-custom-border);

  /* -- Overrides the default .ck-dialog class colors. ---------------------------------------- */

  --ck-color-dialog-background: var(--color-base-900);
  --ck-color-dialog-form-header-border: var(--ck-custom-border);

  /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */

  --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
  --ck-color-split-button-hover-border: var(--ck-custom-foreground);

  /* -- Overrides the default .ck-input class colors. ----------------------------------------- */

  --ck-color-input-background: var(--color-base-900);
  --ck-color-input-border: var(--color-base-700);
  --ck-color-input-text: var(--color-base-100);
  --ck-color-input-disabled-background: var(--color-base-900);
  --ck-color-input-disabled-border: var(--color-base-800);
  --ck-color-input-disabled-text: var(--color-base-400);

  /* -- Overrides the default .ck-list class colors. ------------------------------------------ */

  --ck-color-list-background: var(--color-base-900);
  --ck-color-list-button-hover-background: var(--color-base-900);
  --ck-color-list-button-on-background: var(--color-primary-600);
  --ck-color-list-button-on-text: var(--color-base-900);

  /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */

  --ck-color-panel-background: var(--color-base-900);
  --ck-color-panel-border: var(--ck-custom-border);

  /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */

  --ck-color-toolbar-background: var(--color-base-900);
  --ck-color-toolbar-border: var(--ck-custom-border);

  /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */

  --ck-color-tooltip-background: var(--color-base-900);
  --ck-color-tooltip-text: var(--color-base-100);

  /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */

  /* Image captions should also be dark in the dark theme. */
  --ck-content-color-image-caption-background: var(--color-base-900);
  --ck-content-color-image-caption-text: var(--color-base-100);

  /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */

  --ck-color-widget-blurred-border: var(--color-base-700);
  --ck-color-widget-hover-border: var(--color-primary-500);
  --ck-color-widget-editable-focus-background: var(--color-base-900);

  /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */

  --ck-color-link-default: var(--color-primary-400);
}

/* Links inside editor content */
.dark .ck.ck-editor__editable a,
.dark .ck.ck-content a {
  color: var(--color-primary-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Code blocks */
.dark .ck-content pre {
  color: var(--color-base-100);
  background: var(--color-base-900);
  border-color: var(--color-base-800);
}