/*************************/
/*AVATAR (round) AND USER*/
/*************************/

/* Das Custom-Element <qexam-user-avatar> (SPA-Migration Phase 3.5) umhuellt die
   .user-avatar-and-name-Struktur mit einem zusaetzlichen DOM-Knoten. In den
   Grid-Wrappern (.user-remove-only-wrapper, .user-notification-wrapper,
   .user-with-permissions-wrapper) wuerde dieser Knoten selbst zum Grid-Item und
   landete per Auto-Placement in der falschen Spalte (action-1, 34px) — Avatar +
   Name wurden auf 34px gequetscht. display:contents loest den Wrapper aus dem
   Box-Tree, sodass die innere .user-avatar-and-name (mit grid-area:
   user-avatar-and-name) wieder direktes Grid-Item ist — identisch zum alten
   _AvatarAjax-Partial. */
qexam-user-avatar {
    display: contents;
}

.user-avatar-and-name {
    grid-area: user-avatar-and-name;
    display: grid;
    grid-template-columns: min-content auto;
    align-items: center;
    overflow: hidden;
}

.user-avatar-and-name .avatar-username {
    text-overflow: ellipsis;
    margin: 0 10px 0 10px;
}

.avatar-wrapper {
    overflow: hidden;
    background: transparent;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    display: flex;
    justify-content: center;
}

.avatar-wrapper.x-small {
    height: 18px;
    width: 18px;
    flex: 0 0 18px;
}

.avatar-wrapper.small {
    height: 24px;
    width: 24px;
    flex: 0 0 24px;
}

.avatar-wrapper.medium {
    height: 36px;
    width: 36px;
    flex: 0 0 36px;
}

.avatar-wrapper.large {
    height: 50px;
    width: 50px;
    flex: 0 0 50px;
}

.avatar-wrapper.x-large {
    height: 70px;
    width: 70px;
    flex: 0 0 70px;
}

.avatar-wrapper.full {
    height: 140px;
    width: 140px;
    flex: 0 0 140px;
}

.avatar {
    height: 100%;
}

/*Versteckt das div, in das ich in manchen Fällen die LoadUSerAvatar()-Methode gelegt habe*/
.avatar-wrapper div {
    display: none;
}

/***************/
/*Avatar angled*/
/***************/
.avatar-wrapper-angled {
    overflow: hidden;
    background: transparent;
    display: flex;
    justify-content: center;
}

.avatar-wrapper-angled.x-small {
    height: 18px;
    width: auto;
}

.avatar-wrapper-angled.small {
    height: 24px;
    width: auto;
}

.avatar-wrapper-angled.medium {
    height: 36px;
    width: auto;
}

.avatar-wrapper-angled.large {
    height: 50px;
    width: auto;
}

.avatar-wrapper-angled.x-large {
    height: 70px;
    width: auto;
}

.avatar-wrapper-angled.full {
    height: 140px;
    width: auto;
}

/***************************/
/*Wrapper-Options for Users*/
/***************************/
.user-remove-only-wrapper {
    display: grid;
    grid-template-columns: [action-1] 34px [user-avatar-and-name] auto;
    align-items: center;
}

.user-notification-wrapper {
    display: grid;
    grid-template-columns: [action-1] 34px [user-avatar-and-name] auto [action-2] 160px;
    align-items: center;
}

.user-with-permissions-wrapper {
    display: grid;
    grid-template-columns: [action-1] 34px [user-avatar-and-name] auto [user-permissions] 220px;
    align-items: center;
}

.user-with-permissions-wrapper .user-permissions {
    grid-area: user-permissions;
    display: grid;
    grid-template-columns: [permission-1] auto [permission-2] auto;
    align-items: center;
}

.user-remove-only-wrapper .action-1,
.user-notification-wrapper .action-1,
.user-with-permissions-wrapper .action-1 {
    grid-area: action-1;
}

.user-notification-wrapper .action-2 .notification-info {
    grid-area: notification-info;
}

.user-notification-wrapper .action-2 button,
.user-notification-wrapper .action-2 .glyphicons {
    grid-area: glyphicons;
}

.user-notification-wrapper .action-2 {
    align-items: center;
    grid-area: action-2;
    display: grid;
    grid-template-columns: [notification-info] auto [glyphicons] 34px;
}