.add-comment {
    @include clearfix;
    textarea {
        float: left;
        height: 41px;
        margin-bottom: .5rem;
        min-height: inherit;
    }
    .save-comment {
        color: $white;
        float: right;
    }
    .button-green {
        display: none;
    }
    &.active {
        .button-green {
            display: block;
        }
        textarea {
            @include transition(height .3s ease-in);
            height: 6rem;
        }
    }
}

a.show-more-comments {
    @extend %small;
    border-bottom: 1px solid $gray-light;
    border-top: 1px solid $gray-light;
    color: $gray-light;
    display: block;
    padding: 1rem 0 1rem 1rem;
    &:hover {
        @include transition (background .2s ease-in);
        background: lighten($green-taiga, 60%);
    }
}

.comment-single {
    @include table-flex;
    border-bottom: 2px solid $gray-light;
    padding: 1rem 0;
    position: relative;
    &:hover {
        .delete-comment {
            opacity: 1;
            @include transition(opacity .2s linear);
        }
    }
    &:first-child {
        margin-top: 0;
    }
    &:last-child {
        border: 0;
    }
    .username {
        color: $green-taiga;
        display: block;
        margin-bottom: 1rem;
    }
    .comment-user {
        @include table-flex-child(1, 50px, 0);
        img {
            max-width: 70px;
            width: 100%;
        }
    }
    .comment-content {
        @include table-flex-child(20, 150px, 0);
    }
    .us-activity {
        background: $whitish;
        .activity-inner {
            display: none;
            &.active {
                display: flex;
            }
        }
    }
    .date {
        @extend %small;
        color: $gray-light;
    }
    .delete-comment {
        @include transition(all .2s linear);
        bottom: 2rem;
        color: $grayer;
        opacity: 0;
        position: absolute;
        right: 1.5rem;
        &:hover {
            @include transition(color .2s linear);
            color: $red;

        }
    }
}

.more-comments {
    @extend %small;
    border-bottom: 1px solid $gray-light;
    color: $gray-light;
    display: block;
    padding: 1rem;
    .prev-comments-num {
        color: $green-taiga;
        margin-left: .5rem;
    }
}
.comment-list {
    &.activeanimation {
        .comment-single.ng-enter:last-child,
        .comment-single.ng-leave:last-child {
            @include transition(all .3s ease-in);
        }
        .comment-single.ng-enter:last-child,
        .comment-single.ng-leave.ng-leave-active:last-child {
            opacity: 0;
        }
        .comment-single.ng-leave:last-child,
        .comment-single.ng-enter.ng-enter-active:last-child {
            opacity: 1;
        }
    }
}