//@import "~@ckeditor/ckeditor5-build-classic/";

body {
  --ck-z-default: 100 !important;
}

:root {
  /* Overrides the border radius setting in the theme. */
  --ck-border-radius: 4px !important;

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

  /* Helper variables to avoid duplication in the colors. */
  --ck-custom-background: #{$adminGreen} !important;
  --ck-custom-foreground: #fff !important;
  --ck-custom-border: #{darken($adminGreen, 10%)} !important;
  --ck-custom-white: hsl(0, 0%, 100%) !important;

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

  --ck-color-base-foreground: var(--ck-custom-background) !important;
  --ck-color-focus-border: #{darken($adminGreen, 10%)} !important;
  --ck-color-text: #fff !important;
  --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2) !important;
  --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1) !important;

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

  --ck-color-button-default-background: var(--ck-custom-background) !important;
  --ck-color-button-default-hover-background: #{darken($adminGreen, 10%)} !important;
  --ck-color-button-default-active-background: #{darken($adminGreen, 10%)} !important;
  --ck-color-button-default-active-shadow: #{darken($adminGreen, 10%)} !important;
  --ck-color-button-default-disabled-background: var(--ck-custom-background) !important;

  --ck-color-button-on-background: #{darken($adminGreen, 10%)} !important;
  --ck-color-button-on-hover-background: #{darken($adminGreen, 10%)} !important;
  --ck-color-button-on-active-background: #{darken($adminGreen, 10%)} !important;
  --ck-color-button-on-active-shadow: #{darken($adminGreen, 10%)} !important;
  --ck-color-button-on-disabled-background: var(--ck-custom-foreground) !important;

  --ck-color-button-action-background: var(--ck-custom-background) !important;
  --ck-color-button-action-hover-background: #{darken($adminGreen, 10%)} !important;
  --ck-color-button-action-active-background: #{darken($adminGreen, 10%)} !important;
  --ck-color-button-action-active-shadow: #{darken($adminGreen, 10%)} !important;
  --ck-color-button-action-disabled-background: #{darken($adminGreen, 10%)} !important;
  --ck-color-button-action-text: var(--ck-custom-foreground) !important;

  --ck-color-button-save: hsl(120, 100%, 46%) !important;
  --ck-color-button-cancel: hsl(15, 100%, 56%) !important;

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

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

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

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

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

  --ck-color-input-background: var(--ck-custom-foreground) !important;
  --ck-color-input-border: hsl(257, 3%, 43%) !important;
  --ck-color-input-text: hsl(0, 0%, 98%) !important;
  --ck-color-input-disabled-background: hsl(255, 4%, 21%) !important;
  --ck-color-input-disabled-border: hsl(250, 3%, 38%) !important;
  --ck-color-input-disabled-text: hsl(0, 0%, 46%) !important;

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

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

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

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

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

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

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

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

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

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

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

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

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

  --ck-color-link-default: hsl(190, 100%, 75%) !important;


  // transarent
  --ck-color-focus-outer-shadow: var(--ck-custom-foreground) !important;
}

.ck-editor, .ck-body-wrapper {
  .ck.ck-button {
    cursor: pointer;
  }

  .ck.ck-editor__top {
    z-index: 100;
    top: -20px;
    position: sticky;
    .ck.ck-toolbar {
      //border: 1px solid var(--ck-color-toolbar-border);
      border: 0;
    }
  }

  .ck-sticky-panel__placeholder {
    height: 0 !important;
  }

  .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
    position: sticky !important;
    top: 80px !important;
  }


  .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
    box-shadow: none;
  }

  .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {

  }

  .ck-editor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
    border-color: var(--ck-custom-background);
  }

  .ck.ck-input-text {
    color: #{darken($adminGreen, 10%)} !important;
  }
}

.ck.ck-labeled-field-view>.ck.ck-labeled-field-view__input-wrapper>.ck.ck-label {
  display: none;
}

.ck.ck-editor__top.ck-reset_all{
  top: 0px;
}

.ck.ck-reset.ck-editor.ck-rounded-corners{
  max-height: 500px;
  overflow-y: scroll;
}

.ck.ck-word-count {
    display: flex;
    gap: 10px;
    justify-content: end;
    font-size: 12px;
}


#brick-builder-app .ck.ck-editor__top.ck-reset_all{
  top: -20px !important;
}

#brick-builder-app .ck.ck-reset.ck-editor.ck-rounded-corners{
  max-height: none !important;
  overflow-y: unset !important;
}
