//
// Edit this file in the *perseus* repo!
// (All changes outside the perseus repo will be overwritten)
//

@import "variables.less";

// Article Renderer
@import "articles.less";

#perseus {
    position: relative;
}

// .no-select is used to prevent selection of certain widgets.
// often, allowing selection makes for an awkward mobile experience
// where you constantly highlight elements unintentionally.
.no-select {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
// .blank-background is used to prevent drawing under transparent widgets.
// drawing under transparent widgets is particularly annoying because if
// you lift up your pen and put it down again, you can't continue drawing,
// because you're now clicking on the widget. This is very
// counterintuitive, so we simply don't let you see anything you draw under
// a widget.
.blank-background {
    background-color: #FDFDFD;  // Keep in sync with KhanUtil._BACKGROUND
}
// There is no scratchpad in the answer_area, and it has a different color
// background, so just make it transparent
#answer_area .blank-background {
    background-color: transparent;
}

.above-scratchpad {
    position: relative;
    z-index: @zIndexAboveScratchpad;
}

// All graphie components placed above the scratchpad should have their
// background wiped out.
.graphie.above-scratchpad,
.graphie-container.above-scratchpad {
    .blank-background;
}

// Selectable graphie components make for awkward touch experiences
.graphie {
    .no-select;
}

.perseus-interactive,
.perseus-interactive.above-scratchpad {
    position: relative;
    z-index: @zIndexInteractiveComponent;
}

&,  // and moar specificity...
#answercontent input[type=text],
#answercontent input[type=number],
.framework-perseus input[type=text],
.framework-perseus input[type=number] {
    &.perseus-input-size-normal,
    {
        width: 80px;
    }

    &.perseus-input-size-small {
        width: 40px;
    }
}

.framework-perseus {
    #problemarea {
        input, button {
            .perseus-interactive;
        }
    }

    div.paragraph {
        font-size: 14px;
        margin: 22px 0px;
    }

    div.instructions {
        display: block;
        font-style: italic;
        font-weight: bold;
    }

    .paragraph > ul:not(.perseus-widget-radio) {
        font-size: 14px;
        margin: -11px 0px 22px 0px;
        padding-left: 35px;
    }

    .paragraph > ul:not(.perseus-widget-radio) > li {
        list-style-type: disc;
    }

    .paragraph > ol {
        list-style: decimal;
        padding-left: 2em;
    }

    blockquote {
        padding: 0 2.5em;
    }

    table {
        font-size: 14px;  // to match <p>

        th, td {
            padding: 5px 10px;
            text-align: left;

            &[align=center] {
                text-align: center;
            }

            &[align=right] {
                text-align: right;
            }
        }

        th {
            border-bottom: 2px solid #ccc;
            font-weight: bold;
            padding-bottom: 2px;
        }

        tr:nth-child(odd) {
            // Doesn't work in IE8 :(
            td {
                background-color: #ededed;
            }
        }
    }

    .perseus-titled-table {
        display: inline-block;

        // Center the table in a titled table
        table {
            margin-left: auto;
            margin-right: auto;
        }
    }

    // Center the title in a titled table
    .perseus-table-title {
        text-align: center;
        font-size: larger;
    }

    sup {
        font-size: smaller;
        vertical-align: super;

        // by default, vertical-align: super changes the line height of
        // the line this text is in, which repositions surrounding text
        // and is sad. This is especially important for the passage
        // widget, as changes to line-height there make the line numbers
        // incorrect. This hack fixes that, and seems to not cause problems
        // even if there is no other text on the line (it still gets the
        // standard line-height of what non `vertical-align: super` text
        // would be.
        line-height: 0;
    }

    // place on a div above the inputs
    .range-input {
        border: 1px solid #ccc;
        border-radius: 5px;
        display: inline-block;
        padding: 0px 5px;

        & > input {
            border: 0;
            display: inline;
            text-align: center;
            width: 30px;
        }

        & > span {
            color: #999;
            font-size: 14px;
        }
    }

    .number-input {
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 0; // override
        padding: 5px 0; // override
        text-align: center;
        width: 40px;

        &.invalid-input {
            background-color: @red;
            outline-color: red;
        }

        &.number-input-label {
            margin-left: 5px;
        }

        &.mini {
            width: 40px;
        }
        &.small {
            width: 60px;
        }
        &.normal {
            width: 80px;
        }
    }

    .math-output {
        display: inline-block;
        min-width: 80px;
        min-height: 36px;
        border-radius: 5px;
        padding: 0;
        margin-top: 4px;
        margin-bottom: 4px;
        background: white;
        border: 1px solid #a4a4a4;
    }

    .graph-settings {
        .graph-settings-axis-label {
            border: 1px solid #ccc;
            border-radius: 5px;
            display: inline-block;
            padding: 5px 5px;
            width: 70px;
            float: right;
            margin: 0 5px;
        }
        .graph-settings-background-url {
            width: 250px;
        }
    }

    .graphie-container {
        position: relative;

        img {
            position: absolute;
        }
    }

    .graph-settings, .image-settings, .misc-settings {
        padding-bottom: 5px;
    }

    .image-settings, .misc-settings, .type-settings {
        border-top: 1px solid black;
        padding-top: 5px;
    }

    .svg-image {
        display: inline-block;
        position: relative;

        > .graphie-container {
            position: absolute;
        }
    }
}

.framework-perseus table.non-markdown {
    tr:nth-child(odd) {
        td {
            background-color: transparent;
        }
    }

    th, td {
        border-width: 0;
    }
}


/* Widget CSS */

.perseus-graph-padding {
    padding: 25px 25px 0 0;
}

// TODO(aria): Ugh, sort these and remove
// the extra categorization file
@import "widgets/expression.less";
@import "widgets/radio.less";
@import "widgets/interactive-graph.less";
@import "widgets/categorization.less";
@import "widgets/categorizer.less";
@import "widgets/plotter.less";
@import "widgets/table.less";
@import "widgets/dropdown.less";
@import "widgets/orderer.less";
@import "widgets/measurer.less";
@import "widgets/transformer.less";
@import "widgets/matcher.less";
@import "widgets/sortable.less";
@import "widgets/image.less";
@import "widgets/passage.less";
@import "widgets/matrix.less";
@import "widgets/group.less";
@import "widgets/sequence.less";
@import "widgets/grapher.less";
@import "widgets/unit.less";

.perseus-diff {
    @borderColor: #E4E4E4;
    margin: 0 10px;

    .diff-header {
        font-size: 18px;
        padding: 10px 0;
        width: 50%;
        display: inline-block;
        &.collapsed {
            font-size: 14px;
            padding: 0px;
        }
    }

    .diff-body {
        border-top: 1px solid @borderColor;
        border-bottom: 1px solid @borderColor;
    }

    .diff-row {
        width: 50%;
        white-space: pre-wrap;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        font-size: 14px;
        padding-right: 20px;
        padding-left: 10px;
        overflow: hidden;
        &.collapsed {
            color: #888;
            cursor: pointer;
            &:hover {
                color: #666;
            }

            &:active {
                color: #444;
            }
        }

        .diff-line {
            margin-bottom: 20px;
        }
    }

    .before {
        float: left;
        border-left: 1px solid @borderColor;
    }

    .after {
        float: right;
        border-right: 1px solid @borderColor;
        border-left: 1px solid @borderColor;
    }

    .inner-value {
        height: 100%;
        padding: 3px;
    }

    .not-present {
        display: none;
    }

    .blank-space {
        visibility: hidden;
    }


    .added {
        background-color: #EEFFEE;
        &.dark {
            background-color: #AAFFAA;
        }
    }

    .removed {
        background-color: #FFEEEE;
        &.dark {
            background-color: #FFAAAA;
        }
    }

    .image {
        margin-left: 20px;
        margin-bottom: 10px;
    }

    .image-unchanged {
        border: 1px solid #AAAAAA;
    }

    .image-added {
        border: 2px solid #AAFFAA;
    }

    .image-removed {
        border: 2px solid #FFAAAA;
    }
}

.perseus-widget-container {
    &.widget-nohighlight {
        transition: all 0.15s;
    }

    &.widget-highlight {
        @highlight: 0px 0px 9px 2px rgba(255, 165, 0, 1);
        -webkit-box-shadow: @highlight;
        -moz-box-shadow:    @highlight;
        box-shadow:         @highlight;
        transition: all 0.15s;
    }
}

// TODO(joel) - remove?
.perseus-tooltip {
    background: #fff;
    padding: 5px 10px;
    width: 240px;
}

// CSS is evil; let's overwrite some styles. T_T
.perseus-formats-tooltip {
    .perseus-tooltip;
    color: #777;
}
.framework-perseus .perseus-formats-tooltip .paragraph > ul {
    padding: 0;
    margin: -20px 0 -16px 0;
    > li {
        list-style-type: none;
    }
}

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
          box-shadow: @shadow;
       -o-box-shadow: @shadow;
      -ms-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
  -webkit-box-shadow: @shadow;
}

.perseus-math-input.mq-editable-field.mq-math-mode {
    // Mimic native text input
    background: #fff;

    // If the font-size is too small, super/subscripts become hard to input
    font-size: 18px;

    // Make the click target easier to hit
    min-width: 100px;

    & > .mq-root-block {
        // Mimic native text input w/o using -moz/-webkit-apperance: textfield
        // border-color: rgb(78, 187, 212);
        border-color: #a4a4a4;

        border-radius: 5px;

        // A bit of extra whitespace here greatly improves legibility
        padding: 4px;
    }

    // Fixes for strange default MathQuill styles:

    // Cursor shouldn't actually be touching left border
    .mq-cursor {
        padding-left: 0;
    }

    // Don't gray out implicitly created closing parens
    .mq-paren.mq-ghost {
        color: inherit;
    }

    // Don't put vertical margins on an expression wrapped in parens
    // because it messes up baseline alignment, e.g. h(x)
    .mq-paren + span {
        margin: 0;
    }
}

// override normal 5px border radius for the editor only
.perseus-widget-editor .perseus-math-input.mq-editable-field.mq-math-mode > .mq-root-block {
    border-radius: 0;
}

// This style looks a little off in the expression editor. Luckily users don't
// use the expression editor.
.math-input-buttons {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 2px;
    // each button is 35 + 4 px, plus 4 padding, plus 2 border
    width: 39px*5 + 4px + 2px; // (201)

    &.absolute {
        left: -2px;
        position: absolute;
        top: -3px;
        z-index: @zIndexCalculator;
    }
};

// Math domain color
@borderColor: #1c758a;

.tex-button {
    display: block;
    float: left;
    width: 35px;
    height: 35px;
    margin: 2px;
    border: 1px solid @borderColor;
    background-color: white;
    border-radius: 5px;

    &:hover {
        cursor: pointer;
        background-color: #f0f0f0;
    }

    &:focus {
        border: 2px solid @borderColor;
        outline: none;
    }
}

.tex-button-row {
    margin: 5px 0;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.renderer-widget-error {
    background-color: #fcc;
}

body.sat-section {
    @satTopSpacing: 35px;
    @satSectionHeight: 550px;
    .content-area > div {
        margin-left: auto;
        margin-right: auto;
        width: 592px;
        .perseus-input-with-answer-blurb {
            > span {
                display: inline-block;
            }

            .perseus-possible-answers, .perseus-possible-answers:before {
                font-family: "Proxima Nova Semibold"
            }

            .perseus-possible-answers {
                color: rgb(0, 153, 0);
                padding-right: 4px;
            }

            .perseus-possible-answers:before {
                content: "CORRECT ANSWER:";
                padding: 0 5px 0 13px;
                color: rgb(18, 18, 18);
            }

            .perseus-possible-answer:not(:first-child):before {
                // TODO(johnsullivan): Figure out a better way to do this list
                // joining.
                content: "or";
                padding: 0 5px;
                color: rgb(18, 18, 18);
            }
        }

        input.perseus-incorrect {
            color: @satIncorrectColor;
            background-color: @satIncorrectBackgroundColor;
            border: solid 1px @satIncorrectBorderColor;
        }

        input.perseus-correct {
            color: @satCorrectColor;
            background-color: @satCorrectBackgroundColor;
            border: solid 1px @satCorrectBorderColor;
        }

        input.perseus-unanswered {
            background-color: #eee;
            border: solid 1px #999;
        }

        &.perseus-renderer-two-columns {
            // This prevents a strange blank space from appearing above
            // passages.
            // TODO(johnsullivan): Try and get rid of the wrapping div that's
            // causing this instead of modifying its margin like this.
            & > .paragraph {
                margin: 0;
            }

            width: 1024px;
            & > .paragraph {
                margin: 0;
            }
            .perseus-column {
                & > .paragraph {
                    margin: 0;
                }
                overflow-y: auto;
                &:nth-child(1) {
                    background: #eee;
                    border-right: 1px solid #ddd;
                    height: @satSectionHeight - @satTopSpacing;
                    max-height: @satSectionHeight - @satTopSpacing;
                    float: left;
                    padding-left: 46px;
                    padding-top: @satTopSpacing;
                    padding-bottom: 22px;
                    width: 512px;
                    box-sizing: border-box;

                    .perseus-widget-passage {
                        // We've replaced the margin here with padding in the
                        // parent element to stay consistent with non-passage
                        // two-column mode.
                        margin: 0;
                    }

                    & > .paragraph {
                        margin-right: 40px;
                    }

                    blockquote {
                        padding: 0;
                        margin-right: 22px;

                        & > .paragraph:nth-child(1) {
                            margin-top: 0;
                        }
                    }
                }
                &:nth-child(2) {
                    float: right;
                    height: @satSectionHeight;
                    max-height: @satSectionHeight;
                    padding-right: 20px;
                    width: 475px;
                    .perseus-group {
                        margin-bottom: 20px;
                    }
                }
            }
        }
    }
    .question-annotation {
        // TODO(kitt): generalize for passages
        color: #999;
        margin-top: @satTopSpacing;
        margin-bottom: 24px;
        text-transform: uppercase;
    }

    .paragraph:not(:first-child) .question-annotation {
        margin-top: 48px;
    }

    input[type=text],
    input[type=number] {
        border: 1px solid #aaa;
        font-family: @boldFontFamily;
        font-size: 14px;
        margin: 10px 0;
        padding: 5px;
    }

    .valid-answer {
        input[type=text]:valid, input[type=number]:valid {
            border: 1px solid @satBlue;
            background: @satSelectedBackgroundColor;
        }
    }
    .invalid-answer {
        input[type=text]:valid, input[type=number]:valid {
            color: @satIncorrectColor;
            background-color: @satIncorrectBackgroundColor;
            border: solid 1px @satIncorrectBorderColor;
        }
    }
}

.perseus-error {
    background: @red;
    border: 2px solid red;
    border-radius: 5px;
    padding: 20px;
    margin: 15px 0 10px;
}
