/**
 * @file
 * CKEditor appearance overrides.
 */

@import "../base/variables.pcss.css";

.cke .cke_top,
.cke .cke_bottom,
.cke .cke_contents,
.cke.cke_chrome {
  transition: border-color var(--speed-transition) ease-in-out 0s;
}

.cke.cke_chrome {
  border-radius: 0.125em; /* (2 / 16) */
}

.cke .cke_inner {
  border-radius: 0.0625em; /* (1 / 16) */
}

.cke_path_empty:only-child::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background: var(--input-bg-color);
}

.cke .cke_top {
  border: 0.0833em solid transparent; /* Moono lisa skin uses font-size 12px */
  border-bottom: 0;
  border-radius: 0.0833em 0.0833em 0 0;
}

.cke .cke_contents {
  border: 0.0625em solid transparent;
  border-top: 0;
  border-bottom: 0;
}

.cke .cke_bottom {
  border: 0.0833em solid transparent; /* Moono lisa skin uses font-size 12px */
  border-top: 0;
  border-radius: 0 0 0.0833em 0.0833em;
}

/* Default */
.cke.cke_chrome {
  border-color: var(--input-border-color);
}

/* Error. */
.error + .cke.cke_chrome,
.error + .cke .cke_contents,
.error + .cke .cke_top,
.error + .cke .cke_bottom {
  border-color: var(--input--error-border-color);
}

/* Hover. */
.cke.cke_chrome:hover,
.cke:hover .cke_contents,
.cke:hover .cke_top,
.cke:hover .cke_bottom,
.error + .cke.cke_chrome:hover,
.error + .cke:hover .cke_contents,
.error + .cke:hover .cke_top,
.error + .cke:hover .cke_bottom {
  border-color: var(--input--hover-border-color);
}

/* Focus. */
.cke.cke_chrome.cke_focus,
.cke.cke_focus .cke_contents,
.cke.cke_focus .cke_top,
.cke.cke_focus .cke_bottom,
.error + .cke.cke_chrome.cke_focus,
.error + .cke.cke_focus .cke_contents,
.error + .cke.cke_focus .cke_top,
.error + .cke.cke_focus .cke_bottom {
  border-color: var(--input--focus-border-color);
}

/* Disabled. */
[disabled] + .cke.cke_chrome {
  border-color: var(--input--disabled-border-color);
}
[disabled] + .cke .cke_contents,
[disabled] + .cke .cke_top,
[disabled] + .cke .cke_bottom {
  border-color: transparent;
}
[disabled] + .cke .cke_contents {
  border-color: var(--input--disabled-bg-color);
  background: hsl(240, 4%, 90%); /* Calculated from disabled input bg and iframe opacity. */
}
[disabled] + .cke iframe,
[disabled] + .cke .cke_source {
  opacity: 0.505;
}
[disabled] + .cke .cke_bottom {
  background: var(--input--disabled-bg-color);
}
[disabled] + .cke .cke_bottom > * {
  /* Don't show element path dor disabled editor. */
  opacity: 0;
}
[disabled] + .cke .cke_path_empty::after {
  content: none;
}