.root {
  display: flex;
}

.username {
  @include typography.font-body-14(500);
  color: variables.$text-primary;
  user-select: none;
}

.trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  flex-shrink: 0;

  &:hover {
    background-color: variables.$bg-surface;
  }
}

.item {
  gap: 8px;
}

.themeItem {
  gap: 8px;
}
