/* Code editor of the tools (js/code-editor.js, Ace) */

.ce-source { display: none !important; }
.ce-editor { width: 100%; border: 1px solid var(--ms-line, #d8dce6); border-radius: 10px; font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important; line-height: 1.5; }
.ce-editor[hidden] { display: none !important; }
.ce-editor.ace_focus { border-color: var(--ms-red, #ef2b4b); box-shadow: 0 0 0 .2rem rgba(239, 43, 75, .15); }
.ce-editor.is-invalid { border-color: #dc3545; }
.ce-editor.is-valid { border-color: #16a34a; }
.ce-editor .ace_gutter { border-radius: 10px 0 0 10px; }
.ce-editor .ace_placeholder { font-family: inherit; opacity: .55; padding: 0 4px !important; transform: none; }
.ce-readonly .ace_gutter-active-line, .ce-readonly .ace_active-line { background: transparent !important; }
/* The copy button stays above the editor */
.ce-editor ~ .position-absolute { z-index: 10; }
.ce-editor ~ .position-absolute .btn { margin-right: 1.4rem !important; }

/* "Sample data" button of the in-browser tools (js/tools.js) */
.tl-sample { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.card-header .row > .col-auto > .tl-sample { margin: -.15rem 0; }

/* Clear (×) button of the tool fields (js/tools.js) */
.tl-clearable { position: relative; }
.tl-clearable > .form-control { padding-right: 2.1rem; }
.tl-clear { position: absolute; top: 50%; right: .45rem; z-index: 12; display: flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; margin-top: -.725rem; padding: 0; border: 0; border-radius: 50%; background: rgba(120, 130, 150, .16); color: var(--ms-muted, #6b7280); font-size: 1.05rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.tl-clear:hover, .tl-clear:focus { background: var(--ms-red, #ef2b4b); color: #fff; outline: 0; }
.tl-clear[hidden] { display: none; }
.tl-clearable-area > .tl-clear { top: .45rem; margin-top: 0; }
.tl-clearable-area > .ce-editor ~ .tl-clear { right: 1.3rem; }
.tl-clearable > input[type="number"] { padding-right: 2.6rem; }
.tl-clearable > input[type="number"] ~ .tl-clear { right: 1.6rem; }
/* Inside an input group the wrapper takes the place of the field */
.input-group > .tl-clearable { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .tl-clearable:not(:last-child) > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .tl-clearable:not(:first-child) > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }