.ck {
  --ck-spacing-small: var(--gin-spacing-xs);
  --ck-color-text: var(--gin-color-text);
  --ck-color-toolbar-background: var(--gin-bg-layer3);
  --ck-color-toolbar-border: var(--gin-border-color-form-element);
  --ck-color-base-foreground: var(--gin-bg-layer3);
  --ck-color-base-background: var(--gin-bg-input);
  --ck-color-base-border: var(--ck-color-toolbar-border);
  --ck-color-list-button-on-text: var(--gin-color-button-text);
  --ck-color-list-button-on-background: var(--gin-color-primary);
  --ck-color-list-button-on-background-focus: var(--gin-color-primary-hover);
  --ck-color-list-button-hover-background: var(--gin-color-primary-light-hover);
  --ck-color-panel-background: var(--gin-bg-layer3);
  --ck-color-panel-border: transparent;
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: var(--gin-color-primary-light);
  --ck-color-button-default-active-background: var(--gin-color-primary-light-active);
  --ck-color-button-default-disabled-background: transparent;
  --ck-color-button-on-color: var(--gin-color-primary);
  --ck-color-button-on-background: var(--gin-color-primary-light);
  --ck-color-button-on-hover-background: var(--gin-color-primary-light-hover);
  --ck-color-button-on-active-background: var(--gin-color-primary-active);
  --ck-color-split-button-hover-background: var(--gin-bg-layer2);
  --ck-color-split-button-hover-border: var(--gin-border-color-layer);
  --ck-color-button-save: var(--gin-color-green);
  --ck-color-button-cancel: var(--gin-color-danger);
  --ck-color-link-default: var(--gin-color-primary);
  --ck-color-link-selected-background: var(--gin-bg-item-hover);
  --ck-color-input-background: var(--gin-bg-input);
  --ck-color-input-border: var(--gin-border-color-form-element);
  --ck-color-labeled-field-label-background: var(--gin-bg-layer3);
  --ck-color-list-background: var(--gin-bg-layer3);
  --ck-focus-ring: 1px solid var(--gin-color-focus);
  --ck-focus-outer-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
  --ck-inner-shadow: var(--ck-focus-outer-shadow);
  --ck-drop-shadow: var(--gin-shadow-l2);
  --ck-color-focus-border: var(--gin-color-primary);
  --ck-color-widget-type-around-button-active: var(--gin-color-primary);
  --ck-color-widget-blurred-border: var(--gin-color-primary-hover);
  --ck-color-widget-hover-border: var(--gin-color-text);
  --ck-color-widget-type-around-button-hover: var(--gin-color-text);
  --ck-color-image-caption-text: var(--gin-color-text-light);
  --ck-color-image-caption-background: transparent;
  --ck-border-radius: var(--gin-border-m);
}

.ck .ck-content blockquote,
.ck .ck.ck-dropdown__panel {
  border: none;
}

.ck.ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky {
  top: var(--gin-sticky-offset);
}

.ck .ck-toolbar__separator {
  opacity: .3;
}

.ck .ck-button[aria-pressed=true] {
  color: var(--gin-color-primary-active);
  border: 2px solid var(--gin-color-primary);
}

[dir="ltr"] .ck .ck-button.ck-source-editing-button {
  padding-left: var(--gin-spacing-m);
}

[dir="rtl"] .ck .ck-button.ck-source-editing-button {
  padding-right: var(--gin-spacing-m);
}

.ck.ck-button:not(.ck-disabled):hover {
  color: var(--gin-color-primary-active);
}

.ck .ck-source-editing-area {
  overflow: inherit;
}

.ck textarea {
  color: var(--ck-color-text);
  background: var(--ck-color-base-background);
}

.ck textarea:focus {
  outline: none;
  box-shadow: var(--ck-focus-outer-shadow);
}

.ck .ck.ck-media-alternative-text-form .ck-button {
  border: none;
}

.ck .ck-content .drupal-media > figcaption {
  color: var(--ck-color-image-caption-text);
  background: var(--ck-color-image-caption-background);
}