@brightGreen: #78C008;
@gray: #CCC;

@cursorWidth: 2px;
@cursorMargin: -1px;
@emptyBlockBorderRadius: 1px;
@emptyBlockPadding: 4px;

// NOTE(charlie): The 500ms animation length perfectly matches MathQuill's own
// frequency for toggling the application of the .mq-blink class. If we were to
// change this animation length at all, we'd need to modify MathQuill as well.
@cursorAnimationDuration: 500ms;

.keypad-input {
    .mq-editable-field {
        .mq-cursor:not(:only-child),
        .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
            /* HACK(charlie): Magic numbers to properly size and position the vertical
               cursor, which is visible whenever the cursor is not alone in its parent,
               with the exception that it's also visible when the entire input is
               empty. */
            height: 20px !important;
            margin-top: -5px !important;
            vertical-align: middle !important;
        }

        .mq-cursor {
            border-color: @brightGreen;

            border-left: @cursorWidth solid @brightGreen !important;

            margin-left: @cursorMargin !important;
            margin-right: @cursorMargin !important;

            // Fade the cursor out, overriding MathQuill's default behavior.
            opacity: 1 !important;
            transition: opacity @cursorAnimationDuration ease-out !important;
            visibility: visible !important;

            &.mq-blink {
                // And fade the cursor back in.
                opacity: 0 !important;
                transition: opacity @cursorAnimationDuration ease-in !important;
                visibility: visible !important;
            }
        }

        .mq-non-leaf .mq-cursor:only-child {
            // Set the cursor to a grey rectangle, rather than a vertical line.
            border: @cursorWidth solid !important;
            border-color: @brightGreen !important;
            border-radius: @emptyBlockBorderRadius;
            opacity: 1 !important;
            padding: 0 @emptyBlockPadding 0 @emptyBlockPadding;
            transition: border-color @cursorAnimationDuration ease-out !important;

            &.mq-blink {
                // And animate it between bright green and gray.
                border-color: @gray !important;
                opacity: 1 !important;
                transition: border-color @cursorAnimationDuration ease-in !important;
            }
        }
    }

    .mq-empty {
        background: transparent !important;
    }

    // Adds empty block styling to elements with .mq-hasCursor but without a
    // cursor element (this happens where the cursor is when the math input
    // loses focus).
    .mq-empty:not(.mq-root-block):after,
    .mq-hasCursor:empty:not(.mq-root-block):after {
        border: @cursorWidth solid @gray;
        border-radius: @emptyBlockBorderRadius;
        // Hides the 'c' content added by MathQuill to measure the width.
        color: transparent;
        display: inline-block;
        margin-left: @cursorMargin;
        margin-right: @cursorMargin;
        padding: 0 @emptyBlockPadding 0 @emptyBlockPadding;
        visibility: visible !important;
    }

    .mq-selection .mq-empty:not(.mq-root-block):after {
        border-color: white;
    }

    .mq-hasCursor:empty:not(.mq-root-block):after {
        // Place a 'c' inside for sizing the cursor (for the case explained
        // above); normally, MathQuill already does this for .mq-cursor.
        content: 'c';
    }

    .mq-math-mode .mq-selection,
    .mq-editable-field .mq-selection {
        .mq-non-leaf {
            background: @brightGreen !important;
            border-color: white !important;
            color: white !important;
        }

        .mq-scaled {
            background: transparent !important;
            border-color: transparent !important;
            color: white !important;
        }
    }

    .mq-selection {
        background: @brightGreen !important;
        border-color: white !important;
        color: white !important;
        display: inline-block !important;
    }
}

// The keypad sets its own color styles for KaTeX elements that are rendered in
// its keys, so prevent any external styling.
.keypad-container .katex {
    color: inherit !important;
}