$large: 64px;
$medium: 48px;
$small: 36px;
$extraSmall: 24px;
$microSmall: 14px;

.avatar {
    color: inherit;
    display: inline-flex;
    border-radius: $radius;
    vertical-align: middle;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: $color-pillBg;
    flex-shrink: 0;

    &:hover {
        color: inherit;
    }

    // for round avatars/emblems
    &__hasImage {
        background: #fff;
    }

    &__outline {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
    }

    &.border {
        border: 2px solid #fff;
    }

    img {
        max-width: 100%;
    }

    &:before {
        content: '';
        display: block;
        margin-top: 100%;
    }

    &.size__lg {
        width: $large;
        height: $large;
        line-height: $large;
    }

    &.size__md {
        width: $medium;
        height: $medium;
        line-height: $medium;
    }

    &.size__sm {
        width: $small;
        height: $small;
        line-height: $small;
    }

    &.size__xs {
        width: $extraSmall;
        height: $extraSmall;
        line-height: $extraSmall;
    }

    &.size__us {
        width: $microSmall;
        height: $microSmall;
        line-height: $microSmall;
    }

    &.size__stretch {
        width: 100%;
    }
}

.round {
    border-radius: 100px;
}