// this is a big c/c from .resource-type
.item-type {
    border-radius: @border-radius-base;
    background: @gray-lightest;
    border: 1px solid transparent;
    padding: 5px;
    display: flex;
    align-items: center;
    font-size: @font-size-large;

    .item-icon {
        margin-right: 10px;
    }

    h1 {
        padding: 0;
        margin: 0;
        font-size: 16px;
        font-weight: bold;
    }

    p {
        margin-top: 5px;
        margin-bottom: 0;
        font-style: italic;
        font-size: @font-size-small;
        color: #777; // todo : use a var
    }
}

.item-paper {
    .score-box {
        margin: @score-margin;
        border-radius: 0 @panel-border-radius 0 @score-border-radius;

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

    // todo : do not do it like this
    .nav-tabs {
        padding-left: @panel-body-padding;
        margin: 0 -@panel-body-padding @component-margin-bottom -@panel-body-padding;
    }
}

.item-title {
    font-weight: bold;
    font-size: 16px;
    margin-top: 0;
    padding: 0;
    margin-bottom: @component-margin-bottom; // normalize margin as item title can be a h
}

.item-metadata {
    .item-content,
    .item-description {
        text-align: justify; // justify HTML contents by default (can be overridden through HTMLs WYSIWYG)
        margin-bottom: @component-margin-bottom;
    }

    .item-description {
        text-align: justify; // justify HTML contents by default (can be overridden through HTMLs WYSIWYG)
        font-style: italic;
    }
}

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

.item-feedback {
    display: flex;
    text-align: justify; // justify HTML contents by default (can be overridden through HTMLs WYSIWYG)
    background: @panel-footer-bg;
    border-top: 1px solid #e5e5e5; // todo : add var
    margin: 20px -15px -15px; // todo : add var
    padding: 15px; // todo : add var

    .fa {
        font-size: 26px;
        margin-right: 15px;
        opacity: 0.25;
    }

    > div {
        margin-top: 5px;
    }
}

.solution-score,
.answer-stats {
    white-space: nowrap;
    border-radius: @label-border-radius;
    font-size: @label-font-size;
    background: @gray-light;
    color: #eee;
    padding: 4px 6px;
    margin-left: 5px;
    line-height: 1;
}

.answer-stats {
  padding-left: 5px;
}

.no-answer {
    font-style: italic;
    color: @text-muted;
}

.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;
}

.draggable-answer-item {
    cursor: move;

    &:hover:not(.selected-answer) {
        background: darken(@answer-item-bg, 10%);
        border-color: darken(@answer-item-border, 10%);
    }
}

.expected-answer {
    color: @expected-answer-color;
    border-color: @expected-answer-border;
    background: @expected-answer-bg;
}

.unexpected-answer {
    color: @unexpected-answer-color;
    border-color: @unexpected-answer-border;
    background: @unexpected-answer-bg;
}

.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;
    }
}

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

    .answer-stats {
        background: #777;
    }
}

.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;
    }
}

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