.item-paper {
    position: relative;

    .score-box {
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 0 $card-inner-border-radius 0 $card-inner-border-radius;

        .user-score {
            border-top-left-radius: 0;
        }
    }

    .nav-tabs {
        padding-left: $card-spacer-x;
        margin: 0 (-$card-spacer-x) $card-spacer-y (-$card-spacer-x);
    }
}


.quiz-item {
    .item-description {
        color: var(--#{$prefix}secondary-color);
        font-style: italic;
    }
}

.item-hints {
    margin-top: $component-margin-bottom;
}

.item-feedback {
    display: flex;
    background: var(--#{$prefix}tertiary-bg);
    border-top: 1px solid $card-border-color;
    margin: $card-spacer-y (-$card-spacer-x) (-$card-spacer-y) (-$card-spacer-x);
    padding: $card-spacer-y $card-spacer-x;

    @include border-bottom-radius($card-inner-border-radius);

    .fa {
        font-size: map-get($font-sizes, 5);
        margin-right: $card-spacer-x;
        opacity: 0.25;
    }
}

.solution-score,
.answer-stats {
    font-size: $font-size-sm;
    background: $gray-light;
    color: #eee;
    margin-left: map-get($spacers, 2);
}

.no-answer {
    font-style: italic;
    color: var(--#{$prefix}secondary-color);
}

.answer-item {
    //text-align: justify; // justify HTML contents by default (can be overridden through HTMLs WYSIWYG)
    background-color: $answer-item-bg;
    border: 1px solid $answer-item-border;
    border-radius: $answer-item-border-radius;
    padding: $answer-item-padding;
    margin-bottom: $answer-item-margin-bottom;
    box-shadow: $answer-item-box-shadow;

    // used to remove default tag styles (e.g. in choices, class is added on a <label> which is bold)
    // this permits to be consistent between item types
    font-weight: normal;
}

// -
// Editor answers styles
// ---

.expected-answer {
    color: inherit; // do not change text color in editor for readability;
    border-color: $expected-answer-border;
    background: $expected-answer-bg;

    .right-controls,
    .left-controls {
        .btn {
            color: $expected-answer-color;
        }
    }
}

.unexpected-answer {
    color: inherit; // do not change text color in editor for readability;
    border-color: $unexpected-answer-border;
    background: $unexpected-answer-bg;

    .right-controls,
    .left-controls {
        .btn {
            color: $unexpected-answer-color;
        }
    }
}

// -
// Player/Feedback/Stats answers styles
// ---

.correct-answer {
    color: $correct-answer-color;
    border-color: $correct-answer-border;
    background: $correct-answer-bg;

    .btn-feedback {
        color: $correct-answer-color;
    }

    .solution-score, .answer-stats {
        background: $correct-answer-color;
        color: $correct-answer-bg;
    }
}

.incorrect-answer {
    color: $incorrect-answer-color;
    border-color: $incorrect-answer-border;
    background: $incorrect-answer-bg;

    .btn-feedback {
        color: $incorrect-answer-color;
    }

    .solution-score, .answer-stats {
        background: $incorrect-answer-color;
        color: $incorrect-answer-bg;
    }
}

.selected-answer {
    color: $selected-answer-color;
    border-color: $selected-answer-border;
    background: $selected-answer-bg;

    .btn-feedback {
        color: $selected-answer-color;
    }

    .solution-score,
    .answer-stats {
        background: $selected-answer-color;
        color: $selected-answer-bg;
    }
}

.unanswered-item {
    color: $unanswered-answer-color;
    border-color: $unanswered-answer-border;
    background: $unanswered-answer-bg;

    .answer-stats {
        background: $unanswered-answer-color;
        color: $unanswered-answer-bg;
    }
}

.stats-answer {
    border-color: $answer-item-border;
    background: $answer-item-bg;
}

.btn-feedback {
    padding: 0 !important; // important is needed to override bootstrap .btn
}
