@import '~realize-common/src/app/components/themes/realize/css/variables.less';
@import '../assignmentViewer.common.less';

.av__headerNavbar {
    background: @white;
    color: @grayDark;
    width: 100%;
    z-index: 100;
}

.av__navbar--inner {
    display: flex;
    flex-direction: row;
    color: @grayDark;
    height: 40px;
}

.av__exit {
    font-family: @baseFontBold;
    font-size: @font-size-sm;
    padding: 13px 0 0 8px;
    white-space: nowrap;
    a {
        color: @grayDark;
        [class^="icon-"],
        [class*="icon-"] {
            font-size: @font-size-sm;
            vertical-align: baseline;
        }
        &:hover {
            color: @blueLight;
            text-decoration: none;
        }
    }
}

.av__exitText {
    padding-left: 3px;
}

.av__save {
    font-family: @baseFontBold;
    font-size: @font-size-sm;
    padding: 7px 0 0 8px;
    white-space: nowrap;
}

.btn.btn--save {
    font-family: @avFontHeavy;
    font-size: @font-size-sm;
    background: @white;
    color: @black;
    border-radius: 2px;
    border: 1px solid @black;
    white-space: nowrap;
    height: 26px;
    min-width: 52px;
    width: auto;
    text-shadow: none;
    text-align: center;
    &:hover {
        color: @white;
        text-decoration: none;
        background-color: @grayDark;
        background-image: -webkit-linear-gradient(top, @grayDark 0%, @black 100%);
    }
}

.av__assignmentTitle {
    padding: 13px 0 0 31px;
    flex-grow: 1;
    font-size: @font-size-sm;
    font-family: @avFontMedium;
    color: @grayDark;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.av__assignmentDueMessages {
    padding: 13px 8px 0 0;
    color: @grayDarker;
    font-family: @avFontHeavy;
    white-space: nowrap;
    text-align: right;
}

.av__assignmentDueDate {
    font-size: @font-size-xs;
    display: flex;
    flex-direction: row-reverse;
}

.av__assignmentPastDueDate {
    font-size: @font-size-sm;
    color: @red;
    font-family: @baseFontBold;
}

.av__turnIn {
    padding: 5px 8px 5px;
}

.av__turnedIn {
    padding: 12px 14px 0 0;
    font-family: @avFontHeavy;
    color: @grayDarker;
}

@media only screen and (max-width: @mediumBreakpointMax) {

    .av__exit {
        a {
            padding: 5px 10px 6px;
            [class^="icon-"],
            [class*="icon-"] {
                margin: 0;
            }
        }
    }
}

@media only screen and (max-width: @smallBreakpointMax) {

    .av__assignmentTitle {
        display: none;
    }

    .av__exitText {
        position: absolute;
        overflow: hidden;
        width: 0;
        height: 0;
        left: -1000px;
        top: 0;
        border: none;
        background:none;
    }

    .av__assignmentDueMessages {
        color: @grayDarker;
        font-family: @avFontHeavy;
    }

    .av__turnIn {
        padding: 5px 8px 5px;
        margin-left: 192px;
    }
}

.btn.btn--turnIn {
    font-family: @avFontHeavy;
    font-size: @font-size-sm;
    background: @black;
    color: @white;
    border-radius: 2px;
    border: 1px solid @black;
    white-space: nowrap;
    height: 30px;
    min-width: 87px;
    width: auto;
    text-shadow: none;
    text-align: center;
    &:hover {
        color: @white;
        text-decoration: none;
        background-color: @grayDark;
        background-image: -webkit-linear-gradient(top, @grayDark 0%, @black 100%);
    }
}

.av__studentStatusPanel {
    background-color: @white;
    white-space: nowrap;
}

.av__studentName {
    font-size: @font-size-sm;
    font-family: @avFontMedium;
    height: 16px;
}

.av__status--inProgress {
    padding-right: 14px;
    font-family: @avFontMedium;
    font-weight: @assignmentStatusFontWeight;
    font-size: @font-size-sm;
    color: @inProgressFontColor;
}

.av__status--completed {
    padding-right: 14px;
    font-family: @avFontMedium;
    font-weight: @assignmentStatusFontWeight;
    font-size: @font-size-sm;
    color: @completedFontColor;
}

.av__studentStatus {
    right: 10px;
    top: 25%;
    padding-top: 11px;
    text-align: right;
}

.turnIn__modalSpinner {
    align-items: center;
    background-color: @black;
    display: flex;
    height: 100%;
    justify-content: center;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    z-index: 999;
    .icon-spinner {
        color: @white;
        font-size: 120px;
        padding: 0;
    }
}