/* editable_code_block.css
   Styles solely for making code blocks editable
*/

/* ───────── overall container spacing ───────── */
.code-container {
  margin-bottom: 20px;
  position: relative;
  overflow: visible !important;
  /* ensure tooltips aren’t clipped */
}

/* ───────── toolbar of block-level inputs ───────── */
.variable-inputs {
  display: flex;
  flex-wrap: nowrap;
  /* keep all controls in one row */
  gap: 10px;
  margin-bottom: 8px;
  box-sizing: border-box;
  max-width: 100%;
  overflow: visible !important;
  /* allow tooltips to overflow */
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

/* scrollbar styling for the toolbar */
.variable-inputs::-webkit-scrollbar {
  height: 6px;
}

.variable-inputs::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* each label wrapper has no extra styling */
.variable-inputs label {
  padding: 0;
  border: none;
}

/* ───────── each editable input box ───────── */
.variable-input {
  flex: 0 1 auto;
  /* allow shrink & grow based on inline JS width */
  box-sizing: content-box;
  /* width applies only to the text area */
  max-width: 150px;
  /* cap width to 150px when JS width grows larger */
  overflow-x: auto;
  /* allow text overflow scroll */
  padding: 3px 4px;
  /* roomier top/bottom padding */
  font-family: monospace, monospace;
  font-weight: normal;
  border: none;
  background: transparent;
  cursor: text;
  border-radius: 4px;
  color: var(--dark-background);
}

.variable-input::placeholder {
  color: var(--dark-background);
  font-family: monospace, monospace;
  font-weight: normal;
}

/* background colours for original/block/snippet */
.variable-input.var-level-original {
  background: #CAEDFC;
}

/* Deep Blue 100 */
.variable-input.var-level-block {
  background: #FFF9D7;
}

/* Starburst Yellow 100 */
.variable-input.var-level-snippet {
  background: #FFD6B3;
}

/* Mercurial Orange 200 */

/* accent border on focus */
.variable-input:focus {
  outline: none;
  border-color: var(--dark-background);
}

/* ───────── the editable code snippet area ───────── */
.code-container pre,
.code-container pre.highlight {
  background: #f4f4f4;
  padding: 15px;
  border-radius: 8px;
  overflow: visible !important;
  /* allow tooltips to overflow */
  position: relative;
  font-family: monospace, monospace;
  line-height: 1.5;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px,
    rgba(0, 0, 0, 0.24) 0px 1px 2px !important;
  /* visual parity with standard code blocks */
}

/* ───────── inline variable highlighting ───────── */
.variable {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: monospace, monospace;
  font-weight: normal;
  cursor: text;
  min-width: 6ch;
  color: var(--dark-background);
}

.var-level-original {
  background: #CAEDFC;
}

.var-level-block {
  background: #FFF9D7;
}

.var-level-snippet {
  background: #FFD6B3;
}

.override-variable {
  background: #FFD6B3;
}

/* ───────── override default Highlight.js styling ───────── */
.code-container pre.highlight,
.code-container pre.highlight .hljs {
  background: #f4f4f4 !important;
  box-shadow: none !important;
}

.code-container pre.highlight>code {
  display: block !important;
  white-space: pre !important;
}

.code-container pre.highlight code span:last-child:empty {
  display: none;
}

.code-container pre.highlight {
  padding-bottom: 0 !important;
}

/* ───────── copy-icon behavior ───────── */
.article pre .code-copy-btn,
.code-container pre .code-copy-btn {
  opacity: 1 !important;
  background-color: transparent !important;
  color: var(--dark-background);
  transition: background-color 150ms ease, color 150ms ease;
}

.article pre:hover .code-copy-btn,
.code-container pre:hover .code-copy-btn {
  background-color: var(--color-pearl-60) !important;
}

.article pre .code-copy-btn:hover,
.code-container pre .code-copy-btn:hover,
.article pre .code-copy-btn:focus,
.code-container pre .code-copy-btn:focus {
  background-color: var(--dark-background) !important;
  color: #fff !important;
}

.code-container .variable-inputs .code-copy-btn {
  display: none !important;
}

/* ───────── tooltip styling ───────── */
.ecb-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 12px;
  /* comfortable padding around text */
  border-radius: 4px;
  white-space: pre-line;
  line-height: 1.4;
  /* easier to read multi-line text */
  font-size: 12px;
  max-width: 350px;
  z-index: 9999 !important;
  /* ensure tooltips appear on top */
}

/* allow tooltip to extend beyond code block bounds */
.code-container pre.highlight {
  overflow: visible !important;
}

.code-container pre.highlight>code {
  overflow-x: auto;
}