@import "~core/features/question/question";

// Style ddimageortext content a bit. Almost all these styles are copied from Moodle.
:host {
    .addon-qtype-ddimageortext-container {
        min-height: 80px; // To display the loading.
    }

    core-format-text ::ng-deep {
        .qtext {
            margin-bottom: 0.5em;
            display: block;
        }

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

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

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

        @for $i from 0 to length($core-dd-question-colors) {
            .group#{$i + 1} {
                background: nth($core-dd-question-colors, $i + 1);
            }
        }

        .group2 {
            border-radius: 10px 0 0 0;
        }
        .group3 {
            border-radius: 0 10px 0 0;
        }
        .group4 {
            border-radius: 0 0 10px 0;
        }
        .group5 {
            border-radius: 0 0 0 10px;
        }
        .group6 {
            border-radius: 0 10px 10px 0;
        }
        .group7 {
            border-radius: 10px 0 0 10px;
        }
        .group8 {
            border-radius: 10px 10px 10px 10px;
        }

        .drag {
            border: 1px solid var(--gray-darker);
            color: var(--ion-text-color);
            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 var(--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: var(--core-dd-question-selected-shadow);
        }
    }
}
