/**
 * "Ana#89799", the display name with the public code (components/account/name-with-code.blade.php, M-036).
 * Semantic tokens of layout-site/master.css only.
 */
.name-with-code {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--text-1);
}

.name-with-code-value {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.name-with-code-code {
    color: var(--accent);
    white-space: nowrap;
}

.name-with-code [data-copy-name-with-code].is-copied {
    color: var(--success);
}