/* The following gets added to the <head> if it is detected that the user has a
 * monospace font with inconsistent normal/bold/italic height.  See
 * notebookmain.js.  Such fonts will have keywords vertically offset with
 * respect to the rest of the text.  The user should select a better font.
 * See: https://github.com/ipython/ipython/issues/1503
 *
 * .CodeMirror span {
 *      vertical-align: bottom;
 * }
 */

.CodeMirror {
    line-height: @code_line_height;  /* Changed from 1em to our global default */
    font-size: @notebook_font_size;
    height: auto;     /* Changed to auto to autogrow */
    background: none;  /* Changed from white to allow our bg to show through */
}

.CodeMirror-scroll {
    /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
    /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
    overflow-y: hidden;
    overflow-x: auto;
}

.CodeMirror-lines {
    /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
    /* we have set a different line-height and want this to scale with that. */
    /* Note that this should set vertical padding only, since CodeMirror assumes
       that horizontal padding will be set on CodeMirror pre */
    padding: @code_padding 0;
}

.CodeMirror-linenumber {
    // This is needed to fine tune the position of the line numbers because we use the 0.4em in @code_padding
    // spacing in various places. Fine tuned to look right.
    padding: 0 8px 0 4px;
}

.CodeMirror-gutters {
    // This is needed because our cell has rounded corners, otherwise the gutter area square
    // corner cuts into the rounded cell border.
    border-bottom-left-radius: @border-radius-base;
    border-top-left-radius: @border-radius-base;
}

.CodeMirror pre {
    /* In CM3 this went to 4px from 0 in CM2. This sets horizontal padding only,
    use .CodeMirror-lines for vertical */
    padding: 0 @code_padding;
    border: 0;
    .border-radius(0)
}

.CodeMirror-cursor {
    border-left: 1.4px solid black;
}

// When zoomed out 67% and 33% on a screen of 1440 width x 900 height
@media screen and (min-width: 2138px) and (max-width: 4319px)  {
    .CodeMirror-cursor {
        border-left: 2px solid black;
    }
}

// When zoomed out less than 33%
@media screen and (min-width: 4320px)  {
    .CodeMirror-cursor {
        border-left: 4px solid black;
    }
}
