// wrapper from comments-page
.comments {
    margin-top: 10px;
}

@mixin media-with-upic($inner-selector) {
    > aside {
        float: left;
    }
    > #{$inner-selector} {
        margin-left: 32px;
    }
}

.comment {
    padding: 7px;
    padding-bottom: 5px;
    @include media-with-upic('.comment-inner');

    // TODO - move these styles to the generic "multi-well" mixin or css class
    min-height: 20px;
    background-color: $mat;
    blockquote {
        border-color: #ddd;
        border-color: rgba(0,0,0,.15);
    }
    margin-bottom: 0px;
    border-left: 1px solid darken($grey, 5%);
    border-right: 1px solid darken($grey, 5%);
    border-bottom: 1px solid darken($grey, 5%);
}
.comment-secret-revealed {
    float: left;
    font-size: 20px;
    color: $dark-grey;
    margin-right: 6px;
}
.comment-outer {
    &:last-of-type > .comment {
        margin-bottom: 12px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    &:first-of-type > .comment {
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
        border-top: 1px solid darken($grey, 5%);
    }
}

.comment-inner > .object-top-line {
    font-size: 12px;
}

textarea.comment-edit {
    width: 95%;
    height: 100%;
}

.comment-edit-buttons {
    display: none;
    float: right;
}

.comment-content-special {
    @include breakpoint(lessThanB) {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    margin-top: -8px;
    margin-bottom: -8px;
    position: relative;
    color: $dark-grey;
    text-align: center;
    > i {
        color: $grey-color;
        font-size: 24px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }
    > i.icon-check {
        color: $closed-quest-color;
    }
    > div {
        display: inline-block;
        vertical-align: middle;
    }
}
.comment-content-type-clone {
    margin-bottom: 5px;
}

@include keyframes(flash) {
    0% { background-color: none; }
    50% { background-color: lighten($highlight, 30%); }
    100% { background-color: none; }
}

.flash {
    @include animation(flash 1s ease-out);
    @include animation-iteration-count(1);
}
