/* Role assignments - the user picker on Admin/RoleAssignments/ManageUsers.
   One row per user instead of a box per user: the list is the page's main
   content and a tenant can have a lot of accounts. */

.role-assign-list {
    max-height: 32rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

    .role-assign-row {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.4rem 0.75rem;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
    }

        .role-assign-row:last-child {
            border-bottom: 0;
        }

        .role-assign-row:hover {
            background-color: var(--surface-alt);
        }

        .role-assign-row.is-assigned {
            background-color: var(--success-light);
        }

    /* The identity column truncates rather than wrapping, so every row keeps the
       same height however long an address is. */
    .role-assign-identity {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        min-width: 0;
        flex: 1 1 auto;
    }

    .role-assign-name {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .role-assign-secondary {
        color: var(--text-secondary);
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        /* Separator between email and display name, drawn here rather than
           concatenated into the markup. */
        .role-assign-secondary + .role-assign-secondary::before {
            content: "\00b7";
            padding-right: 0.5rem;
        }

    /* Rendered on every row and revealed by state, so toggling a checkbox is a
       class change rather than DOM surgery. */
    .role-assign-flag {
        flex: 0 0 auto;
        visibility: hidden;
    }

    .role-assign-row.is-assigned .role-assign-flag {
        visibility: visible;
    }

@media screen and (max-width: 768px) {
    .role-assign-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}