/*! ckeditor.scss | Vuero | Css ninja 2020-2024 */

.ck-editor {
  /* Overrides the border radius setting in the theme. */
  --ck-border-radius: var(--radius-large);

  /* Overrides the default font size in the theme. */
  --ck-font-size-base: 14px;

  /* Helper variables to avoid duplication in the colors. */
  --ck-custom-background: hsl(270deg 1% 29%);
  --ck-custom-foreground: hsl(255deg 3% 18%);
  --ck-custom-border: hsl(300deg 1% 22%);
  --ck-custom-white: hsl(0deg 0% 100%);
  --ck-color-base-active: var(--primary);
  --ck-color-base-active-focus: color-mix(in oklab, var(--primary), black 10%);
  --ck-color-base-focus: color-mix(in oklab, var(--primary), black 10%);
  --ck-color-button-on-color: var(--primary);
  --ck-color-focus-border: var(--primary);
  --ck-focus-ring: 1px solid var(--ck-color-focus-border);

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

  --ck-color-base-foreground: var(--ck-custom-background);
  --ck-color-text: hsl(0deg 0% 98%);
  --ck-color-shadow-drop: hsl(0deg 0% 0% / 20%);
  --ck-color-shadow-inner: hsl(0deg 0% 0% / 10%);

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

  --ck-color-button-default-background: var(--ck-custom-background);
  --ck-color-button-default-hover-background: hsl(270deg 1% 22%);
  --ck-color-button-default-active-background: hsl(270deg 2% 20%);
  --ck-color-button-default-active-shadow: hsl(270deg 2% 23%);
  --ck-color-button-default-disabled-background: var(--ck-custom-background);
  --ck-color-button-on-background: var(--ck-custom-foreground);
  --ck-color-button-on-hover-background: hsl(255deg 4% 16%);
  --ck-color-button-on-active-background: hsl(255deg 4% 14%);
  --ck-color-button-on-active-shadow: hsl(240deg 3% 19%);
  --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
  --ck-color-button-action-background: hsl(168deg 76% 42%);
  --ck-color-button-action-hover-background: hsl(168deg 76% 38%);
  --ck-color-button-action-active-background: hsl(168deg 76% 36%);
  --ck-color-button-action-active-shadow: hsl(168deg 75% 34%);
  --ck-color-button-action-disabled-background: hsl(168deg 76% 42%);
  --ck-color-button-action-text: var(--ck-custom-white);
  --ck-color-button-save: hsl(120deg 100% 46%);
  --ck-color-button-cancel: hsl(15deg 100% 56%);

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

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

  /* -- 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(--ck-custom-background);
  --ck-color-input-border: hsl(257deg 3% 43%);
  --ck-color-input-text: hsl(0deg 0% 98%);
  --ck-color-input-disabled-background: hsl(255deg 4% 21%);
  --ck-color-input-disabled-border: hsl(250deg 3% 38%);
  --ck-color-input-disabled-text: hsl(0deg 0% 78%);

  /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */

  --ck-color-labeled-field-label-background: var(--ck-custom-background);

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

  --ck-color-list-background: var(--ck-custom-background);
  --ck-color-list-button-hover-background: var(--ck-color-base-foreground);
  --ck-color-list-button-on-background: var(--ck-color-base-active);
  --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
  --ck-color-list-button-on-text: var(--ck-color-base-background);

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

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

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

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

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

  --ck-color-tooltip-background: hsl(252deg 7% 14%);
  --ck-color-tooltip-text: hsl(0deg 0% 93%);

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

  --ck-color-image-caption-background: hsl(0deg 0% 97%);
  --ck-color-image-caption-text: hsl(0deg 0% 20%);

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

  --ck-color-widget-blurred-border: hsl(0deg 0% 87%);
  --ck-color-widget-hover-border: hsl(43deg 100% 68%);
  --ck-color-widget-editable-focus-background: var(--ck-custom-white);

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

  --ck-color-link-default: hsl(190deg 100% 75%);
}

.ck-editor {
  font-family: var(--font);

  .ck-labeled-field-view__input-wrapper {
    box-shadow: none !important;

    .ck-input {
      box-shadow: none !important;
    }
  }

  .ck-insert-table-dropdown-grid-box {
    &.ck-on {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
    }
  }

  .ck-editor__main {
    .ck-content {
      padding: 0 2rem;
    }
  }
}

.is-dark {
  .ck-editor {
    .ck-editor__main {
      .ck-editor__editable {
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
      }

      .ck-content {
        background: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
      }
    }

    figcaption {
      &.ck-editor__nested-editable {
        background: var(--dark-sidebar);
        color: var(--light-text);
      }
    }
  }
}
