@import "theme";

// Shared avatar styling mixin.
// Usage: @include avatar($size) on the .avatar-wrap element.
// Expects markup: .avatar-wrap > image.avatar + .avatar-fade

@mixin avatar($size: 64px)
{
    width: $size;
    height: $size;
    border-radius: 50%;
    position: relative;
    overflow: hidden;

    .avatar
    {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
    }

    .avatar-fade
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-image: linear-gradient( 180deg, rgba( 0, 0, 0, 0 ) 55%, rgba( 0, 0, 0, 0.45 ) 100% );
        pointer-events: none;
    }
}