code-input.css

/* Code-Input Compatibility */
/* By WebCoder49 */
/* First Published on CSS-Tricks.com */


code-input {
  /* Allow other elements to be inside */
  display: block;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
  top: 0;
  left: 0;

  color: black;
  background-color: white;

  /* Normal inline styles */
  margin: 8px;
  --padding: 16px;
  height: 250px;
  font-size: inherit;
  font-family: monospace;
  line-height: 1.5; /* Inherited to child elements */
  tab-size: 2;
  caret-color: darkgrey;
  white-space: pre;
  padding: 0!important; /* Use --padding to set the code-input element's padding */
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}


code-input:not(.code-input_loaded) {
  padding: var(--padding, 16px)!important;
}

code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 0px!important;
  padding: var(--padding, 16px)!important;
  border: 0;
  min-width: calc(100% - var(--padding, 16px) * 2);
  min-height: calc(100% - var(--padding, 16px) * 2);
  box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors; dialogs can be styled as wanted so are excluded. */
  overflow: hidden;
  resize: none;
  grid-row: 1;
  grid-column: 1;
  display: block;
}

code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
  height: max-content;
  width: max-content;
}

code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
  /* Remove all margin and padding from others */
  margin: 0px!important;
  padding: 0px!important;
}

code-input textarea, code-input pre, code-input pre * {
  /* Also add text styles to highlighing tokens */
  font-size: inherit!important;
  font-family: inherit!important;
  line-height: inherit!important;
  tab-size: inherit!important;
  text-align: inherit!important;
}

/* Make changing the text direction propogate */
code-input textarea[dir=auto] + pre {
  unicode-bidi: plaintext;
}

code-input textarea[dir=ltr] + pre {
  direction: ltr;
}

code-input textarea[dir=rtl] + pre {
  direction: rtl;
}


code-input textarea, code-input pre {
  /* In the same place */
  grid-column: 1;
  grid-row: 1;
}

/* Move the textarea in front of the result */

code-input textarea:not([code-input-fallback]) {
  z-index: 1;
}
code-input pre {
  z-index: 0;
}

/* Make textarea almost completely transparent, except for caret and placeholder */

code-input textarea:not([code-input-fallback]) {
  color: transparent;
  background: transparent;
  caret-color: inherit!important; /* Or choose your favourite color */
}
code-input textarea::placeholder {
  color: lightgrey;
}

/* Can be scrolled */
code-input textarea, code-input pre {
  white-space: inherit;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
}

/* No resize on textarea; transfer outline on focus to code-input element */
code-input textarea {
  resize: none;
  outline: none!important;
}
code-input:has(textarea:focus):not(.code-input_mouse-focused) {
  outline: 2px solid currentColor;
}

/* Before registering give a hint about how to register. */
code-input:not(.code-input_registered) {
  overflow: hidden;
  display: block;
  box-sizing: border-box; /* Include padding in width/height */
}

code-input:not(.code-input_registered)::after {
  /* Display message to register */
  content: "No-JavaScript fallback. For highlighting and plugins: as a user use a newer browser/enable JavaScript support; as a developer use codeInput.registerTemplate.";
  display: block;
  position: absolute;
  bottom: 0;
  left: var(--padding, 16px);
  width: calc(100% - 2 * var(--padding, 16px));
  overflow-x: auto;

  border-top: 1px solid currentColor;
  outline-top: 0;
  background-color: inherit;
  color: inherit;

  margin: 0;
  padding: 0;
  height: 2em;
}

code-input:not(.code-input_registered) textarea {
  /* Don't overlap with message */
  min-height: calc(100% - var(--padding, 16px) * 2 - 2em);
}

code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea:not([code-input-fallback]) {
  opacity: 0;
}

/* Contains dialog boxes that might appear as the result of a plugin.
Sticks to the top of the code-input element */

code-input .code-input_dialog-container {
  z-index: 2;
  
  position: sticky;
  grid-row: 1;
  grid-column: 1;
  
  top: 0;
  left: 0;

  margin: 0;
  padding: 0;
  height: 0;
  width: 100%;

  /* Dialog boxes' text is based on text-direction */
  text-align: inherit;
}
code-input.code-input_pre-element-styled .code-input_dialog-container {
  width: calc(100% + 2 * var(--padding, 16px) - 2px);
}

[dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {
  left: unset;
  right: 0;
}

/* Instructions specific to keyboard navigation set by plugins that override Tab functionality. */
code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions {
  top: 0;
  left: 0;

  display: block;
  position: absolute;
  background-color: black;
  color: white;
  padding: 2px;
  padding-left: 10px;
  margin: 0;
  text-wrap: balance;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 12px);
  max-height: 3em;
}
code-input:has(pre[dir=rtl]) .code-input_dialog-container .code-input_keyboard-navigation-instructions {
  left: unset;
  right: 0;
}

code-input:not(:has(textarea:not([code-input-fallback]):focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions,
code-input.code-input_mouse-focused .code-input_dialog-container .code-input_keyboard-navigation-instructions,
code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions:empty {
  /* When not keyboard-focused / no instructions don't show instructions */
  display: none;
}

/* Things with padding when instructions are present */
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused) textarea,
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
  padding-top: calc(var(--padding, 16px) + 3em)!important;
}
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused) textarea, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
  min-height: calc(100% - var(--padding, 16px) * 2 - 3em);
}

/* No JavaScript fallback - styles to override all previous */

code-input textarea[code-input-fallback] {
  overflow: auto;
  background-color: inherit;
  color: inherit;
  height: max-content;
}