/* (Page-wide) CodeMirror customizations
============================================================================= */

/* Add a bit more padding on the left side.
----------------------------------------------------------------------------- */

.CodeMirror-gutters {
    padding-right: .2em;
    padding-left: .2em;
}
pre.CodeMirror-line {
    padding-left: .4em;
}

/* Mutant Icons
----------------------------------------------------------------------------- */

.gh-mutant-icons {
    display: flex;
    width: max-content;
    align-content: center;
    gap: 1px;
    margin-left: 1px;
}
.gh-mutant-icon {
    position: relative;
}
.gh-mutant-icon::after {
    content: attr(data-count);

    /* Position */
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-50%, -50%);
    z-index: 2;

    /* Font */
    color: white;
    font-weight: bold;
    font-size: .75em;
    line-height: 1;

    /* Background */
    background-color: #dc3545;
    padding: .25rem;
    border-radius: 50rem;
}

/* Highlighting colors / decorations
----------------------------------------------------------------------------- */

.line-error { border-bottom: 1px dotted #ff0000; }
.coverage-0 { background-color: rgba(153, 255, 153, 0.00); }
.coverage-1 { background-color: rgba(153, 255, 153, 0.01); }
.coverage-2 { background-color: rgba(153, 255, 153, 0.02); }
.coverage-3 { background-color: rgba(153, 255, 153, 0.03); }
.coverage-4 { background-color: rgba(153, 255, 153, 0.04); }
.coverage-5 { background-color: rgba(153, 255, 153, 0.05); }
.coverage-6 { background-color: rgba(153, 255, 153, 0.06); }
.coverage-7 { background-color: rgba(153, 255, 153, 0.07); }
.coverage-8 { background-color: rgba(153, 255, 153, 0.08); }
.coverage-9 { background-color: rgba(153, 255, 153, 0.09); }
.coverage-10 { background-color: rgba(153, 255, 153, 0.10); }
.coverage-11 { background-color: rgba(153, 255, 153, 0.11); }
.coverage-12 { background-color: rgba(153, 255, 153, 0.12); }
.coverage-13 { background-color: rgba(153, 255, 153, 0.13); }
.coverage-14 { background-color: rgba(153, 255, 153, 0.14); }
.coverage-15 { background-color: rgba(153, 255, 153, 0.15); }
.coverage-16 { background-color: rgba(153, 255, 153, 0.16); }
.coverage-17 { background-color: rgba(153, 255, 153, 0.17); }
.coverage-18 { background-color: rgba(153, 255, 153, 0.18); }
.coverage-19 { background-color: rgba(153, 255, 153, 0.19); }
.coverage-20 { background-color: rgba(153, 255, 153, 0.20); }
.coverage-21 { background-color: rgba(153, 255, 153, 0.21); }
.coverage-22 { background-color: rgba(153, 255, 153, 0.22); }
.coverage-23 { background-color: rgba(153, 255, 153, 0.23); }
.coverage-24 { background-color: rgba(153, 255, 153, 0.24); }
.coverage-25 { background-color: rgba(153, 255, 153, 0.25); }
.coverage-26 { background-color: rgba(153, 255, 153, 0.26); }
.coverage-27 { background-color: rgba(153, 255, 153, 0.27); }
.coverage-28 { background-color: rgba(153, 255, 153, 0.28); }
.coverage-29 { background-color: rgba(153, 255, 153, 0.29); }
.coverage-30 { background-color: rgba(153, 255, 153, 0.30); }
.coverage-31 { background-color: rgba(153, 255, 153, 0.31); }
.coverage-32 { background-color: rgba(153, 255, 153, 0.32); }
.coverage-33 { background-color: rgba(153, 255, 153, 0.33); }
.coverage-34 { background-color: rgba(153, 255, 153, 0.34); }
.coverage-35 { background-color: rgba(153, 255, 153, 0.35); }
.coverage-36 { background-color: rgba(153, 255, 153, 0.36); }
.coverage-37 { background-color: rgba(153, 255, 153, 0.37); }
.coverage-38 { background-color: rgba(153, 255, 153, 0.38); }
.coverage-39 { background-color: rgba(153, 255, 153, 0.39); }
.coverage-40 { background-color: rgba(153, 255, 153, 0.40); }
.coverage-41 { background-color: rgba(153, 255, 153, 0.41); }
.coverage-42 { background-color: rgba(153, 255, 153, 0.42); }
.coverage-43 { background-color: rgba(153, 255, 153, 0.43); }
.coverage-44 { background-color: rgba(153, 255, 153, 0.44); }
.coverage-45 { background-color: rgba(153, 255, 153, 0.45); }
.coverage-46 { background-color: rgba(153, 255, 153, 0.46); }
.coverage-47 { background-color: rgba(153, 255, 153, 0.47); }
.coverage-48 { background-color: rgba(153, 255, 153, 0.48); }
.coverage-49 { background-color: rgba(153, 255, 153, 0.49); }
.coverage-50 { background-color: rgba(153, 255, 153, 0.50); }
.coverage-51 { background-color: rgba(153, 255, 153, 0.51); }
.coverage-52 { background-color: rgba(153, 255, 153, 0.52); }
.coverage-53 { background-color: rgba(153, 255, 153, 0.53); }
.coverage-54 { background-color: rgba(153, 255, 153, 0.54); }
.coverage-55 { background-color: rgba(153, 255, 153, 0.55); }
.coverage-56 { background-color: rgba(153, 255, 153, 0.56); }
.coverage-57 { background-color: rgba(153, 255, 153, 0.57); }
.coverage-58 { background-color: rgba(153, 255, 153, 0.58); }
.coverage-59 { background-color: rgba(153, 255, 153, 0.59); }
.coverage-60 { background-color: rgba(153, 255, 153, 0.60); }
.coverage-61 { background-color: rgba(153, 255, 153, 0.61); }
.coverage-62 { background-color: rgba(153, 255, 153, 0.62); }
.coverage-63 { background-color: rgba(153, 255, 153, 0.63); }
.coverage-64 { background-color: rgba(153, 255, 153, 0.64); }
.coverage-65 { background-color: rgba(153, 255, 153, 0.65); }
.coverage-66 { background-color: rgba(153, 255, 153, 0.66); }
.coverage-67 { background-color: rgba(153, 255, 153, 0.67); }
.coverage-68 { background-color: rgba(153, 255, 153, 0.68); }
.coverage-69 { background-color: rgba(153, 255, 153, 0.69); }
.coverage-70 { background-color: rgba(153, 255, 153, 0.70); }
.coverage-71 { background-color: rgba(153, 255, 153, 0.71); }
.coverage-72 { background-color: rgba(153, 255, 153, 0.72); }
.coverage-73 { background-color: rgba(153, 255, 153, 0.73); }
.coverage-74 { background-color: rgba(153, 255, 153, 0.74); }
.coverage-75 { background-color: rgba(153, 255, 153, 0.75); }
.coverage-76 { background-color: rgba(153, 255, 153, 0.76); }
.coverage-77 { background-color: rgba(153, 255, 153, 0.77); }
.coverage-78 { background-color: rgba(153, 255, 153, 0.78); }
.coverage-79 { background-color: rgba(153, 255, 153, 0.79); }
.coverage-80 { background-color: rgba(153, 255, 153, 0.80); }
.coverage-81 { background-color: rgba(153, 255, 153, 0.81); }
.coverage-82 { background-color: rgba(153, 255, 153, 0.82); }
.coverage-83 { background-color: rgba(153, 255, 153, 0.83); }
.coverage-84 { background-color: rgba(153, 255, 153, 0.84); }
.coverage-85 { background-color: rgba(153, 255, 153, 0.85); }
.coverage-86 { background-color: rgba(153, 255, 153, 0.86); }
.coverage-87 { background-color: rgba(153, 255, 153, 0.87); }
.coverage-88 { background-color: rgba(153, 255, 153, 0.88); }
.coverage-89 { background-color: rgba(153, 255, 153, 0.89); }
.coverage-90 { background-color: rgba(153, 255, 153, 0.90); }
.coverage-91 { background-color: rgba(153, 255, 153, 0.91); }
.coverage-92 { background-color: rgba(153, 255, 153, 0.92); }
.coverage-93 { background-color: rgba(153, 255, 153, 0.93); }
.coverage-94 { background-color: rgba(153, 255, 153, 0.94); }
.coverage-95 { background-color: rgba(153, 255, 153, 0.95); }
.coverage-96 { background-color: rgba(153, 255, 153, 0.96); }
.coverage-97 { background-color: rgba(153, 255, 153, 0.97); }
.coverage-98 { background-color: rgba(153, 255, 153, 0.98); }
.coverage-99 { background-color: rgba(153, 255, 153, 0.99); }
.coverage-100 { background-color: rgba(153, 255, 153, 1.00); }

/* Style for read-only CodeMirror instances
----------------------------------------------------------------------------- */

/* Hide the cursor. Codemirror also has the option [readOnly: 'nocursor'], but it has some problems (e.g. copy & paste
   does not work). */
.CodeMirror.codemirror-readonly .CodeMirror-cursor {
    display: none !important
}

/* Style for CodeMirror instances that toggle between readonly and editable
----------------------------------------------------------------------------- */

/* Add .codemirror-readonly to the .CodeMirror container to display a lock in the corner. */
.CodeMirror.codemirror-readonly-toggle.codemirror-readonly::after {
    position: absolute;
    top: 8px;
    right: 8px;
    content: "\f023"; /* fontawesome lock icon */
    font: normal normal normal 24px/1 FontAwesome;
    color: var(--bs-gray);
    z-index: 10; /* CodeMirror search dialog has z-index 15 */
}
/* When .codemirror-readonly-toggle is present in the container as well, the lines are grayed out to make it more
   noticeable when the editor is toggled between readonly and editable. */
.CodeMirror.codemirror-readonly-toggle.codemirror-readonly {
    background: #f7f7f7;
}

/* Sizing
----------------------------------------------------------------------------- */

/*
 * Different ways to set the size of a CodeMirror editor:
 *
 * - Full size:
 *       Use [editor.setSize('100%', '100%');].

 * - Other fixed size:
 *       Use [editor.setSize(..., ...);].

 * - Size depending on parent element:
 *       Don't use [editor.setSize(..., ...);].
 *       Add .codemirror-fill to the parent element.

 * - Size depending on content but constrained to min/max height/width:
 *       Don't use [editor.setSize(..., ...);].
 *       Add .codemirror-expand and [style="--cm-min-height: ..."] etc. to the parent element.
 *       (Or use a predefined class that sets the CSS variables instead of the style attribute.)
 */

/* https://stackoverflow.com/questions/4804581/css-expand-float-child-div-height-to-parents-height */
.codemirror-fill {
    position: relative;
}
.codemirror-fill .CodeMirror {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* https://discuss.codemirror.net/t/codemirror-6-setting-a-minimum-height-but-allow-the-editor-to-grow/2520/2 */
.codemirror-expand .CodeMirror {
    width: 100%;
    height: 100%;
}
.codemirror-expand .CodeMirror-scroll {
    min-height: var(--cm-min-height, unset);
    max-height: var(--cm-max-height, unset);
    min-width: var(--cm-min-width, unset);
    max-width: var(--cm-max-width, unset);
}
/* Reasonable sizes for CodeMirror centered modals. */
.codemirror-class-modal-size {
    --cm-min-height: 100px;
    --cm-max-height: 800px; /* Comfortable max-height for 1080p screens. */
    --cm-min-width: 700px;  /* Fits about 80 chars of code. */
    --cm-max-width: 1000px; /* Fits about 120 chars of code. */
}
.codemirror-test-modal-size {
    --cm-min-height: 100px;
    --cm-max-height: 800px;
    --cm-min-width: 500px;
    --cm-max-width: 1000px;
}
.codemirror-mutant-modal-size {
    --cm-min-height: 100px;
    --cm-max-height: 800px;
    --cm-min-width: 400px;
    --cm-max-width: 1000px;
}

/* Style for individual readonly lines.
----------------------------------------------------------------------------- */

.readonly-line {
    opacity: .5;
    filter: alpha(opacity = 50);
}