/* Reset size for CodeMirror. */
.CodeMirror {
  font-size: initial !important;
}

/**
 * Theme the buttons
 *
 * This duplicates the styles from the GCDS button component so they can be
 * available in CKE.
 */

/* Set style for all gcds-buttons as they appear in CKE. */
.ck [class^="gcds-button-"] {
  display: block;
  width: var(--gcds-button-width);
  padding: var(--gcds-button-padding);
  transition: all 0.15s ease-in-out;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  border: var(--gcds-button-border-width) solid transparent;
  border-radius: var(--gcds-button-border-radius);
  font: var(--gcds-button-font);
}

/* Set color on start buttons as they appear in CKE. */
.ck [class*="role--start"] {
  color: var(--gcds-button-start-default-text);
  background-color: var(--gcds-button-start-default-background);
}
.ck [class*="role--start"]:hover {
  color: var(--gcds-button-start-default-text);
  background-color: var(--gcds-button-start-hover-background);
}

/* Set color on danger buttons as they appear in CKE. */
.ck [class*="role--danger"] {
  color: var(--gcds-button-danger-default-text);
  background-color: var(--gcds-button-danger-default-background);
}

.ck [class*="role--danger"]:hover {
  color: var(--gcds-button-danger-default-text);
  background-color: var(--gcds-button-danger-hover-background);
}

/* Set color on primary buttons as they appear in CKE. */
.ck [class*="role--primary"] {
  color: var(--gcds-button-primary-default-text);
  background-color: var(--gcds-button-primary-default-background);
}

.ck [class*="role--primary"]:hover {
  color: var(--gcds-button-primary-default-text);
  background-color: var(--gcds-button-primary-hover-background);
}
/* Set color on secondary buttons as they appear in CKE. */
.ck [class*="role--secondary"] {
  color: var(--gcds-button-secondary-default-text);
  border: var(--gcds-button-border-width) solid currentColor;
  background-color: var(--gcds-button-secondary-default-background);
}

.ck [class*="role--secondary"]:hover {
  color: var(--gcds-button-secondary-default-text);
  background-color: var(--gcds-button-secondary-hover-background);
}

/**
 * Details
 *
 * This is similar to the details component on gcds. It behaves differently because these styles apply to a <details> element, not a custom component.
 */
.ck details summary {
  position: relative;
  display: inline-block;
  padding: var(--gcds-details-summary-padding);
  cursor: pointer;
  color: var(--gcds-details-default-text);
  border-color: transparent;
  background-color: transparent;
  font: var(--gcds-details-font);
  text-decoration-style: solid;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: var(--gcds-details-default-decoration-thickness);
  text-underline-offset: 0.2em;
}

.ck details summary::before {
  position: absolute;
  top: var(--gcds-details-summary-arrow-top);
  left: var(--gcds-details-summary-arrow-left);
  width: 0;
  height: 0;
  content: "";
  border-block-start: var(--gcds-details-summary-arrow-border-top-bottom) solid transparent;
  border-block-end: var(--gcds-details-summary-arrow-border-top-bottom) solid transparent;
  border-inline-start: var(--gcds-details-summary-arrow-border-left) solid currentColor;
}

.ck details[open] summary::before {
  transform: rotate(90deg);
}

.ck details[open] summary {
  text-decoration: none;
  color: var(--gcds-details-focus-text);
  border-radius: var(--gcds-details-focus-border-radius);
  outline: var(--gcds-details-focus-outline);
  outline-offset: var(--gcds-details-focus-outline-offset);
  background-color: var(--gcds-details-focus-background);
  box-shadow: var(--gcds-details-focus-box-shadow);
}

.ck details > :not(summary) {
  margin: var(--gcds-details-panel-margin);
  padding: var(--gcds-details-panel-padding);
  border-inline-start: var(--gcds-details-panel-border-width) solid var(--gcds-details-panel-border-color);
}

/* Transitional: Removes extra caret icon on <details> when WxT conflicts with GCDS. */
.ck .ck-content summary,
.ck .ck-content details[open] > summary {
  list-style-type: none;
}

/* Transitional: Makes text visible on <details> focus when WxT conflicts with GCDS. */
.ck .ck-content summary:focus {
  color: var(--gcds-details-focus-text);
  background-color: var(--gcds-details-focus-background);
}
.ck details ol,
.ck details ul {
  padding-left: 3em;
}
