//?? Czy nie zastosować do wszystkich avatarów na stronie?
$_font_size: 14px;
.bbp-author-avatar {
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: middle;

    @include border-radius( 50% );

    &:before {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100%;
        height: 100%;

        content: "";

        @include border-radius( 50% );

        background: #000;
        @include opacity( 0 );

        @include transition( opacity 0.375s ease-in-out );
    }

    &:after {
        display: block;
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 2;
        width: 100%;
        margin-top: -0.5em;

        font-size: $_font_size;
        line-height: 1;
        font-family: FontAwesome;
        text-align: center;
        content: "\f007";

        color: #fff;
        @include opacity( 0 );

        @include transition( opacity 0.375s ease-in-out );
    }

    > .avatar {
        vertical-align: middle;

        @include border-radius( 50% );
    }
}

.topic > .bbp-reply-author > .bbp-author-avatar,
.reply > .bbp-reply-author > .bbp-author-avatar {
    &:after {
        font-size: 28px;
    }
}



.bbp-author-avatar:hover {
    &:before {
        @include opacity( 0.66 );
    }

    &:after {
        @include opacity( 1 );
    }
}
