.avatar {
    position: relative;
    > img {
        width: 100%;
    }

    // Different resolutions
    &.avatar-low {
        > img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
    }
    &.avatar-high {
        max-width: 540px;
        max-height: 540px;
    }

    // Loading indicator
    &.is-loading {
        &.avatar-high {
            // Show default blured
            > img {
                filter: blur(40px);
                border-radius: 0;
            }
        }

    }
    .avatar-loading {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;

        $circle-diameter: 160px;
        $thickness: 10px;
        @include loading-spinner($circle-diameter - $thickness * 2, $thickness, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.1));
        &>:first-child {
            position: relative;
            left: calc(50% - #{$circle-diameter / 2});
            top: calc(50% - #{$circle-diameter / 2});
        }
    }

    // Indicators depending on identity type (e.g. Work suitcase)
    .work-indicator {
        $indicator-size: 18px;
        position: absolute;
        top: 48px - $indicator-size;
        img {
            width: $indicator-size;
            height: $indicator-size;
        }
    }

    // If a receiver is "blocked"
    .blocked-indicator {
        position: absolute;
        $indicator-size: 18px;
        position: absolute;
        top: 48px - $indicator-size;
        right: 0;
        img {
            width: $indicator-size;
            height: $indicator-size;
        }
    }

}
