@use "../../wwwroot/scss/variables" as *;

.avatar {
    --bb-avatar-width: #{$bb-avatar-width};
    --bb-avatar-height: #{$bb-avatar-height};
    --bb-avatar-border-radius: #{$bb-avatar-border-radius};
    --bb-avatar-bg: #{$bb-avatar-bg};
    --bb-avatar-color: #{$bb-avatar-color};
    --bb-avatar-icon-font-size: #{$bb-avatar-icon-font-size};
    border-radius: var(--bb-avatar-border-radius);
    width: var(--bb-avatar-width);
    height: var(--bb-avatar-height);
    background-color: var(--bb-avatar-bg);
    color: var(--bb-avatar-color);
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    img {
        width: 100%;
        object-fit: cover;
    }

    > i {
        font-size: var(--bb-avatar-icon-font-size);
    }
}

.avatar-circle {
    --bb-avatar-border-radius: 50%;
}

.avatar-xs {
    --bb-avatar-width: 30px;
    --bb-avatar-height: 30px;
}

.avatar-sm {
    --bb-avatar-width: 40px;
    --bb-avatar-height: 40px;
}

.avatar-lg {
    --bb-avatar-width: 60px;
    --bb-avatar-height: 60px;
}

.avatar-xl {
    --bb-avatar-width: 70px;
    --bb-avatar-height: 70px;
}

.avatar-xxl {
    --bb-avatar-width: 80px;
    --bb-avatar-height: 80px;
}
