/* Code-Input Compatibility */
/* By WebCoder49 */
/* First Published on CSS-Tricks.com */
.rows-2{height: 61px;}
.rows-3{height: 75px;}
.rows-4{height: 89px;}
.rows-5{height: 103px;}
.rows-6{height: 117px;}
.rows-7{height: 131px;}
.rows-8{height: 145px;}
.rows-9{height: 159px;}
.rows-10{height: 173px;}
.rows-11{height: 187px;}
.rows-12{height: 201px;}
.rows-13{height: 215px;}
.rows-14{height: 229px;}
.rows-15{height: 243px;}
.rows-16{height: 257px;}
.rows-17{height: 271px;}
.rows-18{height: 285px;}
.rows-19{height: 299px;}
.rows-20{height: 313px;}
.rows-21{height: 327px;}
.rows-22{height: 341px;}
.rows-23{height: 355px;}
.rows-24{height: 369px;}
.rows-25{height: 383px;}
.rows-26{height: 397px;}
.rows-27{height: 411px;}
.rows-28{height: 425px;}
.rows-29{height: 439px;}
code-input {
/* Allow other elems to be inside */
position: relative;
top: 0;
left: 0;
display: block;
/* Normal inline styles */
padding: 8px;
margin: 0;
width: calc(100% - 16px);
font-size: normal;
font-family: monospace;
line-height: normal;
tab-size: 2;
caret-color: darkgrey;
white-space: pre;
}
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;
width: calc(100% - 32px);
height: calc(100% - 32px);
}
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;
}
code-input textarea, code-input pre {
/* In the same place */
position: absolute;
top: 0;
left: 0;
}
/* Move the textarea in front of the result */
code-input textarea {
z-index: 1;
}
code-input pre {
z-index: 0;
}
/* Make textarea almost completely transparent */
code-input textarea {
color: transparent;
background: transparent;
caret-color: inherit!important; /* Or choose your favourite color */
}
/* Can be scrolled */
code-input textarea, code-input pre {
overflow: auto!important;
white-space: inherit;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
}
/* No resize on textarea; stop outline */
code-input textarea {
resize: none;
outline: none!important;
}
code-input:not(.code-input_registered)::before {
/* Display message to register */
content: "Use codeInput.registerTemplate to set up.";
display: block;
color: grey;
}