// Style ddimageortext content a bit. Almost all these styles are copied from Moodle.
addon-qtype-ddimageortext {
    .qtext {
        margin-bottom: 0.5em;
        display: block;
    }

    div.droparea img {
        border: 1px solid $gray-darker;
        max-width: 100%;
    }

    .draghome {
        vertical-align: top;
        margin: 5px;
        visibility : hidden;
    }
    .draghome img {
        display: block;
    }

    div.draghome {
        border: 1px solid $gray-darker;
        cursor: pointer;
        background-color: #B0C4DE;
        display:inline-block;
        height: auto;
        width: auto;
        zoom: 1;
    }

    .group1 {
        background-color: $white;
    }
    .group2 {
        background-color: $blue-light;
    }
    .group3 {
        background-color: #DCDCDC;
    }
    .group4 {
        background-color: #D8BFD8;
    }
    .group5 {
        background-color: #87CEFA;
    }
    .group6 {
        background-color: #DAA520;
    }
    .group7 {
        background-color: #FFD700;
    }
    .group8 {
        background-color: #F0E68C;
    }
    .drag {
        border: 1px solid $gray-darker;
        cursor: pointer;
        z-index: 2;
    }
    .dragitems.readonly .drag {
        cursor: auto;
    }
    .dragitems>div {
        clear: both;
    }
    .dragitems {
        cursor: pointer;
    }
    .dragitems.readonly {
        cursor: auto;
    }
    .drag img {
        display: block;
    }

    div.ddarea {
        text-align : center;
        position: relative;
    }
    .dropbackground {
        margin:0 auto;
    }
    .dropzone {
        border: 1px solid $gray-darker;
        position: absolute;
        z-index: 1;
        cursor: pointer;
    }
    .readonly .dropzone {
        cursor: auto;
    }

    div.dragitems div.draghome, div.dragitems div.drag {
        font:13px/1.231 arial,helvetica,clean,sans-serif;
    }
    .drag.beingdragged {
        z-index: 3;
        box-shadow: 3px 3px 4px $gray-darker;
    }
}
