@_cell_padding_minus_border: @cell_padding - @cell_border_width;

._selected_style(@border_color) {
    position: absolute;
    display: block;
    top: -1 * @cell_border_width;
    left: -1 * @cell_border_width;
    width: @cell_left_border_width;
    // height: 100% + (2 * @cell_border_width);
    height: calc(~"100% + "(2 * @cell_border_width));
    content: '';
    background: @border_color;
}


div.cell {
    .vbox();
    .corner-all();
    .border-box-sizing();
    
    border-width: @cell_border_width;
    border-style: solid;
    border-color: transparent;

    width: 100%;
    padding: @_cell_padding_minus_border;
    /* This acts as a spacer between cells, that is outside the border */
    margin: 0px;
    outline: none;
    
    position: relative;
    overflow: visible;

    &:before {
        ._selected_style(transparent);
    }

    &.jupyter-soft-selected {
        border-left-color: @soft_select_color;
        border-left-width: @cell_border_width;
        padding-left: @cell_padding - @cell_border_width;
        border-right-color: @soft_select_color;
        border-right-width: @cell_border_width;
        background: @soft_select_color;
    
        @media print {
            border-color: transparent;
        }
    }

    &.selected, &.selected.jupyter-soft-selected {
        border-color: @border_color;
        
        &:before {
            ._selected_style(@selected_border_color);
        }

        @media print {
            border-color: transparent;
        }
    }

    .edit_mode &.selected {
        border-color: @edit_mode_border_color;
        
        &:before {
            ._selected_style(@edit_mode_border_color);
        }

        @media print {
            border-color: transparent;
        }
    }

}


.prompt {
    /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
    min-width: 14ex;

    /* This padding is tuned to match the padding on the CodeMirror editor. */
    padding: @code_padding;
    margin: 0px;
    font-family: @font-family-monospace;
    text-align: right;

    /* This has to match that of the the CodeMirror class line-height below */
    line-height: @code_line_height;

    /* Don't highlight prompt number selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Use default cursor */
    cursor: default;
}

@media (max-width: @screen-xs-min) {
    // prompts are in the main column on small screens,
    // so text should be left-aligned
    .prompt {
        text-align: left;
    }
}

div.inner_cell {
    min-width: 0;
    .vbox();
    .box-flex1();
}

/* input_area and input_prompt must match in top border and margin for alignment */
div.input_area {
    border: 1px solid @light_border_color;
    .corner-all;
    background: @cell_background;
    line-height: @code_line_height;
}

/* This is needed so that empty prompt areas can collapse to zero height when there
   is no content in the output_subarea and the prompt. The main purpose of this is
   to make sure that empty JavaScript output_subareas have no height. */
div.prompt:empty {
    padding-top: 0;
    padding-bottom: 0;
}

div.unrecognized_cell {
    // from text_cell
    padding: 5px @_cell_padding_minus_border 5px 0px;
    .hbox();

    .inner_cell {
        .border-radius(@border-radius-base);
        padding: @_cell_padding_minus_border;
        font-weight: bold;
        color: red;
        border: @cell_border_width solid @light_border_color;
        background: darken(@cell_background, 5%);
        // remove decoration from link
        a {
            color: inherit;
            text-decoration: none;

            &:hover {
                color: inherit;
                text-decoration: none;
            }
        }
    }
}
@media (max-width: @screen-xs-min) {
    // remove prompt indentation on small screens
    div.unrecognized_cell > div.prompt {
        display: none;
    }
}
