@charset "UTF-8";

@import "inc/bootstrap";

// override font to avoid @font-face load
$regularFont: 'Franklin Gothic', 'Franklin Gothic Medium', sans-serif;

$mainContainer : '.qti-item';
@import "inc/base";
@import "inc/select2";
@import "inc/mediaelementplayer";

%selectableHover {
    background: whiten($info, .95) !important;
    cursor: pointer !important;
}
%activeHover {
    background: whiten($info, .91) !important;
}

%eyecatcher {
    -webkit-box-shadow: 0 0 5px 1px whiten($info, .2);
    box-shadow: 0 0 5px whiten($info, .2);
    z-index:9;
}
%dragged {
    z-index:10;
    background: whiten($info, .91) !important;
}

%dropzone {
    background: whiten($info, .80) !important;
    border: 1px $uiClickableHoverBg dashed !important;
}

%droppable {
    background: whiten($info, .80) !important;
}

%qtiModalFeedback {
    color : blacken($textColor, .5);/*because of the overlay, make it darker*/
    margin-top : 10px;
    .qti-title{
        margin-top: 0px;
    }
    border : 4px solid $infoBorderColor;
    &.positive{
        border-color : $successBorderColor;
    }
    &.negative{
        border-color : $errorBorderColor;
    }
}

#{$mainContainer} {

    @import "inc/fonts/tao-icon-classes";

    @import "inc/feedback";
    @import "inc/grid";
    @import "inc/tooltip";
    @import "inc/resourcemgr";
    @import "inc/buttons";
    @import "inc/jquery.nouislider";
    @import "inc/forms";
    @import "inc/components";

    // reset grid set-up within the item context

    //!important to override all attempts to change this in the theme
    overflow-x: visible !important;
    .grid-row, .fixed-grid-row {
        width: 100%;
        [class*=" col-"], [class^="col-"] {
            &.col-12 {
                width: 100%;
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }

    .grid-container {
        overflow-x: visible !important;
    }

    padding: 15px;
    background: white();
    margin:auto;
    max-width: 1024px;

    &.runtime {
        min-height: 100%;
    }

    [class*="col-"] {
        img {
            max-width: initial;
        }
    }

    #modalFeedbacks {
        max-height:0;
        .qti-modalFeedback{
            @extend %qtiModalFeedback;
        }
    }

    .qti-itemBody{
        .qti-modalFeedback{
            @extend %qtiModalFeedback;
            border-width : 1px;
            padding:10px 10px 15px;
            background: $infoBgColor;
            position: relative;
            z-index: 100002;
            &.positive{
                background: $successBgColor;
            }
            &.negative{
                background: $errorBgColor;
            }
        }
    }

    .interaction-cover{
        display : block;
        opacity : 0.05;
    }

    /* authoring */

    .qti-choice, .qti-prompt-container {
        p:last-child {
            margin-bottom: 0 !important;
        }
    }

    .prompt, .qti-prompt {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    // MathJax reset
    .MathJax span {
        line-height: inherit;
        font-size: inherit;
    }

    //scope all hover, active style for delivery under the runtime class
    &.runtime {
        .block-listing {
            & > li {
                &.active {
                    border-color: whiten($info, .2) !important;
                    &:hover{
                        @extend %activeHover;
                    }
                }
                &:hover{
                    @extend %selectableHover;
                }
                &.dragged, &.dragged:hover { // :hover is to override .active:hover
                    @extend %dragged;
                }
                &.droppable, &.droppable:hover { // :hover is to override .active:hover
                    @extend %droppable;
                }
                &.dropzone {
                    @extend %dropzone;
                }
            }
        }
    }

    .block-listing {
        & > li {
            @include simple-border(#e0e0e0);
            background: transparent;
            padding: 5px;
            margin: 3px;
            cursor: pointer;
            position:relative;
        }
        &.horizontal {
            @extend .clearfix;
            &:after {
                @extend .clearfix:after;
            }
            &:before {
                @extend .clearfix:before;
            }
            & > li {
                display: block;
                float: left;
            }
        }
        &.solid, &.bordered {
            padding-top: 3px;
            padding-right: 3px;
            padding-bottom: 3px;
            &.none {
                padding-left: 3px;
            }
        }
    }


    .qti-block {
        border:1px solid transparent;
    }

    .qti-interaction {
        &:focus {
            outline-color: $colorWheel-05;
        }
        .text-container{
            min-height: 50px;

            &.text-preformatted{
                font-family: $monospaceFont;
            }
        }

        .solid {
            //background: whiten($uiClickableDefaultBg, .4);
            // @include simple-border(whiten($uiClickableDefaultBg, .4));
            // original: above; new: below
            border: 6px solid  whiten($uiClickableDefaultBg, .2);
        }
        .bordered {
            @include simple-border(#e0e0e0);
            background: white;
        }
        .empty {
            border: 1px $uiClickableHoverBg dashed !important;
            min-height: 50px;
            cursor: default;
        }
        .add-option {
            border: 1px mix(#fff, $info, 20%) dashed !important;
            list-style-type: none;
            position: relative;
            cursor: pointer !important;
            color: $info !important;
            border-radius: 3px;
            background-color: mix(#fff, $info, 90%);
            [class^="icon-"], [class*=" icon-"] {
                @include font-size(14);
                position: relative;
                top: 1px;
                left: 2px;
                color: $info;
                padding-right: 5px;
            }


            & > div {
                display: table;
                width: 100%;
                height: 100%;
                [class^="icon-"], [class*=" icon-"] {
                    display: table-cell;
                    @include font-size(60);
                    position: static !important;
                    vertical-align: middle;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    top: 0;
                    left: auto;
                    padding:0;
                }
            }
            &:hover {
                opacity: .8;
            }
        }

        input[type="color"],
        input[type="date"],
        input[type="datetime"],
        input[type="datetime-local"],
        input[type="email"],
        input[type="month"],
        input[type="number"],
        input[type="range"],
        input[type="search"],
        input[type="tel"],
        input[type="time"],
        input[type="text"],
        input[type="password"],
        input[type="url"],
        input[type="week"],
        textarea,
        select {
            border-top-color  : #aaa;
            border-left-color : #aaa;
        }
    }

    @import "all-interactions";
    @import "object";
    @import "choice";
    @import "order";
    @import "extended-text";
    @import "associate";
    @import "match";
    @import "media";
    @import "graphic";
    @import "hottext";
    @import "gap-match";
    @import "slider";
    @import "inline-choice";
    @import "text-entry";
    @import "upload";
    @import "rubric-block";
    @import "custom";
    @import "table";

}

.tao-preview-scope{
    padding-top: 20px;
}