@import 'inc/bootstrap';
@import './test-dimensions';

.runner {
    position: relative;
}

.qti-choiceInteraction {
    .overlay-answer-eliminator {
        display: none;
    }
}

.test-runner-scope {
    position: relative;

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    height: calc(100vh - #{(map-get($heights, header) + map-get($heights, footer)) * 1px});

    .landmark-title-hidden {
        width: 1px;
        height: 1px;
        overflow: hidden;
        position: absolute;
    }

    .test-runner-sections {
        /* flex column value */
        -webkit-flex: 1 1 0%;
        -ms-flex: 1 1 0%;
        flex: 1 1 0%;

        overflow: hidden;

        /* is also a flex container */
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .test-sidebar {
        background: $canvas;

        /* side bars are supposed to have no width until they've got content */
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        overflow-y: auto;

        max-width: 350px;

        & > .qti-panel {
            max-width: 350px;
            padding: 10px;
        }

        @media only screen and (max-device-width: 800px) {
            max-width: 200px;

            & > .qti-panel {
                max-width: 200px;
            }
        }

        @media only screen and (min-device-width: 800px) and (max-device-width: 1280px) {
            max-width: 250px;

            & > .qti-panel {
                max-width: 250px;
            }
        }

        @media only screen and (min-device-width: 1280px) and (max-device-width: 1440px) {
            max-width: 300px;

            & > .qti-panel {
                max-width: 300px;
            }
        }
    }

    .test-sidebar-left {
        border-right: 1px $uiGeneralContentBorder solid;
    }

    .test-sidebar-right {
        border-left: 1px $uiGeneralContentBorder solid;
    }

    .content-wrapper {
        position: relative;

        -webkit-flex: 1 1 0%;
        -ms-flex: 1 1 0%;
        flex: 1 1 0%;

        overflow: auto;

        padding: 0;

        .overlay {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            opacity: 0.9;

            &-full {
                background-color: $uiGeneralContentBg;
                opacity: 1;
            }
        }
    }

    #qti-content {
        -webkit-overflow-scrolling: touch;
        max-width: map-get($widths, item-max-width) * 1px;
        width: 100%;
        margin: auto;
    }

    #qti-item {
        width: 100%;
        min-width: 100%;
        height: auto;
        overflow: visible;
    }

    .qti-item {
        padding: 30px;
    }

    .size-wrapper {
        max-width: map-get($widths, size-wrapper) * 1px;
        margin: auto;
        width: 100%;
    }

    #qti-rubrics {
        margin: auto;
        max-width: map-get($widths, item-max-width) * 1px;
        width: 100%;

        .qti-rubricBlock {
            margin: 20px 0;
        }

        .hidden {
            display: none;
        }
    }

    .visible-hidden {
        position: absolute;
        overflow: hidden;
        height: 1px;
        width: 1px;
        word-wrap: normal;
    }
}

.no-controls .test-runner-scope {
    height: 100vh;
}

.item-writing-mode-vertical-rl {
    #qti-content {
        height: 100%;
    }
    .qti-item {
        padding: 15px;
    }
}
.qti-itemBody.writing-mode-vertical-rl {
    writing-mode: vertical-rl;
    padding: 15px;
    block-size: 100%;
    inline-size: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    line-height: 1.8; /* assuming ruby tags */

    /* vertical writing mode is set for whole item, to fit wavy underlines and subscripts */
    .custom-text-box {
        padding-block-start: 12px;
    }
}

.qti-itemBody {
    /* vertical writing mode is set for A-block, to fit wavy underlines and subscripts */
    .writing-mode-vertical-rl {
        padding-block-start: 12px;
    }
}