@import '../../../styles/mixins';
@import '../../../styles/definitions/typography';
@import '../../../styles/definitions/colors';

.avatar {
    &_wrapper {
        $avatar-size: 82px;
        $avatar-border-color: $gray;
        $avatar-border-radius: 8px;
        $avatar-initial-color: $white;
        $avatar-initial-border-color: rgba(0,0,0,0.15);
        --final-size: var(--size, #{$avatar-size});

        width: var(--final-size);
        height: var(--final-size);
        border-radius: $avatar-border-radius;
        overflow: hidden;

        &--with-initials {
            text-align: center;
            font-weight: bold;
            line-height: var(--final-size);
            font-size: calc(var(--final-size) * 0.5);
            font-family: $body-fontFace;
            color: $avatar-initial-color;
            @include background-primary;
            border: 1px solid $avatar-initial-border-color;
        }

        &--with-picture {
            border: 1px solid $avatar-border-color;
        }
    }
        
    &_image {
        width: 100%;
        height: 100%;
        object-fit: cover;   
    }
}
