.user-role {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--text-xs);
  line-height: 1;
  text-transform: uppercase;
  padding: 0.25rem;
  border-radius: var(--border-radius);
  background-color: light-dark(var(--color-gray-100), var(--color-zinc-700));
  color: light-dark(var(--color-gray-500), var(--color-zinc-400));
}

.user-access-level {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--text-xs);
  line-height: 1;
  padding: 0.25rem 0.375rem;
  border-radius: var(--border-radius);
  background-color: light-dark(var(--color-gray-100), var(--color-zinc-700));
  color: light-dark(var(--color-gray-600), var(--color-zinc-300));
}