/* split from former app.css: roles */

.role-panel__permissions {
    min-width: 0;
}

@media (max-width: 640px) {
    .page-grid.two > .role-panel .role-panel__permissions,
    .page-grid.three > .role-panel .role-panel__permissions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 6px;
    }

    .page-grid.two > .role-panel .role-panel__permissions .chip,
    .page-grid.three > .role-panel .role-panel__permissions .chip {
        width: auto;
        max-width: 100%;
        justify-content: center;
        padding: 6px 10px;
        font-size: 0.74rem;
        line-height: 1.25;
        white-space: normal;
        word-break: break-word;
        text-align: center;
    }
}