.kt-ui-user-card {
    display: flex;
}

.kt-ui-user-card__avatar-wrapper {
    width: var(--kt-ui-user-card-avatar-size);
    height: var(--kt-ui-user-card-avatar-size);
    flex-shrink: 0;
    border-radius: var(--kt-ui-user-card-avatar-border-radius);
    overflow: hidden;
}

.kt-ui-user-card__avatar-wrapper.default-image {
    display: inline-flex;
    background-color: var(--kt-ui-user-card-avatar-stub-bg-color);
}

.kt-ui-user-card__avatar-wrapper.default-image .kt-ui-user-card__avatar {
    width: var(--kt-ui-user-card-avatar-stub-size);
    height: var(--kt-ui-user-card-avatar-stub-size);
    margin: auto;
}

.kt-ui-user-card__avatar-link {
    width: 100%;
    height: 100%;
}
.kt-ui-user-card__avatar-link .kt-ui-link__content {
    display: flex;
    height: 100%;
    width: 100%;
}

.kt-ui-user-card__avatar {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 50% 50%;
       object-position: 50% 50%;
}

.kt-ui-user-card__name,
.kt-ui-user-card__name:hover {
    font-family: var(--kt-ui-user-card-name-ff);
    font-size: var(--kt-ui-user-card-name-font-size);
    font-weight: var(--kt-ui-user-card-name-font-weight);
    line-height: var(--kt-ui-user-card-name-line-height);
}

.kt-ui-user-card__name {
    color: var(--kt-ui-user-card-name-color);
}

.kt-ui-user-card__name + .kt-ui-user-card__slot-level-1 {
    margin-top: var(--kt-ui-user-card-name-offset);
}

[class^="kt-ui-user-card__slot-level-"] {
    line-height: var(--kt-ui-user-card-slot-line-height);
    color: var(--kt-ui-user-card-slot-color);
}

.kt-ui-user-card.avatar-offset-sm { gap: 8px; }
.kt-ui-user-card.avatar-offset-md { gap: 16px; }

.kt-ui-user-card.alignment-start  { align-items: start; }
.kt-ui-user-card.alignment-center { align-items: center; }
.kt-ui-user-card.alignment-end    { align-items: end; }

.kt-ui-user-card.bold-name .kt-ui-user-card__name {
    --kt-ui-user-card-name-font-weight: var(--kt-ui-user-card-name-font-weight-bold);
}

.kt-ui-user-card-xs {
    --kt-ui-user-card-avatar-size: var(--kt-ui-user-card-avatar-size-xs);
}

.kt-ui-user-card-sm {
    --kt-ui-user-card-avatar-size: var(--kt-ui-user-card-avatar-size-sm);
}

.kt-ui-user-card-md {
    --kt-ui-user-card-avatar-size: var(--kt-ui-user-card-avatar-size-md);
}

.kt-ui-user-card-lg {
    --kt-ui-user-card-avatar-size: var(--kt-ui-user-card-avatar-size-lg);
}

.kt-ui-user-card-xl {
    --kt-ui-user-card-avatar-size: var(--kt-ui-user-card-avatar-size-xl);
}