@import "../variables/variables";
@import "../mixins/public/utility-mixins";

/* These are temporary colors until we get the new palette */
$_avatar-teal-foreground-color: #002a69;
$_avatar-teal-background-color: #84b4fb;
$_avatar-light-teal-foreground-color: #07465a;
$_avatar-light-teal-background-color: #44ccd5;
$_avatar-green-foreground-color: #1b561a;
$_avatar-green-background-color: #4ce160;
$_avatar-lime-foreground-color: #4e4e0c;
$_avatar-lime-background-color: #c1d737;
$_avatar-yellow-foreground-color: #553b06;
$_avatar-yellow-background-color: #ffbd14;
$_avatar-orange-foreground-color: #562501;
$_avatar-orange-background-color: #ff8806;
$_avatar-pink-foreground-color: #4b112d;
$_avatar-pink-background-color: #f79cc8;
$_avatar-magenta-foreground-color: #3e135f;
$_avatar-magenta-background-color: #cc9ef0;

.avatar {
    @include image-treatment(50%, inline-flex);

    align-items: center;
    border-radius: 50%;
    font-size: var(--font-size-large-2);
    font-weight: var(--font-weight-bold);
    height: 48px;
    justify-content: center;
    line-height: 48px;
    overflow: hidden;
    width: 48px;
}
.avatar > svg {
    height: 100%;
    width: 100%;
}

.avatar > img {
    height: 48px;
    object-fit: cover;
    width: 48px;
}

.avatar--fit > img {
    object-fit: contain;
}

.avatar--teal {
    background-color: $_avatar-teal-background-color;
    color: $_avatar-teal-foreground-color;
}

.avatar--light-teal {
    background-color: $_avatar-light-teal-background-color;
    color: $_avatar-light-teal-foreground-color;
}

.avatar--green {
    background-color: $_avatar-green-background-color;
    color: $_avatar-green-foreground-color;
}

.avatar--lime {
    background-color: $_avatar-lime-background-color;
    color: $_avatar-lime-foreground-color;
}

.avatar--yellow {
    background-color: $_avatar-yellow-background-color;
    color: $_avatar-yellow-foreground-color;
}

.avatar--orange {
    background-color: $_avatar-orange-background-color;
    color: $_avatar-orange-foreground-color;
}

.avatar--magenta {
    background-color: $_avatar-magenta-background-color;
    color: $_avatar-magenta-foreground-color;
}

.avatar--pink {
    background-color: $_avatar-pink-background-color;
    color: $_avatar-pink-foreground-color;
}

.avatar--32,
.avatar--32 > img {
    font-size: var(--font-size-medium);
    height: 32px;
    line-height: 32px;
    width: 32px;
}
.avatar--40,
.avatar--40 > img {
    font-size: var(--font-size-large-1);
    height: 40px;
    line-height: 40px;
    width: 40px;
}
.avatar--48,
.avatar--48 > img {
    font-size: var(--font-size-large-2);
    height: 48px;
    line-height: 48px;
    width: 48px;
}
.avatar--56,
.avatar--56 > img {
    font-size: var(--font-size-giant-1);
    height: 56px;
    line-height: 56px;
    width: 56px;
}
.avatar--64,
.avatar--64 > img {
    font-size: var(--font-size-giant-2);
    height: 64px;
    line-height: 64px;
    width: 64px;
}
.avatar--96,
.avatar--96 > img {
    font-size: var(--font-size-giant-3);
    height: 96px;
    line-height: 96px;
    width: 96px;
}
.avatar--128,
.avatar--128 > img {
    font-size: var(--font-size-giant-4);
    height: 128px;
    line-height: 128px;
    width: 128px;
}
